如何在彈出窗口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>

然后在ajax錯誤函數中打開設置錯誤信息並打開如下對話框：

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