I have a Ajax.Request in which I use onLoading and onComplete to show and hide a load animation gif. The problem is that every 10 clicks or so, the load animation fails to hide and just stays there animating even though the ajax request has returned successfully. I have a number of div elements that each has its own respective load animation and an onclick with the Ajax.Request that looks like this:

    <div id="word_block_<%= word_obj.word %>" class="word_block" >
    <%= image_tag("ajax-loader_word_block.gif", :id => "load_animation_#{word_obj.word}",
                    :style => 'display:none') %>
    <a href="#" onclick="new Ajax.Request('/test/ajax_load', 
     {asynchronous:true, evalScripts:true, 
      onLoading:function() {
        Element.show('load_animation_<%= word_obj.word %>')},
      onComplete:function(){
        Element.hide('load_animation_<%= word_obj.word %>')}}); 
        return false;">Click Here</a>  
    </div>

Does it look like anything could be wrong with this? Maybe I should try removing the inline onclick and add an onclick programmatically with javascript? I really have no idea why this keeps happening. I am using the prototype library with ruby on rails.