406 error from rails jquery ajax

Question

I'm working in my development environment. The behavior I want: I have a form on a modal dialog. The user clicks submit and data is sent to my "questions" controller. Some emails are sent and then the contents of the dialog are refreshed to say "Message sent successfully." Pretty basic. The problem is that I can't set the headers properly so rails is processing the data as html, not javascript. The emails go out but rails returns a 406 error. Here is my code:

_social.html.erb

    <div class='jqmWindow notices' id="emailModal">
      <h3>Email a link to this poll</h3>
      <p>You are emailing a link to the following poll:<br><strong><%=@question.text%></strong></p>
      <%= form_tag(:controller=>'questions', :action=>'email' , :method => "post",  :id=>"emailForm") do %>
              <%= label_tag(:emails_label, "Enter up to 20 email addresses separated by commas:" )%>
          <%= text_area_tag(:emails, "",:size => "60x6")%>
          <%= hidden_field_tag(:question_id, @question.id )%>
              <%= label_tag(:email_msg_label, "Enter a brief message to accompany your link:" )%>
          <%= text_area_tag(:email_msg, "",:size => "60x4")%><br>

          <%= submit_tag ( "Submit")%>
        <%end%>
    </div>

...

<script>

$(document).ready(function(){
  $('#shareModal').jqm();
  $('#emailModal').jqm();
  $.ajaxSetup({
    'beforeSend': function(xhr) {
        xhr.setRequestHeader("Accept", "text/javascript")
    }
  });


  $(document).ajaxSend(function(e, xhr, options) {
    var token = $("meta[name='csrf-token']").attr("content");
    xhr.setRequestHeader("X-CSRF-Token", token);
  });

...

  $('#emailForm').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;
  });
});

</script>

questions_controller.rb

 def email
    question = Question.find(params[:question_id])
    emails = params[:emails].split(/, /)
    emails.each do |recipient|
      GenericMailer.share(question, current_user.email, recipient, params[:email_msg]).deliver
    end
    respond_to do |format|
      format.js
    end


  end

email.js.erb (right now, this code never gets executed!)

alert("hello!");
$(#emailModal).html("Email sent successfully!");

and here are the headers:

    Request URL:http://127.0.0.1:3000/questions/emailForm/email?method=post
    Request Method:POST
    Status Code:406 Not Acceptable
    Request Headersview source
    Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8
    Cache-Control:max-age=0
    Connection:keep-alive
    Content-Length:172
    Content-Type:application/x-www-form-urlencoded
__utma=96992031.1133215771.1353171766.1354190632.1354240040.26; __utmb=96992031.69.10.1354240040; __utmc=96992031; __utmz=96992031.1353379538.10.2.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=http://127.0.0.1:3000/questions/5
    Host:127.0.0.1:3000
    Origin:http://127.0.0.1:3000
    Referer:http://127.0.0.1:3000/questions/1
    User-Agent:Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11

Thanks in advance for any help you can provide!

Answer 1

Thanks to all who responded. It turns out the ajax code was never even being executed. It was a rails problem. This was the culprit:

<%= form_tag(:controller=>'questions', :action=>'email' , :method => "post",  :id=>"emailForm") do %>

The id was being appended to the request, not added as a css idto the form tag. Thus the jQuery selector was not catching the form submission. The correct code:

<%= form_tag({:controller=>'questions', :action=>'email' }, {:id=>"emailForm"}) do %>

Cheers....

Answer 2

It appears your ajaxSetup might not be correct, the official MIME type for JS is application/javascript

In the headers you can see the Accept: string doesn't have anything for JS in there. First try to call the URL with .js appended to rule out your Rails controller.

And then in a browser inspector make sure application/javascript is first in the Accept list.

Answer 3

Did you debug the javascript/jquery code in email.js.erb? 406 errors often indicate typos in your js code (which is not obvious regarding to the meaning of the error code).

At least, in your example, the second line has a typo, single quotes are missing:

 $('#emailModal').html("Email sent successfully!");