如何在彈出窗口中顯示錯誤消息jquery

Question

如何在彈出窗口中顯示錯誤消息，並且如果成功消息隱藏所有表單字段並顯示成功消息。

目前我正在這樣做： 在窗體上方放置成功消息並在窗體關閉後關閉它。 錯誤消息div放置在窗體的上方，即在成功div內。請建議我最好的方法。給一些示例代碼，以便我可以實現這一點。

我的html代碼：

<div id="successMessage"> 
<form method="POST" id="update_form" onsubmit = "return false;"> 
    <div id="errorMessage"></div> 
    <table align="center"> 
     <tr> 
      <td align="right">First Name:</td> 
      <td align="left"><input type="text" name="firstName" value="<?php echo $firstName; ?>" /> 
      </td> 
     </tr> 
     <tr> 
      <td align="right">Last Name:</td> 
      <td align="left"><input type="text" name="lastName" value="<?php echo $lastName; ?>" /> 
      </td> 
     </tr> 
     <tr> 
      <td align="right" colspan="2"> 
        <input type="hidden" name="userId" value="<?php echo $userId; ?>" /> 
        <input type="button" name="updateUserDetails" value="Update" onclick="updateUserDetails();"> 
      </td> 
     </tr> 
    </table> 
</form> 
</div> 

jQuery代碼：

function editUserDetails(userId, operation){ 
    currentOperation = operation; 
    $('#editUserDetails').dialog('open'); 
    $('#editUserDetails').html("Loading..."); 
    $.ajax({ 
      type: "POST", 
      url: "editUserDetails.php?userId="+userId,     
      data: "", 
      success: function(msg){ 
       $('#editUserDetails').html(msg); 
      }, 
      error:function(msg){ 
       //alert(msg); 
       $('#editUserDetails').dialog("close"); 
      } 
    }); 
} 

function updateUserDetails(){ 
     $.ajax({ 
       type: "POST", 
       url: "updateUserDetails.php",     
       data: $("#update_form").serialize(), 
       success: function(msg){ 
        if(msg=="Updated Successfully") 
        { 
         $('#successMessage').html(msg); 
        } 
        else 
        { 
         $('#errorMessage').html(msg); 
        } 
       }, 
       error:function(msg){ 
        $('#editUserDetails').dialog("close"); 
       }    
     }); 
    }); 
}); 

Answer 1

首先，不裹成功DIV中的形式，把它分開這樣的：

<div id="successMessage"></div> 

接下來，在ajax成功函數中，只需執行以隱藏窗體並顯示消息：

success: function(msg){ 
     if(msg=="Updated Successfully") 
     { 
      $("#successMessage").html(msg); 
      $("#update_form").hide(); 
     } 
     else 
     { 
      $("#errorMessage").html(msg); 
      $("#errorMessageDialog").dialog(); 
     } 
} 

對於錯誤消息，它有點棘手。首先，錯誤信息的div改變這樣的事情：

<div style="display: none;" id="errorMessageDialog"> 
<p id="errorMessage"></p> 
</div> 

然後在阿賈克斯誤差函數開集的錯誤消息，打開這樣的對話：

error:function(msg){ 
     $("#errorMessage").html(msg); 
     $("#errorMessageDialog").dialog(); 
}