Show Fancybox after form validation success

Question

Hi, I'm using jQuery+asp.net webforms, also I'm using jQuery Validation plugin and Fancybox plugin. My code works fine when I use the plugins separately. My webform is for user registration.

I use validation plugin to validate my form before it's submitted to the server, the form is validated and submitted when the user clicks an asp.net image button (which renders as an input type="image" html tag, ID="btnSave"). It already works as expected.

The fancybox plugin is used to display a pdf document which is generated dinamically on another webform. It works when the user clicks an anchor ("a" element, ID="btnShowFancybox").

I want to validate the form using the validation plugin when the user click the button btnShowFancybox, and if validation succes, show fancybox to display the pdf document. If validation fails, I want to show a message (alert) to the user. I've not been able to achieve this functionality.

This is what I've already coded:

HEAD:

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

FORM:

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

I need to implement validation of the form, after user clicks btnShowFancybox, if validation fails do not show the fancybox. I've tried this:

//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", "#");
            }
        });

I also tried to create a JS function and set onclick attribute of btnShowFancybox to call this function. the function validates the form and if it succeded tried jQuery("#btnShowFancybox").fancybox(..., but it didn't work neither. Just to clarify, btnSave should not show fancybox, only btnShowFancybox should.

Help required please...

Answer 1

Hi Madval,

There's quite a few answers to the this question that will provide you with the answers you need I think.

I solved the problem by adding an extra function to the 'onclientclick' property of a submit control and manually triggering the web form validation function.

An example of a submitted button would be:

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

My trigger validation function would look like the following:

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...'
        });
    }
}

I hope this helps. Dan.

Answer 2

Thank you Danny, I ended up using jQuery UI Dialog, when I get a chance will review your proposal. For the record I solved my problem as follows.

BODY:

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

Print button's Code behind:

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