表单验证成功后显示Fancybox

我正在使用jQuery + asp.net webforms，我也使用jQuery验证插件和Fancybox插件。当我单独使用插件时，我的代码工作正常。我的webform是用于用户注册的。表单验证成功后显示Fancybox

我使用验证插件来验证我的表单在提交给服务器之前验证表单，当用户单击一个asp.net图像按钮（呈现为输入类型=“图像”html标记，ID = “btnSave”）。它已按预期工作。

fancybox插件用于显示在另一个web窗体上以dinam生成的pdf文档。它在用户点击锚点（“a”元素，ID =“btnShowFancybox”）时起作用。

我想在用户单击按钮btnShowFancybox时使用验证插件验证表单，如果验证成功，请显示fancybox以显示pdf文档。如果验证失败，我想向用户显示一条消息（警报）。我无法实现此功能。

这是我已经编码：

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>

我需要实现形式的验证，之后用户点击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函数并设置btnShowFancybox的onclick属性来调用这个函数。该功能验证表单，如果它试图成功尝试jQuery（“＃btnShowFancybox”）。fancybox（...，但它并不工作。只是为了澄清，btnSave不应该显示fancybox，只有btnShowFancybox应该。

帮助需要请...

来源

2010-05-12 madval

没有人有任何想法？ – madval 2010-05-13 19:50:21

有相当多的答案，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...' 
     }); 
    } 
}

我希望这有助于。 Dan。

来源

2010-05-21 16:42:40

谢谢Danny，我结束了使用jQuery UI对话框，当我有机会将审查您的建议。为了记录，我解决了我的问题，如下所示。

BODY：

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

来源

2010-05-25 20:21:52 madval

表单验证成功后显示Fancybox

回答

相关问题