Как отобразить сообщение об ошибке во всплывающем окне jQuery

Question

Как отображать сообщение об ошибке во всплывающем окне, и если сообщение об успешном завершении работы скрывает все поля формы и выводит сообщение об успешном завершении.

В настоящее время я делаю так: Размещение сообщения об успешном завершении над формой и закрытии его после закрытия формы. сообщение об ошибке div, размещающее над формой i.e внутри успешного 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(); 
}