Using ajax to save and load without reloading the whole page

Much like the comments here, I'm trying to make comments on my app be submitted through ajax. I've added remote: true to my form, and made sure format.js is under the create method in the comments controller. I've been testing the code below that I added to a new file at comments/create.js.erb It's working and submitting comments, but I can't seem to get it to actually load the comment in the comments section. In other words, it submits correctly with the success message, but it doesn't actually show until I reload the page. Thanks for any suggestions!

Posted about 5 years ago by Nate
Posted about 5 years ago by Nate

Here is the code in comments/create.js.erb:

$('#comment_submit').val('');
$('#comment_submit').attr('placeholder', 'Add a comment & hit enter.');
$( "<p style='color:green'>Successfully Commented!!</p>" ).insertBefore( "#comment_submit" );
$('#comments').html('<%= escape_javascript(render @comments) %>');

0
Posted about 5 years ago by Alex Yang

Sounds like everything works except the last line where you're inserting the (hopefully updated) list of comments. Try doing some debugging...does '@comments' contain the new comment? Do you see any errors in your Chrome 'Inspect Element' Console?

0
Posted about 5 years ago by Nate

For some reason the above works in Chrome on Windows... but not on my Mac (Chrome).

0