如何JQuery的ajaxComplete HTML變化

Question

我使用JQuery

我有以下jQuery代碼後保留現有的HTML：

//Submitting the form 
$("#loginDetails > 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 = '<div id="logged_in">' + 
       '<div style="width: 350px; float: left; margin-left: 80px;">' + 
       '<div style="width: 40px; float: left;">' + 
       '<img style="margin: 22px 0px 10px 0px;" align="absmiddle" src="system/images/ajax-loader.gif">' + 
       '</div>' + 
       '<div style="margin: 24px 0px 0px 10px; float: right; width: 300px;">'+ 
       "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>"; 

       $('#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 && checkLength(skywardNo, "Skyward No", 3, 16); 
    bValid = bValid && checkLength(password, "password", 5, 16); 

    if (bValid) 
    {  
     $("#loginDetails > form").submit(); 
     allFields.val(""); 
     tips.text(""); 
    } 
}); 

在上面的jQuery代碼我呼籲dailog模式彈出點擊事件#loginButton按鈕，並在所有驗證我的表單提交後，在我上面的ajaxComplete請求中，我正在更新我現有的表單的「login_response」 html。

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

以上HTML代碼如下HTML代碼替換

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

現在一切正常第一次，當我點擊登錄鏈接，但畢竟上述JQuery的活動時，我點擊第二次登錄鏈接相同的更新html即將到來。

請建議！

Answer 1

好了，一些快速提示對於初學者（糾正我，如果我錯了，在任何情況下！）：

• 商店引用您經常使用的DOM元素，如$("ajaxLoading")，變量。否則，每次需要時，jQuery將不得不搜索整個文檔中的這個節點。例如：var $ajaxLoading = $("#ajaxLoading");
• 驗證內部submit()函數的形式，因爲你不能肯定的是，形式是通過點擊提交按鈕提交。例如，用戶可以選擇按鈕並按下回車鍵（可能會觸發click事件 - 不確定），或者在發送完一個表單後刷新頁面。如果提供的表單數據無效，則返回false，從而阻止提交表單。

關於你的問題，我認爲你不需要使用.ajaxComplete()。嘗試做類似：

$("#loadingDetails > form").submit(function(){ 

    // Show/hide, validate etc. 
    // ... 

    $.post("Login.aspx", serializedFormStr, function(result){ 

     // Build output from result string 
     // ... 
    }); 
}; 

Answer 2

我真的不知道我理解你的問題的說明。不過，我確實注意到一兩件事：

  $(this).html(login_response); // Refers to 'status' 

在「成功」回調，我不知道這this將把任何有用的東西。我不知道新的HTML內容應該放在哪裏，但是您可以嘗試使用明確的選擇器，而不是在該行上的this。

具體而言，「成功」回調裏面，this不會指向形式 - 它可能會成爲窗口對象。您應該可以將$(this)引用保存在變量中，然後在成功回調代碼中使用該變量。