Показать Fancybox после успешной проверки формы

Question

Я использую jQuery + asp.net webforms, также я использую плагин JQuery Validation и плагин Fancybox. Мой код отлично работает, когда я использую плагины отдельно. Моя веб-форма предназначена для регистрации пользователей.

Я использую плагин проверки для проверки формы перед отправкой на сервер, форма проверяется и отправляется, когда пользователь нажимает кнопку изображения asp.net (которая отображается как тег ввода = «образ» html-тег, идентификатор = "btnSave"). Он работает так, как ожидалось.

Плагин fancybox используется для отображения PDF-документа, который генерируется динамически на другой веб-форме. Он работает, когда пользователь нажимает на якорь (элемент «a», ID = «btnShowFancybox»).

Я хочу проверить форму, используя плагин проверки, когда пользователь нажимает кнопку btnShowFancybox, и если результаты проверки правильны, покажите fancybox для отображения pdf-документа. Если проверка не завершена, я хочу показать пользователю сообщение (предупреждение). Я не смог достичь этой функциональности.

Это то, что я уже закодированы:

ГОЛОВА:

<script type="text/javascript"> 
     jQuery(document).ready(function() { 
     jQuery("#aspnetForm").validate({ 
      //commented for simplicity 
     }); 
     }); 
    </script> 
</head> 

ФОРМА:

<asp:ImageButton ID="btnSave" runat="server" ImageUrl="~/content/img/save.png" 
    OnClick="btnSave_Click" 
    OnClientClick="return jQuery('#aspnetForm').validate().form();" /> 

<a id="btnShowFancybox" class="iframe" href="generatePDF.aspx"> 
    <img src="content/img/showPDF.png" /> 
</a> 

мне нужно осуществить проверку формы, после того, как пользователь клики btnShowFancybox, если проверка не завершена, не отображается fancybox. Я попытался это:

//changed href attribute of btnShowFancybox to "#", and inserted this code 
//after: jQuery(document).ready(function() { 
//and before: jQuery("#aspnetForm").validate({ 
//what I'm trying to do here is to set the proper href only if form is valid, 
//then to call my fancybox to show pdf to the user, because the call to .fancybox didn't work I tried trigger the click event directly. and.. didn't work. 
jQuery("#btnShowFancybox").click(function (e) { 
      var validForm = jQuery('#aspnetForm').validate().form(); 
      alert(validForm); 
      if(validForm) { 
       jQuery("#btnShowFancybox").attr("href", "generatePDF.aspx"); 
       jQuery("#btnShowFancybox").fancybox({ 
        'frameWidth' : 1000, 
        'frameHeight': 700, 
        'overlayShow': true, 
        'hideOnContentClick': false 
       }); 
       jQuery("#btnShowFancybox").fancybox().trigger('click'); 
      } 
      else { 
       alert("form is not valid"); 
       jQuery("#btnShowFancybox").attr("href", "#"); 
      } 
     }); 

Я также пытался создать функцию JS и установить OnClick атрибут btnShowFancybox для вызова этой функции. функция проверяет форму и, если она претерпела попытку jQuery («# btnShowFancybox»). fancybox (..., но это не сработало ни с одной. Чтобы уточнить, btnSave не должен показывать fancybox, только btnShowFancybox должен.

Помощь требуется пожалуйста ...

Answer 1

Там довольно мало ответов на this question, что даст вам ответы вам нужно, я думаю.

Я решил эту проблему путем добавления дополнительной функции к «OnClientClick» свойства контроль отправки и ручное инициирование функции проверки веб-формы.

Пример, представленный кнопки будет:

<asp:button id="btnSearch" runat="server" text="Search" validationgroup="SearchForm" onclientclick="javascript: TriggerValiation();" causesvalidation="true" onclick="btnSearch_OnClick" /> 

Моя функция проверки запуска будет выглядеть следующим образом:

function TriggerValiation() 
{ 
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("<%= btnSearch.ClientID %>", "", true, "SearchForm", "", false, false)); 
    if (Page_IsValid) 
    { 
     $.fancybox 
     ({ 
      'titleShow': false, 
      'transitionIn': 'fade', 
      'transitionOut': 'fade', 
      'showCloseButton': false, 
      'content': 'Searching...' 
     }); 
    } 
} 

Я надеюсь, что это помогает. Дэн.

Answer 2

Спасибо, Дэнни, я закончил с помощью jQuery UI Dialog, когда у меня появится шанс рассмотреть ваше предложение. Для записи я решил свою проблему следующим образом.

ТЕЛО:

<div id="printDialog" title="Printed record"> 
    <div id="iframeContainer" style="width: 100%; height: 95%;"> 
    </div> 
</div> 

Распечатать кнопки Код позади:

string js= @" 
jQuery(function() { 
    jQuery(""#iframeContainer"").html(""<iframe src='Print.aspx' width='100%' height='100%'></iframe>""); 
    var dlg = jQuery('#printDialog').dialog({ show: 'fold', hide: 'blind', width: '85%', height: 450, minHeight: 400, minwidth: 700, modal: true, autoOpen: false, zIndex: 9998 }); 
    dlg.parent().appendTo(jQuery('form:first')); 
    jQuery('#printDialog').dialog('open'); 
}); 
"; 
ScriptManager.RegisterStartupScript(this, typeof(Page), "showDialog", js, true);