Rails remote form throwing SyntaxError

I've got the following form:

<%= form_for [@commentable, Comment.new], :remote => true do |f| %>
  <%= f.text_area :body %>
  <%= f.submit "Add your comment" %>
<% end %>

Then the controller (heavily stripped down to the basic part):

def create
  respond_with(@comment) do |format|
    format.html { redirect_to params[:return_url] }
    format.json { render :layout => !request.xhr? }
  end
end

Then here is the javascript for handling the form AJAX:

$('#new_comment')
  .bind('ajax:success', function(evt, data, status, xhr){
    var $this = $(this);

    // Append response HTML (i.e. the comme开发者_如何学编程nt partial or helper)
    $('#comments ol').append(xhr.responseText);
    $('#comments ol li:last-child').effect("highlight", {}, 3000);

    // Clear out the form so it can be used again
    $this.find('input:text,textarea').val('');

    // Clear out the errors from previous attempts
    $this.find('.errors').empty();
  })
  .bind('ajax:error', function(evt, xhr, status, error){
    // Display the errors (i.e. an error partial or helper)
    $(this).find('.errors').html(xhr.responseText);
  });

The form submits fine and the comment gets appended as it should, but Safari's Web Inspector shows a SyntaxError: Parse error on line 1 (which is just the doctype) of whatever page I'm on when the comment form is submitted, and I can't figure out why.

Not even sure where to start with this one.

I have gotten that error and it was because the remote ajax call was expecting JavaScript and I was returning html. The .ajax call was defaulting to dataType 'script' so when it got the ajax result, it tried to evaluate it and any < tags caused the error.

I got rid of the error by changing the view from .js.erb to .html.erb and adding 'data-type' => 'html' to the link that contained :remote => true.

In some cases, it may make sense to have the form itself be a JavaScript snippet - something like:

$('#container').replace("<%= escape_javascript(render(...)) %>");

Then you can omit the data-type from the link.

More information about data-type here.

Try putting your bind call on the same line as the new_comment reference:

$('#new_comment').bind('ajax:success', function(evt, data, status, xhr){

I think you're looking at the wrong line 1 - are you including your JavaScript files, it might mean line 1 of one of them. It might also mean line 1 of what's being sent back.

To be honest - try Chrome and switch on the debugging, Chrome is much better at saying which file gave it the problem and where.

You don't need to put all the JQuery in your file anyway - you can write a response in a view if you have the right gems installed - not sure if that would help.

Do you have a div on the page with class "errors"? I was having a very similar problem, and found this question while searching for a solution.

My issue was that we were trying to write back to a div that didn't exist (because of an unless .empty? on the page). When we solved that, the success callback worked.