Rails 7: Update HTML element after ActiveJob API call

I have a Rails 7.0 application. On page load, I'm making multiple API calls to a third party service to retrieve information to display on the page, which slows the page load time down. To alleviate this, I added an ActiveJob class that performs the API call and adds this to my background job processor. The page load time is much faster and I can see the jobs being executed in the background.

@derivatives.each { |d| CallLastPriceJob.perform_later(d.id) }

My question is, how do I get the API information updated on page?

In the ActiveJob class, I'm updating the instance's attribute with the API data.

@position.last_price = option.first["lastPrice"].to_f

I tried adding the after_perform callback in the ActiveJob class to send the updated instance to the model.

after_perform do |job|
  Holding.notify_last_price_processed(@position)
end

I assume I need to use Turbo Frames or Streams but I'm not sure since I'm new to Rails 7. I tried using the broadcasts_to method in Holding.notify_last_price_processed but it wasn't working as expected. Any help is appreciated.

Thanks!

EDIT:

The after_perform callback in CallLastPriceJob is sending the position back to the model correctly.

As suggested by Les in the comments below, I added <%= turbo_stream_from current_user, :positions %> to my view. I gave each <tr> row a unique ID using the dom_id helper method. Each row is being rendered using a partial shared/portfolio_positions.

In the Holding.notify_last_price_processed method I'm using the broadcast_replace_to method.

Turbo::StreamsChannel.broadcast_replace_to [user, :positions], target: "holding_#{position.id}", partial: "shared/portfolio_positions", locals: { position: position }

In my delayed_job log I can see the partial being rendered and ActionCable broadcasting

Rendered shared/_portfolio_positions.html.erb (Duration: 0.7ms | Allocations: 409)

[ActionCable] Broadcasting to Z2lkOi8vdGhldGFmbG93L1VzZXIvMQ:positions: "<turbo-stream action=\"replace\" target=\"holding_7513\"><template><tr class=\"border-t border-gray-300 text-sm\" id=\"holding_7513\">\n  <td class=\"whitespace-nowrap py-4 pl-4 pr-3 sm:pl-6\">\n    <div class=\"inline\">TEST</div>\n    <div class=\"inline\"></div>\n  </td>\n  <td cl...

Performed CallLastPriceJob (Job ID: 20f8a4de-c6b8-473e-8b49-db66c87d845b) from DelayedJob(default) in 153.72ms

It appears the stream name is the same as what's being displayed in my server log.

Turbo::StreamsChannel is streaming from Z2lkOi8vdGhldGFmbG93L1VzZXIvMQ:positions

...but the contents on the webpage aren't updating...

EDIT 2:

I ran across this issue https://github.com/hotwired/turbo/issues/48 related to updating table elements with Turbo Streams, but I tested with the workaround that was suggested and in addition, changed all elements to <div>s and it still isn't updating the page contents.

Again, I verify that in my delayed_job log file I can see the ActionCable broadcast message and everything appears to be connected correctly. The only thing I can't see is the cable messages in dev tools.

I was able to figure this out and get it working, after making a few changes to my code.

• I added the last_price attribute to my model via migration instead of having it as a virtual attribute.
• I used the broadcast_update_later_to method instead of broadcast_replace_later_to.
• I used [user, "positions"] instead of user, "positions" for the stream name in the Model and in View.

After making these changes the contents on the page started updating.

Final setup

Controller:

@derivatives.each { |d| CallLastPriceJob.perform_later(d.id) }

Job:

after_perform do |job|
  Holding.notify_last_price_processed(@position)
end

Model:

Turbo::StreamsChannel.broadcast_update_later_to [user, "positions"], target: "holding_#{position.id}", partial: "shared/portfolio_positions", locals: { position: position }

Index view:

<%= turbo_stream_from [current_user, "positions"] %>

Partial:

<tr class="border-t border-gray-300 text-sm" is="turbo-frame" id="<%= dom_id(position) %>">...</tr>