Ajax is not defined on remote_form_for

Question

I encountred an error on form submission. This form is defined as :

<% remote_form_for @my_object do |f| %>
  ...
<% end %>

The generated HTML is :

<form action="/my_objects" id="new_my_object" method="post"
   onsubmit="new Ajax.Request('/customers', {
      asynchronous:true,
      evalScripts:true,
      parameters:Form.serialize(this)
   }); return false;">
   ...
</form>

I encountred this JS error :

Uncaught ReferenceError: Ajax is not defined

I read somewhere it's a Prototype error, but I don't understand the mistake I made.

My configuration is Rails 2.3.16, Ruby 1.8.6, jquery 1.9.1 and jquery-ui 1.10.2.

http://stackoverflow.com/questions/4999559/jquery-ui-and-prototype-conflict — Dipesh Parmar, Mar 25 '13 at 11:48
You're using Prototype syntax but include only jQuery. Either switch to using Prototype or write the ajax call using jQuery methods. — JJJ, Mar 25 '13 at 11:49
@Juhana I'm not using Prototype syntax : Rails do it. How can I say to Rails 'use jQuery syntax' ? — pierallard, Mar 25 '13 at 12:25

Jean-Marc Delafont · Accepted Answer · 2013-04-01T10:23:02.800

By default rails 2.x (and earlier versions), generate JS code for Prototype (cf javascript_helper and prototype_helper.

To generate jQuery code in Rails 2.x, add jrails plugin for rails 2.x., and you will able to use the same rails helpers like remote_form_for or link_to_remote and jQuery.

This part of jrails.js may be obsolete with jquery 1.9 :

(function($) {
  $.ajaxSettings.accepts._default = "text/javascript, text/html, application/xml, text/xml, */*";
})(jQuery);

replace it by this code :

$.ajaxPrefilter(function (options, originalOptions, jqXHR) { 
  options.beforeSend = function () {
    jqXHR.setRequestHeader("accept", '*/*;q=0.5, ' + $.ajaxSettings.accepts.script);
    if ($.isFunction(originalOptions.beforeSend)) originalOptions.beforeSend();
  };
});

to have ajax request detection working in a controller :

def my_action
  respond_to |format|
    format.js { ... }
    format.html { ... }
  end
end

Good to see your huge improvement of the question! +1 for it. — fedorqui, Mar 25 '13 at 14:20

score 0 · Answer 2 · answered Mar 25 '13 at 14:04

0

If you want to work with JQuery try this:

<%= form_for @my_object, :html => {:method => "post" }, :remote => true do |form| %>

<% end %>

Please also check the Rails Guidelines: http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html

answered Mar 25 '13 at 14:04

Andre Mellentin

43
1
5

Rahul Tapali · Answer 3 · 2013-03-26T18:17:28.870

I know this not an answer to your problem. But I use JQuery AJAX instead of Rails remote attribute to avoid these type of confusion. It is very handy to use AJAX with JQuery.

<% form_for @my_object do |f| %>
  ...
<% end %>

<script>
  $(function(){
    $('#form_id').submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(data, status){
        alert(status)
      }) 
    })
  });
</script>

Ajax is not defined on remote_form_for

3 Answers3