굉장한 여러 팝업 이상한 행동

Question

양식이있는 팝업 창이있는 여러 링크가있는 메뉴가 있습니다. 그것은 외모와 같은 :

<ul> 
    <li><a href="/hr/applications/edit/15">Редактировать анкету</a></li> 
    <li><a href="/Hr/PlaceUserInJobPopup?applicationId=15" class="magnific-form" type="inline">Трудоустроить</a></li> 
    <li><a href="/Hr/RefuseUserApplicationPopup?applicationId=15" class="magnific-form">Отказать</a></li> 
    <li><a href="/Hr/RenunciateUserApplicationPopup?applicationId=15" class="magnific-form">Отказался сам</a></li> 
</ul> 

팝업에 대한 나의 스크립트가 보이는 같은 :

$(document).ready(function() { 
    $('.magnific-form').magnificPopup({ 
     type: 'ajax', 
     closeOnContentClick: false, 
     closeBtnInside: true, 

     callbacks: { 
      settings: null, 
      parseAjax: function (mfpResponse) { 
       console.log('Ajax content loaded:', mfpResponse); 
      }, 
      ajaxContentAdded: function() { 
       console.log(this.content); 
      } 
     } 
    }); 
)}; 

그리고 내 눈에 거슬리지 확인 (그들은 모두 아무것도 특별 유사)와 양식 :

<div class="popUp-content"> 
<form method="post" id="magnific-form" action="/Hr/RefuseUserApplicationPopup">  <div class="section-header"> 
      <div class="title"> 
       <h3 class="semibold black"> 
        Отказать кандидату Высоцкая-Яблонович Анна Прохоровна 
        в должности Кассир 
       </h3> 
      </div> 
     </div> 
     <div class="form-block"> 
      <img src="http://localhost:56804/content/images/thumbs/0000033_140.jpeg" title="Высоцкая-Яблонович Анна Прохоровна" alt="Высоцкая-Яблонович Анна Прохоровна" class="over-hidden round border-green-14"> 
      <div class="form-block-field"> 
       <label title="" for="Comment">Причина</label> 
       <textarea rows="2" name="Comment" id="Comment" data-val-required="Введите комментарий" data-val="true" cols="20"></textarea> 
       <span data-valmsg-replace="true" data-valmsg-for="Comment" class="field-validation-valid"></span> 
      </div> 
     </div> 
     <input type="submit" value="Отказать" class="btn marg-top-20" name="save"> 
</form> 
</div> 

을 그리고 다음은 양식 onsubmit 처리기입니다.

$(document).delegate('form', 'submit', function (event) { 
    var $form = $(this); 
    var id = $form.attr('id'); 
    var _data = $form.serialize(); 
    var _type = $form.attr('method'); 
    var _url = $form.attr('action'); 

    if (id == 'magnific-form') { 
     event.preventDefault(); 

     $.ajax({ 
      data: _data, 
      type: _type, 
      url: _url, 
      success: function (response) { 
       refreshPopUpContent(response); 
      } 
     }); 
    } 

}); 

function refreshPopUpContent(response) { 
    var magnificPopup = $.magnificPopup.instance; 
    magnificPopup.items[0].type = "inline"; 
    magnificPopup.items[0].src = response; 
    magnificPopup.updateItemHTML(); 

} 

ModelState.IsValid == false 인 경우 제출 버튼을 클릭하면 양식 자체가 반환되고 AJAX를 통해 유효성 검사 오류가 반환됩니다. 네,하지만 메뉴의 첫 번째 팝업 링크에서만 작동합니다. 두 번째와 다른 모든 것은 POST 직후 컨트롤러에서 GET 메소드를 가져오고 확인할 유효성이 없습니다. 컨트롤러에서 볼 수있는 팝업의 내용을 대체합니다

function refreshPopUpContent(response) { 
    var container = $('.popUp-content'); 
    container.html(response); 
} 

이, 그리고 검증 메시지는 볼 수 있습니다 :

Answer 1

마지막으로, 나는에 refreshPopUpContent 방법을 변경했습니다.