0

J'ai une boîte de dialogue Jquery UI qui apparaît pour confirmer la création d'un élément après avoir rempli un formulaire. J'ai le formulaire dans un panneau de mise à jour en raison des divers besoins du formulaire, et surtout parce que je veux que la validation soit faite sur le formulaire sans recharger la page.Force Postback du code derrière? Ou recharger JavaScript à partir d'une publication asynchrone?

JavaScript semble ne pas recharger sur une publication asynchrone. Cela signifie que lorsque le formulaire est un succès et que je change la variable 'formSubmitPass' en true, il n'est pas transmis au Javascript via <% = formSubmitPass%>. Si j'ajoute un déclencheur au bouton de soumission pour effectuer une publication complète, cela fonctionne. Cependant, je ne veux pas que le bouton de soumission fasse une publication complète, comme je l'ai dit, je peux donc valider le formulaire dans le panneau de mise à jour.

Comment puis-je avoir ceci pour que mon formulaire valide de manière asynchrone, mais mon javaScript rechargera correctement lorsque le formulaire est terminé avec succès et l'élément est enregistré dans la base de données?

Javascript:

var formSubmitPass = '<%= formSubmitPass %>'; 
var redirectUrl = '<%= redirectUrl %>'; 

function pageLoad() { 

    $('#formPassBox').dialog({ 
     autoOpen: false, 
     width: 400, 
     resizable: false, 
     modal: true, 
     draggable: false, 
     buttons: { 
      "Ok": function() { 
       window.location.href = redirectUrl; 
      } 
     }, 
     open: function(event, ui) { 
      $(".ui-dialog-titlebar-close").hide(); 
      var t = window.setTimeout("goToUrl()", 5000); 
     } 
    }); 

    if(formSubmitPass == 'True') 
    { 
     $('#formPassBox').dialog({ 
      autoOpen: true 
     }); 
    } 

Alors, comment puis-je forcer un postback à partir du code derrière, ou recharger le JavaScript sur un Asynchronous Postback, ou faire cela d'une manière qui fonctionne de telle sorte que je peux continuer à faire La validation de formulaire asynchrone?

Edit: je change formSubmitPass à la fin du code derrière:

If errorCount = 0 Then 
      formSubmitPass = True 
      upForm.Update() 
     Else 
      formSubmitPass = False 
     End If 

Ainsi, sur un postback complet, la valeur change.

Répondre

0

Je compris cela, ce qui a fonctionné pour moi est d'abord mettre le javascript dialogue dans le page_load d'avoir juste une propriété l'auto ouverte définie sur false comme ceci:

function pageLoad() { 

    $('#formPassBox').dialog({ 
     autoOpen: false 
    }); 
} 

créez ensuite une fonction totalement séparée comme ceci:

function formSubmitPass() { 
    $('#formPassBox').dialog({ 
     autoOpen: true, 
     width: 400, 
     resizable: false, 
     modal: true, 
     draggable: false, 
     buttons: { 
      "Ok": function() { 
       window.location.href = redirectUrl; 
      } 
     }, 
     open: function(event, ui) { 
      $(".ui-dialog-titlebar-close").hide(); 
      var t = window.setTimeout("goToUrl()", 10000); 
     } 
    }); 
} 

Ensuite, utilisez RegisterStartupScript comme indiqué par ces questions: Run javascript after form submission in update panel? et What is wrong with ScriptManager.RegisterStartupScript?

Mon code:

ScriptManager.RegisterStartupScript(Me, upForm.GetType(), "AutoPostBackScript", "formSubmitPass();", True) 

REMARQUE: Assurez-vous d'utiliser ScriptManager PAS ClientScript, également pour le second paramètre utilisé GetType() sur la panneau de mise à jour.

Au lieu d'utiliser un stringbuilder (Efficient Use of the ASP.NET RegisterStartupScript method) sur le code derrière, que je sentais trop compliqué à mettre javaScript sur le code derrière, je fais juste la fonction séparée et a appelé ce qui fonctionnait très bien

0

Vous ne savez pas exactement ce que vous essayez de faire. <%= formSubmitPass %> ne va certainement pas être réévalué car il s'agit d'une variable de serveur qui est définie uniquement lors du rechargement de la page. Même si vous exécutez à nouveau le javascript, la valeur ne changera pas.

Cependant, vous pouvez également passer un rappel succes à la méthode .dialog():

$('#formPassBox').dialog({ 
    // ... 
    success: function(){ 
    // do something, e.g. 
    $("#formPassBox").dialog({autoOpen:false}); 
    } 
}); 
+0

Voir mon édition: Cela change à la recharge de la page. Comme je l'ai dit, cela fonctionne si je n'ai pas de panneau de mise à jour, ou si je mets le déclencheur du bouton de soumission dans le panneau de mise à jour pour faire un fullpostback. La valeur change, et cela fonctionne. Mais je ne sais pas comment conserver mon bouton de soumission en effectuant une publication asynchrone (à des fins de validation de formulaire), tout en faisant redémarrer le code. Comment aurais-je le code derrière passer ce succès à l'extrémité avant? – SventoryMang

2

Je Ressemble plus le code html est remplacé par le panneau de mise à jour et vos sélecteurs jQuery ne sont pas être lié aux nouveaux éléments .

Essayez d'utiliser .Live pour tous vos événements, ou reconsolidation après une mise à jour ajax (vous pouvez utiliser UpdatePanel plug-in pour cela)

+0

Non sûr que ce n'est pas non plus, j'ai d'autres boîtes de dialogue qui sont déclenchées en cliquant sur les liens (dans le panneau de mise à jour), et quand je fais une publication asynchrone, les boîtes de dialogue sont toujours liées. Si les boîtes de dialogue n'étaient pas liées aux sélecteurs, les sélecteurs div seraient visibles sur la page, mais ils sont toujours invisibles. – SventoryMang

+0

Le .live au lieu de .bind dans ma situation a fonctionné. Merci. – Tebo

Questions connexes