How to retain the existing html after the JQuery ajaxComplete html change
<p>I am using JQuery</p>

<p>I have got below <strong>JQuery Code:</strong></p>

<pre><code> //Submitting the form
$("#loginDetails &gt; form").submit(function()
{  
    //Hiding the Login button
    $("#loginButton").hide();

    //Showing the ajax loading image
    $("#ajaxloading").show();

    // 'this' refers to the current submitted form  
    var str = $(this).serialize();   
    // -- Start AJAX Call --

    $.ajax({  
        type: "POST",
        url: "Login.aspx",  // Send the login info to this page
        data: str,  
        success: function(result)
        {  

            $("#loginDetails").ajaxComplete(function(event, request, settings)
            {  

             // Show 'Submit' Button
            $('#loginButton').show();

            // Hide Gif Spinning Rotator
            $('#ajaxloading').hide();  

            var arr = result.split(",");
            var fname = arr[0];
            var lname = arr[1];
            var activeCardNo = arr[2];
            var multipleTier = arr[3];
            var activeStatus = arr[4];
            var access = arr[5];

             if(access!='') // LOGIN OK?
             { 
                var login_response = '&lt;div id="logged_in"&gt;' +
                 '&lt;div style="width: 350px; float: left; margin-left: 80px;"&gt;' + 
                 '&lt;div style="width: 40px; float: left;"&gt;' +
                 '&lt;img style="margin: 22px 0px 10px 0px;" align="absmiddle" src="system/images/ajax-loader.gif"&gt;' +
                 '&lt;/div&gt;' +
                 '&lt;div style="margin: 24px 0px 0px 10px; float: right; width: 300px;"&gt;'+ 
                 "You are successfully logged in! &lt;br /&gt; Please wait while you're redirected...&lt;/div&gt;&lt;/div&gt;";  

                $('#loginButton').hide();
                $('#closeBtn').hide();
                $('#divMember').text(fname +' '+ lname);
                $('#spnSkywardsNo').text(activeCardNo);
                $('#spnTierStatus').text(multipleTier);
                $("#ui-dialog-title-skywardsLogin").text("Please wait...");
                $(this).html(login_response); // Refers to 'status'

                // After 3 seconds redirect the 
                setTimeout(closeDialog, 3000); 
             }  
             else // ERROR?
             {  
                 var login_response = result;
                 $('.validateTips').html(login_response);
             }


     });  

     }  

    });  

    // -- End AJAX Call --

    return false; 
});         



//Login Button Clicked
$('#loginButton').click(function()
{
    var bValid = true;
    bValid = bValid &amp;&amp; checkLength( skywardNo, "Skyward No", 3, 16 );
    bValid = bValid &amp;&amp; checkLength( password, "password", 5, 16 );

    if ( bValid ) 
    {      
       $("#loginDetails &gt; form").submit();
        allFields.val("");
        tips.text("");
    }
});
</code></pre>

<p>In above JQuery Code I am calling dailog modal popup on the click event of <strong>#loginButton</strong> button, and after all validations my form is submitted, in my ajaxComplete request above I am updating my existing html of the form with <strong>"login_response"</strong> html.</p>

<pre><code>&lt;div class="formContainer" id="loginDetails"&gt;
                &lt;form action="#" id="frmLogin" class="homeWidget"&gt;
                    &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
                        &lt;tr&gt;
                            &lt;td class="formLabel" width="100"&gt;
                                &lt;label for="skywardsNumber" title="Skywards Number"&gt;
                                    Skywards Number&lt;/label&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;input class="formField" id="skywardsNumber" name="skywardsNumber" size="25" type="text" /&gt;&lt;/td&gt;
                            &lt;td class="formLink"&gt;
                                &lt;a class="iconHelpBox" href="#"&gt;Forgot number&lt;/a&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td class="formLabel"&gt;
                                &lt;label for="password"&gt;
                                    Password&lt;/label&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;input class="formField" id="password" name="password" size="25" type="password" /&gt;&lt;/td&gt;
                            &lt;td class="formLink"&gt;
                                &lt;a class="iconHelpBox" href="#"&gt;Forgot password&lt;/a&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/table&gt;
                &lt;/form&gt;
            &lt;/div&gt;
</code></pre>

<p><strong>Above HTML Code is replaced with below HTML code</strong></p>

<pre><code>var login_response = '&lt;div id="logged_in"&gt;' +
                     '&lt;div style="width: 350px; float: left; margin-left: 80px;"&gt;' + 
                     '&lt;div style="width: 40px; float: left;"&gt;' +
                     '&lt;img style="margin: 22px 0px 10px 0px;" align="absmiddle" src="system/images/ajax-loader.gif"&gt;' +
                     '&lt;/div&gt;' +
                     '&lt;div style="margin: 24px 0px 0px 10px; float: right; width: 300px;"&gt;'+ 
                     "You are successfully logged in! &lt;br /&gt; Please wait while you're redirected...&lt;/div&gt;&lt;/div&gt;"; 
</code></pre>

<p>Now everything works fine first time when I click login link, but after all above JQuery activity when I click second time login link same update html is coming.</p>

<p>Please suggest!</p>
