How to display an animated icon during Ajax request processing
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 });
Showing ActiveRecord error messages from jQuery Ajax actions and scripts
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 %>
How to use jQuery with Rails 2.0 - aka How to fix "ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken)"
This is a slight variation of Henrik Nyh’s code, which fixes an issue with IE6 that makes all Ajax requests use POST in IE6.
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 // IE6 fix for http://dev.jquery.com/ticket/3155 4 if (settings.type == 'GET' || settings.type == 'get') return; 5 6 settings.data = settings.data || ""; 7 settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(window.AUTH_TOKEN); 8 });
That’s all…
Solving "Internet Explorer cannot open the Internet site http://xyz.com. Operation aborted."
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.