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

Question

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

Я использую плагин проверки для проверки моей формы перед ее отправкой на сервер, форма проверяется и отправляется, когда пользователь нажимает кнопку изображения asp.net (которая отображается как HTML-тег input type = "image", ID = "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

Спасибо, Дэнни, я в конечном итоге использовал 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);

Answer 2

Существует довольно много ответов на этот вопрос , который даст вам ответы, которые вам нужны, я думаю.

Я решил проблему, добавив дополнительную функцию в '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...'
        });
    }
}

Надеюсь, это поможет.Dan.