如何在弹出窗口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();
}