CODEWITHSUNDEEP
jqueryajaxruby-on-rails-3forms
Pedro Cori
Pedro Cori

Reputation: 2066

Rails 3: Can't get form to be processed as javascript instead of HTML

I'm trying to process a form from a view in a controller, but the data-type is always sent as HTML instead of JS. The form is rendered in the following .js.erb file into a called 'variable':

views/ofertas/buscar.js.erb:

$('#variable').html("<%= escape_javascript( render('buscar')) %>");

which renders the following partial: views/ofertas/_buscar.html.erb:

<%= form_for @search, :html => {:remote => true, :'data-type' => 'script', :id => 'search_form'}, :url => {:controller => 'ofertas', :action => 'buscar'} do |f| %>
    <%= f.text_field :search_words %>
    <%= f.submit 'Buscar' %>
<% end %>

<div id='tabla'>
    <%= render(:inline => @tabla) %>
</div>

Now, I've tried every combination of data-types on the form. 'script', 'js', deleting that parameter, etc... And here is the controller: controllers/ofertas_controller.rb:

def buscar
    ...
    respond_to do |format|
        format.js
    end
end

The strange thing is that the first time this method in the controller is called, is from a link that looks like this in the rendered view:

<a href="/ofertas/buscar?search_words=default" class="tabs" data-remote="true" data-type="js">lista de ofertas</a>

This works perfectly, and the 'variable' is filled with the form. The rails console looks like this:

Started GET "/ofertas/buscar?search_words=default" for 127.0.0.1 at 2011-05-11 20:15:45 -0400
    Processing by OfertasController#buscar as JS
    Parameters: {"search_words"=>"default"}
    ... SQL stuff happens here ...
Rendered inline template (1.4ms)
Rendered ofertas/_buscar.html.erb (2.9ms)
Rendered ofertas/buscar.js.erb (4.5ms)
Completed 200 OK in 69ms (Views: 43.7ms | ActiveRecord: 0.6ms)

But when I use the rendered form to access that same controller method, the request is always processed as HTML. Here is the resulting HTML of the rendered view (after the GET from above):

<form accept-charset="UTF-8" action="/ofertas/buscar" data-remote="true" data-type="script" id="search_form" method="post">
    <div style="margin:0;padding:0;display:inline">
         <input name="utf8" type="hidden" value="✓">
         <input name="authenticity_token" type="hidden" value="Tpv4CESApK+Cf2tMchewm/B2nprBgEQKYmp7MvWBcfc=">
    </div>
<input id="_search_words" name="[search_words]" size="30" type="text">
<input id="_submit" name="commit" type="submit" value="Buscar">
</form>

When I submit the search form with the word '1234', the rails console looks like this:

Started POST "/ofertas/buscar" for 127.0.0.1 at 2011-05-11 21:14:30 -0400
   Processing by OfertasController#buscar as HTML
   Parameters: {"utf8"=>"✓", "authenticity_token"=>"Tpv4CESApK+Cf2tMchewm/B2nprBgEQKYmp7MvWBcfc=", "search_words"=>"1234", "commit"=>"Buscar"}
   ... SQL stuff happens here ...
Completed 406 Not Acceptable in 25ms

I understand this is because of the processing as HTML (the Accept headers are application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5), but I don't understand why the request is sent as HTML. The Accept headers before submitting the form are the following: */*, */*;q=0.5, text/javascript, application/javascript

Please help me, I've been stuck on this for a whole day and haven't been able to make progress. Thank you.

EDIT:

Ok, I finally found a function that attaches the handleRemote() event to the form submit. It actually looks for all the forms in the page, but since there is only one, it's good enough for now. Here is the code:

$(function(){

    $("#tag_lista")
        .live('ajax:complete', function(){
             $("form[data-remote]").live('submit', function(e){
                  $.rails.handleRemote($("form[data-remote]"));
                  e.preventDefault();
             });
        });
});

Upvotes: 4

Views: 2198

Answers (1)

theIV
theIV

Reputation: 25794

I could be missing the point, but how are you handling the submission of the form?

If you are attaching an event to your page to handle the submission of the first form, you will have to re-attach the event to the newly created form, meaning after you've submitted it the first time.

Have a look at jQuery's live as a way that you could go about handling this.

Upvotes: 3

Related Questions