Show a Loader div when using Jquery Dialog with $post

Question

Its a simple task, showing a loader.gif but somehow this code snippet works only in firefox and fails in rest of the browsers.

What I want to achieve is when user clicks on Send Email button, they should see a loader gif image. The loader gif image is part of a div whose id is validate.

I have invested around 8 hours in this and tried tested all alternatives like $ajaxsetup,$ajaxsend,$ajaxstart etc, but none worked for me.

A simple example which works on popular browsers is what I need

Here's my code

 $j("#dialog-form").dialog({
                autoOpen: false,
                height: 435,
                width: 400,
                modal: true,
                buttons: {
                    "Send Email": function() {

            $j("#validate").show();
            setTimeout(ProcessRequest(),5000);


                        }
                    },
                    Cancel: function() {
                        $j(this).dialog("close");
                    }
                },
                close: function() {
                    allFields.val("").removeClass("ui-state-error");
                }

function ProcessRequest()
            {

                            var jqxhr = $j.post(
                                   "posturl.aspx",
                                   { name: name.val(), email: email.val(), phone: phone.val(), date: date.val() },

                           function(data) {
                                result=data;
                           }).success(function() { OnSuccess(); })
                             .error(function() { OnError(); });

                            jqxhr.success(function() { OnSuccess(); });
                            jqxhr.error(function() { OnError(); });

            }

        <div id="validate" style="display:none">
               <img src='trns_loader.gif' /> Your Order is being processed
 </div>

Answer 1

The way that I use a loader.gif is extremely low tech and works fantastic.

I put the loader.gif as the background of the main div, with a position of center center.

Then any content that's loaded, I make the background white.

This way, the loader shows until the content is appended to the dialog.

Works great in all browsers.