Rails ujs response not hitting target

Question

The following view has a div for receiving a rails ujs action result

<div class='grid-x grid-padding-x'>
  <div class='cell small-12 text-center'>
    <div id="afamilis">
    </div>
  </div>
</div>

It is meant to be populater via a form_with command that remains remote. The related .js.erb file has:

$(div#afamilis').append('<%= j render('afamily') %>');

and the browser console debugger does return a 200 response:

$(div#afamilis').append('<div id=\"afamily_128\">\n  <div class=\'grid-x grid-padding-x\'>\n    <div class=\'cell small-12 text-left\'>\n      blurb\n    <\/div>\n  <\/div>\n<\/div>\n');

And right after, the browser console debugger complains about

Uncaught SyntaxError: private fields are not currently supported

then drilling down into the javascript pack for the application.

The browser window does not present the expected HTML block

what is mistaken in thejs.erb file?

Answer 1

You're missing an opening quote on the selector:

$('div#afamilis').append('<%= j render('afamily') 

Also since ids are unique adding div to the selector is highly questionable.