title: Ruby On Rails 3, form_tag remote on responding to Ajax request
body: <p>thanks for reading this post. I've been stuck on an issue with RoR for the past few days. I have a form under index.html.erb as:</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Ajax List Demo&lt;/title&gt;
      &lt;%= javascript_include_tag :defaults %&gt;  
      &lt;%= csrf_meta_tag %&gt;  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h3&gt;Add to list using Ajax&lt;/h3&gt;
  
    &lt;% form_tag :action =&gt; :list , :method=&gt;:get, :remote=&gt;true  do %&gt;
      Enter the public url:&lt;%= text_field_tag 'url' ,'', :size =&gt; 80 %&gt;
      &lt;%= submit_tag "Find" %&gt;
    &lt;% end %&gt;
  
    &lt;div id="my_list"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In the controller I have:</p>
  
  <pre><code> def list
      puts "here!!!!"
      reader = Reader.new
      @profiles =  reader.processURL(params[:url]) #profileList = 
      respond_to do |format|
        #format.html { render :partial=&gt;true, :locals =&gt; { :profiles =&gt; @profiles}}#{          render :partial=&gt;'profiles/list',:layout =&gt; false, :locals =&gt; { :profiles =&gt; @profiles}} 
  
  format.js {render :content_type =&gt; 'text/javascript', :locals =&gt; { :profiles =&gt; @profiles}}
  
  # index.html.erb
        #   format.rss     render :partial=&gt;'profiles/list',:layout =&gt; false, :locals =&gt; { :profiles =&gt; @profiles}
      end
  </code></pre>
  
  <p>And a js file for remote UJS as list.js.erb</p>
  
  <pre><code>$("#my_list").html("&lt;%= escape_javascript(render(:partial =&gt; "list"))%&gt;");
  </code></pre>
  
  <p>The issue is I cannot get the results to render the partial _list.html.erb, in the div tag my_list. I get a blank page, 406 error. If I un-comment the render html code in the controller I get the partial back rendered in the browser. I am kind of stuck, I want to submit the form and the results to pop in the my_list div. I'm new to rails so if I'm missing something obvious don't hesitate to point it out to me....I'm definitely willing to try.</p>
  
  <hr>
  
  <p>Changed it to this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Ajax List Demo&lt;/title&gt;
          &lt;h1&gt;Listing posts&lt;/h1&gt;
             &lt;%= javascript_include_tag 'jquery.js' %&gt;  
      &lt;%= csrf_meta_tag %&gt;  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h3&gt;Add to list using Ajax&lt;/h3&gt;
  
          &lt;% form_tag :action =&gt; :doit , :method=&gt;:get, :remote=&gt;true  do %&gt;
          Enter the public url:&lt;%= text_field_tag 'url' ,'', :size =&gt; 80 %&gt;
          &lt;%= submit_tag "Find" %&gt;
          &lt;% end %&gt;
  
          &lt;div id="my_list"&gt;
                     &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>def doit
      puts "here!!!!"
      reader = Reader.new
      @profiles =  reader.processURL(params[:url])
      respond_to do |format|
   #     format.html {render :partial=&gt;true, :locals =&gt; { :profiles =&gt; @profiles}}#{    render :partial=&gt;'profiles/list',:layout =&gt; false, :locals =&gt; { :profiles =&gt; @profiles}} 
        format.js #{render :content_type =&gt; 'text/javascript', :locals =&gt; { :profiles =&gt; @profiles}}
        # index.html.erb
        #   format.rss     render :partial=&gt;'profiles/list',:layout =&gt; false, :locals =&gt; { :profiles =&gt; @profiles}
      end
  </code></pre>
  
  <p>JS
  _doit.js.erb
  $("#my_list").html("&lt;%= escape_javascript(render(:partial => "doit"))%>");</p>
  
  <p>And finally a partial:</p>
  
  <p>_doit.html.erb.</p>
  
  <p>However I am still getting the 406 error, I dont have a duplicate _doit js or erb. Does anything standout as incorrect from this? Thanks again!</p>
  
  <hr>
  
  <p>Another update:</p>
  
  <p>I think the form is not rendered correctly:</p>
  
  <p>This rendered:</p>
  
  <pre><code>&lt;% form_tag :action =&gt; :doit , :remote=&gt;true, :id =&gt; 'myform' do %&gt;
          Enter the public url:&lt;%= text_field_tag 'url' ,'', :size =&gt; 80 %&gt;
          &lt;%= submit_tag "Find" %&gt;
          &lt;% end %&gt;
  </code></pre>
  
  <p>This:</p>
  
  <pre><code>&lt;form accept-charset="UTF-8" action="/home/doit?id=myform&amp;amp;remote=true" method="post"&gt;
  &lt;div style="margin:0;padding:0;display:inline"&gt;
  &lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;
  &lt;input name="authenticity_token" type="hidden" value="MLuau4hvfdGO6FrYCzE0c0JzwHhHKZqjmV49U673sK8=" /&gt;
  &lt;/div&gt;        Enter the public url:
  &lt;input id="url" name="url" size="80" type="text" value="" /&gt;
  
      &lt;input name="commit" type="submit" value="Find" /&gt;
  
  
  
          &lt;input name="commit" type="submit" value="Find" /&gt;
  </code></pre>
  
  <h2>Its adding my remote tag and id to the query string, isnt this wrong?</h2>
  
  <p>Ok finally got a clue forms need to be bracketed:</p>
  
  <pre><code> &lt;%= form_tag( { :action =&gt; 'doit' }, :multipart =&gt; true, :remote=&gt;true, :id =&gt; 'myform' ) do %&gt;
  </code></pre>
  
  <hr>
  
  <p>Ok last update tonight: 
  Now I get in the logs:</p>
  
  <p>Started POST "/home/doit" for 127.0.0.1 at Wed Oct 27 22:40:55 -0400 2010
  here!!!!
    Processing by HomeController#doit as JS
    Parameters: {"commit"=>"Find", "url"=>"http://www.facebook.com/people/James-Stewart/653161299", "authenticity_token"=>"MLuau4hvf
  dGO6FrYCzE0c0JzwHhHKZqjmV49U673sK8=", "utf8"=>"Γ£ô"}
  Rendered home/_doit.html.erb (4.0ms)
  Rendered home/doit.js.erb (9.0ms)
  Completed 200 OK in 807ms (Views: 40.0ms | ActiveRecord: 0.0ms)</p>
  
  <p>I see as JS and it says it renders my js/partial. However I am getting nothing on my_list div. My JS file:</p>
  
  <pre><code>$("#my_list").html("&lt;%= escape_javascript(render(:partial =&gt; "doit"))%&gt;");
  </code></pre>
  
  <p>My html.erb form file has now:</p>
  
  <pre><code>&lt;script$('#myform').bind('ajax:success', function(evt, data, status, xhr){
      xhr.responseText;
    });&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Its like the form does nothing, which is a good sign, no more 406 error. I know this is close, if anyone can point what I need to do in the js that would be great otherwise I'll take a break and try tmrw.</p>
  
  <hr>
  
  <p>Ok I think its getting a response back just not rendering as you pointed out would be the issue yesterday Steve. </p>
  
  <p>Debugging the JS on Firebug I see the html I want rendered in the div, for this:</p>
  
  <pre><code>http://localhost:3000/javascripts/prototype.js?1285674435/event/seq/1
  </code></pre>
  
  <p>Which means I think I am getting the JS response back now.</p>
  
  <p>I have this on the form page:</p>
  
  <pre><code>&lt;script&gt;$('#myform').bind('ajax:success', function(evt, data, status, xhr){
      $('#my_list').html(eval(xhr.responseText));
    });&lt;/script&gt;
  </code></pre>
  
  <p>Inspections say it doesnt know what myform is, but I put :id => 'myform' in the Rails code.</p>
  
  <hr>
  
  <p>Again all thanks, I got a ton of help here and I want to share how I finally got it working back to the community.</p>
  
  <p>The, js file for the method doit(def. need a better controller action name) is doit.js</p>
  
  <p>The code was ultimately:</p>
  
  <pre><code>$("my_list").update("&lt;%= escape_javascript(render(:partial =&gt; "doit"))%&gt;");
  </code></pre>
  
  <p>For some reason leaving it as #my_list wouldn't be found in firefox, I had to use firebug to finally figure this out. </p>
  
  <p>Obviously this is different from the way suggested below, and I am going to place the js script back into the form and remove the .js.erb file and see how that works works.  I suppose I just render the partial in the format.js response? Also where does everyone find info on writing the UJS files? I know nothing about the syntax for anything starting with $.</p>
  
  <p>Again thanks for the help, finally feel like I am making progress on learning rails.</p>