+ Start a Discussion
mike_merinomike_merino 

javascript button animated gif

in a custom javascript button, I have an animated gif (ajax-loader.gif
A colleague wrote this js file for me (AnimatedShowHide.js)
==========================
var j$ = jQuery.noConflict();

var AnimatedImageAppender = (function () {

    var imgId = "img_" + Date.now();

    return {

        ImagePath: 'foo',

  AddAnimation: function () {
            var top = j$(window).height() / 2 - 50;
            var left = j$(window).width() / 2 - 50;
            var positionPart = "position: absolute; top:" + top + "px; left: " + left + "px;";
            var image = j$("<img style='display:block; " + positionPart + "' id='" + imgId + "' src='" + this.ImagePath + "'/>").appendTo(document.body);
        },


        RemoveAnimation: function () {
            var selector = "#" + imgId;
            j$(selector).remove();
        }
    };

}());
=================
I added both to my static resources as private resources

here is my button code (I want to show the animated gif while the apex convert class is running and hide it on completion)
====================
{!REQUIRESCRIPT("/soap/ajax/23.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/23.0/apex.js")}
{!REQUIRESCRIPT("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")}
{!REQUIRESCRIPT("/resource/AnimationShowHide")}

try{

AnimatedImageAppender.ImagePath = "https://www.berneckers.com/images/ajax-loader2.gif";
AnimatedImageAppender.AddAnimation();

var newurl= sforce.apex.execute("ConvertLead", "doConvert",{leadID : "{!Lead.Id}"});

AnimatedImageAppender.RemoveAnimation();

newurl1 = String(newurl);
if(newurl1.indexOf('error')>-1 )
  {
    alert(newurl);
    document.location.reload(true);
  }
else
  {
     parent.location.href = newurl;  // at completion, refresh to Opportunity page
  }
}
}
catch(err) {
   txt="There was an error on this page.\n\n";
   txt+="Error description: " + err.description + "\n\n";
   txt+="Click OK to continue.\n\n";
   alert(txt);
   document.location.reload(true);
}
============
when I click the button, the class completes successfully but I see no gif indicating "in progress"

help please
bob_buzzardbob_buzzard
When I try to access the image source:

https://www.berneckers.com/images/ajax-loader2.gif

I get a 404 error that it is not available, so I'd expect that to be the problem.
mike_merinomike_merino
Thanks!

I took out this line from the button
and in the  AnimatedShowHide.js commented out the ImagePath variable
an ajax-loader.gif that I downloaded (and looks lovely) I put in static resources as a private image/gif mime type

but when I click the button, the class executes and completes successfully, but I see no in progress animated icon.

an ajthe  
bob_buzzardbob_buzzard
Do you see any javascript errors in the console?
mike_merinomike_merino
I am using chrome Version 36.0.1985.125 m And in the console just got 3 errors: Refused to set unsafe header: “User-Agent” 3 times