How to display error message in popup jquery

Question

How to display error message in popup and if success message comes hide all the form fields and show success message.

Presently i am doing like this: Placing a success message above the form and closing it after the form close. error message div placing above the form ie inside the success div. Please suggest me the best way. Give some sample code so that i can implement this.

my html code:

<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 Code:

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

First, don't wrap your form inside the success div, keep it separate like this:

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

Next, in the ajax success function just do this to hide the form and display message:

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

For the error message it is a little bit trickier. First change the error message div to something like this:

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

Then in the ajax error function open set the error message and open the dialog like this:

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