팝업 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> 

다음으로 아약스 성공 함수에서 양식을 숨기고 메시지를 표시하려면이 작업을 수행하십시오.

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

오류 메시지는 좀 더 까다 롭습니다. 오류 메시지를 설정 열려 아약스 오차 함수에 다음

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

을하고이 같은 대화여 : 먼저 이런 식으로 오류 메시지 사업부를 변경할 제 생각에는

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