CODEWITHSUNDEEP
jquerycross-browserinternet-explorer-9
emersonthis
emersonthis

Reputation: 33378

AJAX form only works once in IE9

I'm writing a simple script that submits the registration form to my site via ajax. It works perfectly in modern browsers. In IE9 the form only submits properly once. Then if I try to submit the same form again, the second time the form never returns and the loader gif remains permanently. Any idea why this is happening?

EDIT: I should have pointed out that I'm using this jquery form plugin to submit the form. Secondly, when I inspect the source after submitting the form, the correct markup is there. I can manually add opacity styles to reveal the form, so I think this suggests the problem is connected to IE9 and the jquery fade functions. 

    <script type="text/javascript">

    jQuery.fn.outerHTML = function(s) {
    return (s)
      ? this.before(s).remove()
      : jQuery("<p>").append(this.eq(0).clone()).html();
    }

    jQuery(document).ready(function($){

        $("form input").removeAttr('tabindex');

        ajaxregister = function(e) {
            e.preventDefault();
            $(this).fadeTo(500, 0);
            $(this).siblings("#loading").fadeIn();
            $(this).ajaxSubmit({
                //url:'http://streetofwalls.dev/wp-login.php?action=register'
                success: function( data ) {
                    //console.log(data);

                    var $message = $(data).find('.message').outerHTML();
                    var $error = $(data).find('#login_error').outerHTML();
                    var $form = $(data).find('#registerform').outerHTML();
                    console.log( 'success' );

                    $(e.target).html( ( ($error) ? $error : $message ) + $form ).fadeTo(500,1);
                    $(e.target).siblings("#loading").fadeOut();

                }
            });
        }

        $(".widget_reg_widg #registerform").submit( ajaxregister );
    });
    </script>

Upvotes: 0

Views: 404

Answers (3)

emersonthis
emersonthis

Reputation: 33378

I got this to work by replacing the e.target with jquery selectors. See the last few lines of the success: function() {...

                success: function( data ) {

                    var $message = $(data).find('.message').outerHTML();
                    var $error = $(data).find('#login_error').outerHTML();
                    var $form = $(data).find('#registerform').outerHTML();

                    var target_id = $(e.target).attr("id");
                    $("#"+target_id).html( ( ($error) ? $error : $message ) + $form ).animate({opacity:1}, 500);
                    $("#"+target_id).css('display', 'block');

                    $("#"+target_id).siblings("#loading").css('display', 'none');

                }

Not sure why that worked. It must have something to do with the way IE9 references the event.

Upvotes: 0

Leandro Barreto
Leandro Barreto

Reputation: 361

In some IE browsers, you must redifine the event variable: 

ajaxregister = function(e) {
        e = e || window.event;
        e.preventDefault();
...
}

Upvotes: 1

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14282

use cache:false in your jquery code.

Example :

$(this).ajaxSubmit({
    cache : false,
    //existing code
});

Upvotes: 0

Related Questions