如何在弹出窗口中显示错误消息jquery

如何在弹出窗口中显示错误消息，并且如果成功消息隐藏所有表单字段并显示成功消息。如何在弹出窗口中显示错误消息jquery

目前我正在这样做：在窗体上方放置成功消息并在窗体关闭后关闭它。错误消息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"); 
       }    
     }); 
    }); 
});

来源

2012-03-20 vvr

在我看来，你应该单独形式和消息，所以消息的布局是独立于形式的。（IE。你稍后想要一些奇妙的警告框样式或使用验证插件）。伟大的结构，不要限制元素。 – 2012-03-20 07:17:02

首先，不裹成功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(); 
}

来源

2012-03-20 07:13:54 c0deNinja

仍然同样的问题显示在表单字段上方的成功消息它不隐藏表单元素。 – vvr 2012-03-20 07:50:47

发布您的新的更新代码 – c0deNinja 2012-03-20 16:50:32

如何在弹出窗口中显示错误消息jquery

回答

相关问题