Render partial when a new object is created via API

Question

I want to render a partial with the data that were created via the API:

1 - A POST is send to the API

2 - The API creates the object in the database

3 - A partial is rendered to specific user with the object data

I tryied use Action Cable, But nothing happens in the browser when i create a call via Rails Console.

See my code

models/call.rb

class Call < ApplicationRecord
    after_create_commit { CallBroadcastJob.perform_later self }
end

controllers/seller_controller.rb

class SellerController < ApplicationController
  def index
    @calls = Call.where(status: true).last
  end
end

jobs/call_broadcast.rb

class CallBroadcastJob < ApplicationJob
  queue_as :default

  def perform(call)
    ActionCable.server.broadcast 'new_call_channel', call: render_call(call)
  end

  private
  def render_call(call)
    ApplicationController.render(partial: 'seller/call', locals: {call: call})
  end
end

channels/new_call_channel.rb

class NewCallChannel < ApplicationCable::Channel
  def subscribed
    stream_from "new_call_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

javascrips/channels/new_call.coffee

App.new_call = App.cable.subscriptions.create "NewCallChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    $('#call_partial').html data

views/seller/index.html.erb

<div class="vendas">
    <div class="w-container">
        <div id="call_partial" class="atendimento lead"><%= render partial: 'seller/call', locals: {call: @calls} if @calls.present? %></div>
    </div>
</div>

views/seller/_call.html.erb

<div class="chamada-row w-row">
    <div class="w-col w-col-3">
        <div>Telefone: <strong><%= call.from_number %></strong></div>
        <div>Campanha: <strong>---</strong></div>
        <div>Agente: <strong><%= call.agent %></strong></div>
    </div>
</div>

RAILS CONSOLE

2.4.2 :001 > Call.create!(call_id: "321", from_number: "(21) 9999-9999", agent: 001)
   (0.3ms)  BEGIN
  SQL (0.6ms)  INSERT INTO "calls" ("call_id", "from_number", "agent", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["call_id", "321"], ["from_number", "(21) 9999-9999"], ["agent", "1"], ["created_at", "2018-04-18 21:12:18.010119"], ["updated_at", "2018-04-18 21:12:18.010119"]]
   (13.2ms)  COMMIT
Enqueued CallBroadcastJob (Job ID: 9049b86f-1a91-4e3a-a46a-e3ba55ccb6b8) to Async(default) with arguments: #<GlobalID:0x00007f622c37fa38 @uri=#<URI::GID gid://inteligente/Call/10>>
 => #<Call id: 10, call_id: "321", from_number: "(21) 9999-9999", agent: "1", created_at: "2018-04-18 21:12:18", updated_at: "2018-04-18 21:12:18", status: true> 
2.4.2 :002 >   Call Load (0.5ms)  SELECT  "calls".* FROM "calls" WHERE "calls"."id" = $1 LIMIT $2  [["id", 10], ["LIMIT", 1]]
Performing CallBroadcastJob from Async(default) with arguments: #<GlobalID:0x00007f622c1f4240 @uri=#<URI::GID gid://inteligente/Call/10>>
  Rendered seller/_call.html.erb (2.5ms)
[ActionCable] Broadcasting to new_call_channel: {:call=>"<div class=\"chamada-row w-row\">\n\t<div class=\"w-col w-col-3\">\n\t\t<div>Telefone: <strong>(21) 9999-9999</strong></div>\n\t\t<div>Campanha: <strong>---</strong></div>\n\t\t<div>Agente: <strong>001</strong></div>\n\t</div>\n"}
Performed CallBroadcastJob from Async(default) in 115.72ms

Answer 1

In your controller you can just render a view partial back, like:

render layout: false, template: "path/to/view/partial", locals: {var_used_in_partial: response_data, some_other_var: other_var_value, some_arbitrary_string: "hello world"}

So, if you made an ajax call to that API endpoint and wanted to get back a response that was a template filled out with all the data, this would let you do it. Then, you just append that response to the DOM wherever you want it.

Did I understand your question correctly?