Afficher Fancybox après validation du formulaire succès

Question

J'utilise jQuery + asp.net webforms, j'utilise aussi le plugin jQuery Validation et le plugin Fancybox. Mon code fonctionne correctement lorsque j'utilise les plugins séparément. Mon formulaire Web est destiné à l'enregistrement des utilisateurs. J'utilise un plugin de validation pour valider mon formulaire avant qu'il ne soit soumis au serveur, le formulaire est validé et soumis lorsque l'utilisateur clique sur un bouton d'image asp.net (qui traduit comme une entrée type = "image" tag html, ID = "btnSave"). Cela fonctionne déjà comme prévu.

Le plugin fancybox est utilisé pour afficher un document pdf généré de manière dynamique sur un autre formulaire Web. Il fonctionne lorsque l'utilisateur clique sur une ancre (élément "a", ID = "btnShowFancybox").

Je souhaite valider le formulaire en utilisant le plugin de validation lorsque l'utilisateur clique sur le bouton btnShowFancybox, et si la validation réussit, affiche fancybox pour afficher le document pdf. Si la validation échoue, je veux afficher un message (alerte) à l'utilisateur. Je n'ai pas réussi à atteindre cette fonctionnalité.

C'est ce que je l'ai déjà codé:

TETE:

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

FORMULAIRE:

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

Je dois mettre en œuvre la validation du formulaire, après que l'utilisateur clique sur btnShowFancybox, si la validation échoue, n'affiche pas la fancybox. Je l'ai essayé ceci:

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

J'ai essayé aussi de créer une fonction JS et définir l'attribut onclick de btnShowFancybox pour appeler cette fonction. la fonction valide le formulaire et si elle a réussi jQuery essayé ("# btnShowFancybox"). fancybox (..., mais cela n'a pas fonctionné non plus.Pour clarifier, btnSave ne devrait pas montrer fancybox, seulement btnShowFancybox devrait. Aide nécessaire ... s'il vous plaît

Answer 1

Il y a assez peu de réponses à la this question qui vous fournira les réponses dont vous avez besoin, je pense.

J'ai résolu le problème en ajoutant une fonction supplémentaire à la propriété « OnClientClick » de un contrôle de soumission et le déclenchement manuel de la fonction de validation de formulaire Web. Un exemple d'un bouton soumis serait:

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

Ma fonction de validation de déclenchement ressemblerait à ce qui suit:

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

J'espère que cela aide. Dan.

Answer 2

Merci Danny, j'ai fini par utiliser jQuery UI Dialog, quand j'aurai l'occasion d'examiner votre proposition. Pour le compte rendu, j'ai résolu mon problème comme suit.

CORPS:

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

bouton Imprimer Code de derrière:

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