2014-07-25 54 views
1

我有一个菜单,其中有几个链接到窗体弹出窗口。它看起来像:Magnific多弹出奇怪的行为

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

而且这里是表格提交处理程序:

$(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方法,并且没有验证可见。

回答

1

最后,我已经改变了refreshPopUpContent方法:

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

这将取代弹出的来自控制器视图中的内容,并验证消息是可见的。