from_remote_tag sent request http post instead of ajax XMLHTTP request

Question

Hi, I define a submit button with form_remote_tag,

  <div class="form_row">
<% form_remote_tag :url => {:controller => '/group', :action => 'addgroup'}, :update => 'activitypage' do %>
 <%= submit_tag "Add!", :class => "submit" %>
<% end %>

I used fiddler and confirm the rails code was translated into ajax request,

u003Cform action=\"/group/addgroup\" method=\"post\" onsubmit=\"new Ajax.Request('/group/addgroup', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;\"\u003E\n     \u003Cinput class=\"submit\" name=\"commit\" type=\"submit\" value=\"Add!\" /\u003E\n  \u003C/form\u003E\n  \u003C/div\u003E\n\u003C/fieldset\u003E  \n\u003C/form\u003E\n");

$("activitypage").visualEffect("highlight");

however, when I clicked the button, the client (IE 8) browser actually sent out a http post request (see below) instead of XMLHTTPRequest, thus my javascript reponse was declined. Any idea? Thanks in advance.

POST http://192.168.1.31:3000/group/addgroup HTTP/1.1

Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-silverlight, / Referer: http://192.168.1.31:3000/mywebapp Accept-Language: en-us User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.5; .NET CLR 1.0.3705; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate Host: 192.168.1.31:3000 Content-Length: 84 Connection: Keep-Alive Pragma: no-cache Cookie: remember_me=1; _session_id=2ba880449df83115d15bab29b3c8ab30; authorization_token=6419794165b8169cfff54053bddb40c9f0405782

Answer 1

Who declined the response?

Your browser shouldn't ever send a XMLHTTPRequest as the actual HTTP method. Your choices are limited to GET and POST (plus HEAD, PUT, DELETE).

An AJAX request should actually set a header that then gets check:

'X-Requested-With' = 'XMLHttpRequest'

The actual HTTP method used will be GET or POST.

Answer 2

when the server sent back a javascript page for ajax page replacement, the browser pop a window for file download due to unaccepted page format. I expected that the submit button will send a ajax request with accepting javascript page. But it didnot. Why?

below is the response from server after receiving the submit request?

HTTP/1.1 200 OK Connection: close Date: Wed, 18 Aug 2010 02:26:31 GMT Set-Cookie: _session_id=2ba880449df83115d15bab29b3c8ab30; path=/ Status: 200 OK X-Runtime: 0.71081 ETag: "c4825b6e144b125ce655259083a12eff" Cache-Control: private, max-age=0, must-revalidate Server: Mongrel 1.1.5 Content-Type: text/javascript; charset=utf-8 Content-Length: 17195

try { Element.update("activitypage", "\u003Ch1\u003EGroup\u003C/h1\u003E\n\u003Cscript src=\"/javascripts/prototype.js?1258680672\" type=\"text/javascript\"\u003E\u003C/script\u003E\n\u003Cscript src=\"/javascripts/effects.js?1258680672\" type=\"text/javascript\"\u003E\u003C/script\u003E\n\u003Cscript src=\"/javascripts/dragdrop.js?1258680672\" type=\"text/javascript\"\u003E\u003C/script\u003E\n\u003Cscript src=\"/javascripts/controls.js?1258680672\" type=\"text/javascript\"\u003E\u003C/script\u003E\n\u003Cscript src=\"/javascripts/application.js?1258680672\" type=\"text/javascript\"\u003E\u003C/script\u003E\n\u003Cbr\u003E\n\n\u003Ctable border=\"0\" ....