ajax snippets

Solving "Internet Explorer cannot open the Internet site http://xyz.com. Operation aborted."

Tagged ie7, ie6, bug, ajax, prototype, scriptaculous  Languages javascript

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:

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

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

<div id="x">
</div>
<script type="text/javascript">
  $('x').replace("correct");
</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.

How to use jQuery with Rails 2.0 - aka How to fix "ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken)"

Tagged authenticity, rails, rails 2, token, jquery, javascript, ajax  Languages ruby

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:

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

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

$(document).ajaxSend(function(event, request, settings) {
  if (typeof(window.AUTH_TOKEN) == "undefined") return;
  // IE6 fix for http://dev.jquery.com/ticket/3155
  if (settings.type == 'GET' || settings.type == 'get') return;

  settings.data = settings.data || "";
  settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(window.AUTH_TOKEN);
});

That's all...

Showing ActiveRecord error messages from jQuery Ajax actions and scripts

Tagged error, ajax, jquery, rails  Languages ruby

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

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

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

<% if !@category.valid? %>
<%
  errors = <<ERR
  <p>Please fix the following errors:</p>
  <ul>
    #{@category.errors.collect{|err| "<li>" + err[0] + " " + err[1] + "</li>" } }
  </ul>
ERR
%>
$('#error-message').html('<%= escape_javascript(errors) %>');
$('#error-message').show();
<% else %>
$('#error-message').hide();
<% end %>

How to display an animated icon during Ajax request processing

Tagged ajax, jquery, indicator, loading  Languages javascript

This example uses the jQuery JavaScript library.

First, create an Ajax icon using the AjaxLoad site.

Then add the following to your HTML:

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

And the following to your CSS file:

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

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:

$(document).ajaxSend(function(event, request, settings) {
  $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
  $('#loading-indicator').hide();
});

How to prevent double form submissions with jQuery

Tagged submit, jquery, ajax  Languages javascript

This snippet will disable the submit button after the user clicks on it:

$('form').submit(function(){
    var $button = $('input[type=submit]', this);
    $button.attr('disabled', 'disabled');
    $button.attr('value', $button.attr('value') + "...");
});

For Ajax forms, you need to enable the button again in your code.

Highlighting page elements with jQuery and the jquery-color plugin

Tagged plugin, jquery, highlight, ajax  Languages javascript

This plugin is useful for making the user aware of changes to the page. It does this through an animated effect that changes the matching element's color to light yellow and then back to transparent.

You need the jquery-color plugin and the highlight plugin:

// http://github.com/jquery/jquery-color
(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.curCSS(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);

// Highlight plugin
(function($){  
  $.fn.highlight = function(color) {
    $(this).each(function(index) {
      // Use default color if no color is specified
      if(!color) {
        color = "#faff99";
      }
      var $this = $(this);
      // We restore the original color at the end
      var original = $this.css('background-color');
      $this.animate({ backgroundColor: color }, 500)
      $this.animate({ backgroundColor: original }, 500)
    });
  }
})(jQuery);

To use the plugin use the following code:

$("table tr:first").highlight();

This will highlight the first row in the table.

You can also specify a color:

$("table tr:first").highlight('#ccc');