Spinner graphic not displaying correctly in jQuery UI dialog

Question

I was trying to display a jQuery UI dialog with a spinner GIF inside it. Originally the GIF coded statically in HTML:

<div id="LoadingDiv" style="display:none; text-align: center">
    <img alt="Loading..." src='/Content/images/ajax-loader.gif' />
</div>

However there were known issues in IE that prevent GIF images to be animated correctly in a jQuery UI dialog. So I have resorted to dynamically append a img element to the div element:

$("#FilterForm").submit(function (){
    $("#LoadingDiv").html($("<img>").attr({ 
        'id':'spinner', 
        'alt':'Loading...',
        'src': '@Url.Content("~/Content/images/ajax-loader.gif")'
    }));
    $("#LoadingDiv").dialog("open");
});

This created some strange bugs to the system. When the form is submitted, sometimes the GIF is displayed and sometimes it isn't. Can somebody help?

score 0 · Accepted Answer · answered Dec 21 '12 at 03:27

Solved by implementing a workaround using Spin.js. No GIF needed and better cross-browser compatibility.

The code:

$("#FilterForm").submit(function (){
    var opts = {
        top: '10px',
        left: '50px',
        length: 2,
        width: 3,
        radius: 7
    };
    var loadingDiv = document.getElementById("LoadingDiv");
    var spinner = new Spinner(opts).spin(loadingDiv);

    $("#LoadingDiv").dialog("open");
});

Spinner graphic not displaying correctly in jQuery UI dialog

1 Answers1