This example uses the jQuery JavaScript library.

First, create an Ajax icon using the AjaxLoad site.

Then add the following to your HTML :

   1  <img src="/images/loading.gif" id="loading-indicator" style="display:none" />

And the following to your CSS file:

   1  #loading-indicator {
   2    position: absolute;
   3    left: 10px;
   4    top: 10px;
   5  }

Lastly, you need to hook into the Ajax events that jQuery provides; one event handler for when the Ajax request begins, and one for when it ends:

   1  $(document).ajaxSend(function(event, request, settings) {
   2    $('#loading-indicator').show();
   3  });
   4  
   5  $(document).ajaxComplete(function(event, request, settings) {
   6    $('#loading-indicator').hide();
   7  });

The HTML , in a layout file, for example application.html.erb:

   1  <div id="error-message" style="display:none">
   2  </div>

The JavaScript, rendered by for example create.js.erb:

   1  <% if !@category.valid? %>
   2  <%
   3    errors = <<ERR
   4    <p>Please fix the following errors:</p>
   5    <ul>
   6      #{@category.errors.collect{|err| "<li>" + err[0] + " " + err[1] + "</li>" } }
   7    </ul>
   8  ERR
   9  %>
  10  $('#error-message').html('<%= escape_javascript(errors) %>');
  11  $('#error-message').show();
  12  <% else %>
  13  $('#error-message').hide();
  14  <% end %>

All credit goes to Henrik Nyh for writing a blog post about how to fix this issue.

This is a slight variation of his code:

In application.html.erb, or whatever layout file you’re using, put:

   1  <%= javascript_tag "window.AUTH_TOKEN = '#{form_authenticity_token}';" %>

In application.js, or whatever JavaScript file you’re using, put:

   1  $(document).ajaxSend(function(event, request, settings) {
   2    if (typeof(window.AUTH_TOKEN) == "undefined") return;
   3    settings.data = settings.data || "";
   4    settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(window.AUTH_TOKEN);
   5  });

That’s all…

This bug exists in IE6 and IE7 and is caused by a JavaScript that tries to modify a tag that hasn’t been closed (yet).

For example this one:

   1  <div id="x">
   2    <script type="text/javascript">
   3    $('x').replace("wrong");
   4    </script>
   5  </div>

This example fixes the problem, because the script is defined after the tag that it tries to modify:

   1  <div id="x">
   2  </div>
   3  <script type="text/javascript">
   4    $('x').replace("correct");
   5  </script>

See BUG : Error message when you visit a Web page or interact with a Web application in Internet Explorer: ‘Operation aborted’ for a detailed explanation of the problem.