Question

I have a bunch of <a>s on a html page, each associated with a form and want to display a ‘loading’ image while the form itself sumbits (which seems to take ages, but maybe this is another matter).

So I did something a bit hackish in the onclick event of those as

frmContent = $ ( this ).nextAll ( "form" ).clone ();
$ ( "body" ).html ( "<div class='preload'><img src='./img/loading.gif' /><br/>Caricamento in corso<\/div>" );
$ ( "body" ).append(frmContent);
frmContent.submit ();

This seems works on both Firefox and IE9. The problem is when compatiblity mode is enabled, this doesn’t work.

I also thought about using something different when the browser is recognized as IE7, like this:

if ( $.browser.version != "7.0" ) {
    frmContent = $ ( this ).nextAll ( "form" ).clone ();
    $ ( "body" ).html ( "<div class='preload'><img src='./img/loading.gif' /><br/>Caricamento in corso<\/div>" );
    $ ( "body" ).append(frmContent);
    frmContent.submit ();
} else {
    $ ( this ).nextAll ( "form" ).submit ();
}

So the preload animation isn’t shown, but this defeats the purpose.

Since I can’t force my users to turn off compatibility mode and since this page must also work in IE7, what’s wrong with that snippet? Is there a better way to do that.

Answer 1

Append form to a body before you submit it.

frmContent = $ ( this ).nextAll ( "form" ).clone ();
    $ ( "body" ).html ( "<div class='preload'><img src='./img/loading.gif' /><br/>Caricamento in corso<\/div>" );
    frmContent.hide();
    $ ( "body" ).append(frmContent);
    frmContent.submit ();

Like a workaround. I see no reason to replace all body HTML with preload div and clone a form. You can simply hide everything before submit and append preload div:

    $ ( "body" ).children().hide();
    $ ( "body" ).append( $("<div class='preload'><img src='./img/loading.gif' /><br/>Caricamento in corso<\/div>") );
    $ ( this ).nextAll ("form").submit();