jQuery confirme la boîte de dialogue sur plusieurs formulaires

J'ai quelques formulaires sur la même page et je veux ajouter une boîte de dialogue de confirmation à tous en utilisant le même code. Ils ont tous une classe de confirmation-forme et le titre de la boîte de dialogue de confirmation doit être généré dynamiquement (ce qui ne fonctionne pas atm).jQuery confirme la boîte de dialogue sur plusieurs formulaires

Dans le HTML j'ai la boîte de dialogue qui se cache lorsque la page se charge, il est affiché une fois que la fonction dialog('open') est appelée.

C'est ce que j'ai maintenant et ça ne fonctionne pas du tout, les charges de dialogue, mais une fois que vous appuyez sur confirmer, il répète la clause else beaucoup et ne présente pas la forme:

var deleteConfirmed = false; 
$('form.confirm-form').submit(function(e) { 
if (! deleteConfirmed) 
{ 
    e.preventDefault(); 
    var title = $(this).find('input.action').val(); 
    var $this = $(this); 
    console.log('title: ' + title); 

    $('#confirm-dialog').attr('title', title); 

    $('#confirm-dialog').dialog({ 
     buttons : { 
      "Confirm" : function() { 
       deleteConfirmed = true; 
       $(this).dialog('close'); 
       $this.submit(); 
      }, 
      "Cancel" : function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    $('#confirm-dialog').dialog('open'); 
} 
else 
{ 
    $(this).submit(); 
    deleteConfirmed = false; 
} 
});

Source

2010-10-07 Becky

EDIT

Voici une solution possible. Je l'ai testé sur un serveur live car j'avais un comportement inhabituel sur jsFiddle. Note: J'ai supprimé le post original car il ne traitait pas de formulaires multiples. Et très probablement le formulaire de soumission serait soumis avec AJAX.

Source de x.html


<!DOCTYPE html> 
<html> 
<head><title>SO</title> 
<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"> 
</script> 
<link 
    rel="stylesheet" 
    type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/> 
</head> 
<body> 

<div id="dlg1"></div> 
<form method="post" action="/so/x.php" id="frm1" name="frm1"> 
    <input type="text"><br /> 
    <input type="submit" class="submitter_btn" id="frm1_submit"> 
</form> 
<form method="post" action="/so/x.php" id="frm2" name="frm2"> 
    <input type="text"><br /> 
    <input type="submit" class="submitter_btn" id="frm2_submit"> 
</form> 
<form method="post" action="/so/x.php" id="frm3" name="frm3"> 
    <input type="text"><br /> 
    <input type="submit" class="submitter_btn" id="frm3_submit"> 
</form> 


<script type="text/javascript"> 
var $current = { form : null, do_submit : false }; 

$('#dlg1').dialog({ 
    title: "Confirmation", 
    width: 300, 
    height: 200, 
    autoOpen: false, 
    modal: true, 
    buttons : { 
     "Confirm" : function(e){ 
     $current.do_submit = true; 
     $(this).dialog('close'); 
     }, 
     "Cancel" : function(e){ 
     $current.do_submit = false; 
     $(this).dialog('close'); 
     } 
    } 
}); 

$('#dlg1').bind('dialogbeforeclose', function(){ 
    if($current.do_submit){ 
     ($current.form).submit(); 
     $current.form = null; 
     $current.do_submit = false; 
    } 
}); 

$('.submitter_btn').click(function(e){ 
    e.preventDefault(); 
    $current.form = $(this).parents('form:first'); 
    $('#dlg1').dialog('open'); 
}); 


</script> 
</body> 
</html>

Source de x.php


<?php 
echo "HELLO";

Source

2010-10-07 12:54:25 JTP

cela a fonctionné merci! Je l'ai résolu d'une manière différente bien qu'avant que je lise votre poste, il n'est probablement pas aussi bon que le vôtre mais cela fonctionne! quand ils ont confirmé l'action, je les transfère juste là où le traitement de formulaire a lieu, au lieu d'essayer de soumettre le formulaire. ce serait beaucoup plus facile si la fonction "preventDefault()" était opposée. – Becky

Vous êtes les bienvenus. Je suis content que cela ait aidé. J'avais une exigence similaire pour remplacer les boîtes de dialogue d'alerte JavaScript plain vanilla avec les boîtes de dialogue jQuery à la place. Après avoir joué avec l'extrait de code posté un peu plus tard, j'ai pu factoriser le '.bind' et l'attribut do_submit du littéral d'objet assigné à $ current. En ce qui concerne l'inverse ou l'inversion de event.preventDefault(), la page de l'API jQuery pertinente contient des commentaires intéressants liés à cette http://api.jquery.com/event.preventDefault/. – JTP

Je l'habitude de brasser validations maison jusqu'à ce que je this script. C'est tellement moins de dommages au cerveau et semble bien valider à peu près n'importe quel type ou combinaison d'éléments de forme. Une seule déclaration de classe par élément active la validation au minimum. Pour en faire deux (ou plus) par page, vous devez en instancier un pour chaque ID ou nom de formulaire. Plutôt facile!

Source

2010-10-07 22:13:42 bpeterson76

C'est génial. Je dois essayer ça moi-même. Merci pour le lien. – JTP

ma validation de formulaire est tout fait à partir de kohana, je voulais quelque chose qui ferait apparaître une petite boîte de confirmation en disant "êtes-vous sûr que vous voulez supprimer ce etc .." lorsqu'un utilisateur a choisi de supprimer quelque chose, merci pour le lien! – Becky

Becky, nous faisons aussi notre validation sur le back-end ..... ce script vous permet de faire facilement la validation frontale. Bien que cela ne puisse pas répondre à votre question, la validation côté client est presque toujours préférable à la fin du processus, car elle est plus rapide et interrompt l'expérience de l'utilisateur. Il enregistre également les hits sur votre serveur. – bpeterson76

jQuery confirme la boîte de dialogue sur plusieurs formulaires

Répondre

Questions connexes