Rails 6.0.4 remote: true does not js/ajax render _partial.html.erb in browser

Question

For years I have used the following js/ajax "remote: true" setup.

But now the browser is not displaying the _partial.html.erb when called by the action.js.erb.

Console does show partial is rendered but it is not visible within the browser div.

Here is a simple demo of the js/ajax "remote: true" setup using Time.zone.now:

application/_time_now.html.erb

<%= link_to Time.zone.now, time_now_path, remote: true %>

on webpage - notice the class name ( tried both with and without turbolinks )

<div class="time_now" data-turbolinks="false">
 <%= render "application/time_now" %>
</div> 

time_now.js.erb

$(".time_now").html('<%= j render partial: "application/time_now" %>');

Other StackOverflow "js.erb not rendering in browser" questions are of no help.

Rails 6.0.4 (first time using Webpacker)

For some reason on this Rails 6.0.4 app this "remote: true" setup fails to js/ajax "display" the partial within the browser after submitting the "remote: true"' link.

Console does show partial is rendered but it is not visible within the browser div.

The full work flow:

application/_time_now.html.erb

<%= link_to Time.zone.now, time_now_path, remote: true %>

Expecting js/ajax to render partial within the class="time_now" div:

<div class="time_now" data-turbolinks="false">
 <%= render "application/time_now" %>
</div> 

routes is working

get '/time_now', to: 'welcome#time_now', as: "time_now"

controller welcome is working

  def time_now
      
  end

and time_now.js.erb is kinda working.

To test, I added two alerts. Weird the second alert does not work.

Is there a newer method than ' j render partial: "some_partial" ' ?

time_now.js.erb

alert('one - working!');
$(".time_now").html('<%= j render partial: "application/time_now" %>');
alert('two - NOT working!');

And according to the console, 'application/_time_now.html.erb' is rendered - but the browser is NOT updated.

The partial is NOT displayed within the browser page:

Started GET "/time_now" for ::1 at 2021-06-30 23:15:20 +0300
Processing by WelcomeController#time_now as JS
  Rendering welcome/time_now.js.erb
  Rendered application/_time_now.html.erb (Duration: 0.4ms | Allocations: 89)
  Rendered welcome/time_now.js.erb (Duration: 0.7ms | Allocations: 178)
Completed 200 OK in 3ms (Views: 1.6ms | ActiveRecord: 0.0ms | Allocations: 745)

This code is so simple there is not much to test.

The Rails 6 javascript setup might be the problem. (again, first time using Webpacker)

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery-ui/ui/widget")
require("jquery-ui/ui/widgets/sortable")

import "jquery"
import "popper.js"
import "bootstrap"

import "clipboard"
import "jquery.raty-fa" 
import "leaflet"    
import "social-share-button"    

This is so simple, I must be overlooking something obvious.

Any help and/or insight would greatly be appreciated.

Answer 1

i think your jquery setup ( webpack ) is incorrect so $ is nil, you can easily search how to do that, eg this

another way, you can use dom querySelector instead of jquery

// time_now.js.erb
time_now = document.querySelector(".time_now")
time_now.innerHTML = '<%= j render partial: "application/time_now" %>'