IE8 Submit click HTML realtime update/refresh issue

IE8 Submit click HTML realtime update/refresh issue

Hi, I'm new to the forum and have signed up after a day of ripping out what little is left of my hair.

Basically, I have some relatively simple code that makes use of a sjax (rather than ajax) call (it has to be done this way because of an issue with an upstream provider).

On the surface it's a simple sign up form, the user clicks submit, a feedback div is filled with a message 'please wait', the sjax call is made and upon return the 'please wait' is replaced with a success or failure message.

The specific issue I'm getting is with the realtime population of the div that holds the 'please wait','error' and 'success' messages. It works flawlessly and as expected in Firefox & Opera, but refuses to update the screen in IE8, Safari & Chrome.

It is most likely that I'm missing something really obvious - but I can't seem to find it. The submit button is *not* named 'submit' (been bitten on that before), but is called 'subscribe'.

It throws no errors in IE's error console or with Opera or Firefox and, like I say, it works flawlessly in Firefox & Opera. It also submits and works in the other three browsers, but the feedback div does not update.

I've also tried working with 'replacewith' to remove the submit button and then put a spinner in place, but even that refuses to update in IE/Safari/Chrome.

Interestingly if I put an alert("break"); after:
  1. jQuery('#formupdatearea').html('CHECKING - PLEASE WAIT').show();
  2. alert("break");
The alert fires and the display updates in IE/Safari/Chrome and 'CHECKING - PLEASE WAIT' appears as expected.

I'm probably missing something really simple here, it's been a long week. Any feedback that would help fix this - or put me onto the right track - would be gratefully received.

Thanks for reading, Leslie.

HTML PART
  1. <form id="form" method="post" action="http://domain.null/finalscript.pl">
    <input type="text" id="email_name" name="name" class="email" value="Enter your first name" />
    <input id="subscribe" type="submit" name="subscribe" class="submit" value="" />
    <div id="formupdatearea" class="feedback"><!-- feedback goes in here --></div>
    </form>




JQUERY HANDLER
  1. jQuery("#subscribe").click(function() {
        jQuery('#formupdatearea').html('CHECKING - PLEASE WAIT').show();
        //DO BASIC FORM VERIFICATION HERE
        var failed_verify = subscribeForm();
        if(failed_verify==false) {
            //bail
            jQuery('#formupdatearea').html('').show();
            return false;
        }
       
        var url = "sjax_verify.php";
        //add a hidden field to form to signal dynamic submission
        jQuery('<input>').attr({
        type: 'hidden',
        id: 'ajax',
        name: 'ajax',
        value: '1'
        }).appendTo('form');
        //
        $.ajax({
            type: "POST",
            url: url,
            data: $("#form").serialize(),
            cache: false,
            async:   false,
            success: function(data, status) {
                if(data!='Success') {
                    jQuery('#formupdatearea').html("ERROR: "+data).show();
                    return false;
                }
                window.glob_config.passed=1;
            },
                error: function() {
                    jQuery('#formupdatearea').html('Something has gone wrong!').show();
                }
            });
            //
            if (window.glob_config.passed==0) {
                //the sync routine did not pass validation
                jQuery('#formupdatearea').html("VALIDATION ERROR").show();
                return false;
            }
        jQuery('#formupdatearea').html("SUCCESS").show();
    });