Renvoi d'une valeur dans la boîte de dialogue de confirmation à l'aide de la boîte de dialogue JQuery UI

J'utilise jQuery UI dialog pour afficher une boîte de dialogue de confirmation lorsqu'un bouton est cliqué. Je veux retourner true, quand OK est cliqué et false sinon.Renvoi d'une valeur dans la boîte de dialogue de confirmation à l'aide de la boîte de dialogue JQuery UI

L'association de l'appel de boîte de dialogue à onClick (tel que donné here, $dialog.dialog('open');) ne sert pas l'objectif. Donc, comme une solution de contournement, j'ai suivi une approche, qui est similaire à ceci: http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery. Il y a deux différences entre cette approche et la mienne:

L'exemple utilise balise d'ancrage et,
Il ne se sert pas de dialogue jQuery UI.

J'ai modifié le code donné dans le lien de l'exemple, mais cela ne fonctionne pas. Je me demande ce que je fais mal. Existe-t-il un moyen moins coûteux de le faire?

Voici le code, tous les CSS/JS font référence à jQuery CDN, donc vous devriez être capable de copier le code pour voir le comportement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Control Panel</title> 
    </head> 

    <body> 
    <form action="http://google.com"> 
     <button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2">Start Thermonuclear War</span> 
     </button> 
    </form> 
    <div title="Why so serious?" id="id3" style="display:none;"> 
     <p>You are about to start a war. 
     <p>Click OK to confirm. Click Cancel to cancel this action.</p> 
    </div> 
    </body> 
    <script type="text/javascript"> 
    $('#id2').click(function (event) { 

     if ($(this).data('propagationStopped')) { 
     //alert('true'); 
     $(this).data('propagationStopped', false); 
     return true; 
     } else { 

     event.stopImmediatePropagation(); 

     $('#id3').dialog({ 
      //autoOpen: false, 
      width: 600, 
      buttons: { 
      "Ok": function() { 
       $(this).dialog("close"); 
       $('#id2').data('propagationStopped', true); 
       $('#id2').triggerHandler(event); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
       return false; 
      } 
      } 
     }); 
     //alert('false'); 
     return false; 
     } 
    }); 
    </script> 

</html>

Précision: S'il vous plaît noter qu'il est très simple (voir le solution by bryan.taylor) à faire une soumission de formulaire. Ce que je veux faire ici est de simuler la soumission en cliquant sur le bouton. Plus comme la méthode confirm() de JavaScript.

Source

2010-08-24 Nishant

Idéalement, cet exemple devrait vous prendre à Google sur OK et fermez et ne rien faire sur Annuler. J'essaierais d'éviter la solution explicite $ (formName) .submit(). – Nishant

duplication possible de boîte de dialogue [jquery ui devez retourner la valeur, lorsque l'utilisateur appuie sur le bouton, mais ne fonctionne pas] (http://stackoverflow.com/questions/6049687/jquery-ui-dialog-box-need-to-return- value-when-user-presses-button-but-not-wor) – Liam

JavaScript est asynchrone. L'appel à

$myDialog.dialog('open');

ne bloque pas, mais va plutôt revenir immédiatement. Au lieu de cela, il faut utiliser les rappels d'événement que vous fournissez dans le buttonsoption of dialog.

Cette quasi-double est un bon exemple:

jquery ui dialog box need to return value, when user presses button, but not working

Source

2012-04-06 04:18:45

http://stackoverflow.com/a/18474005/1876355 – Pierre

Votre code est un peu compliqué, je pense qu'il y a un moyen beaucoup plus facile de le faire. Vous devez d'abord instancier la boîte de dialogue, puis l'ouvrir sur l'événement click de votre bouton. Code ressemblerait à ceci:

<script> 
$(document).ready(function() { 
    var $myDialog = $('<div></div>') 
    .html('You are about to start a war.<br/>Click OK to confirm. Click Cancel to stop this action.') 
    .dialog({ 
    autoOpen: false, 
    title: 'Why so serious?', 
    buttons: { 
     "OK": function() { 
     $(this).dialog("close"); 
     window.open('http://google.com/'); 
     return true; 
     }, 
     "Cancel": function() { 
     $(this).dialog("close"); 
     return false; 
     } 
    } 
    }); 

    $('#myOpener').click(function() { 
    return $myDialog.dialog('open'); //replace the div id with the id of the button/form 
    }); 
}); 
</script> 

<div id="myOpener"></div>

Voici la documentation de l'API jQuery UI Dialog, vous pouvez voir toutes vos options:

http://api.jqueryui.com/dialog/

Source

2010-08-24 21:22:22

PS Je n'ai pas testé ce code, je l'ai à peu près écrit pour que vous puissiez avoir une idée de la façon d'aborder ce problème, donc il pourrait y avoir quelques réglages nécessaires. –

Oui, ce code va bien. La seule chose est que je veux soumettre un formulaire .. donc ce que je vais faire est de mettre $ ('# formId'). Submit() inplace de window.open ('http://google.com/'); dans votre réponse. Mais le problème est que je veux simuler la soumission en cliquant sur le bouton.J'ai réalisé que peut-être la question n'était pas claire, j'ajoute une clarification dans la question. Merci pour la suggestion. – Nishant

@Nishant: Pas vraiment sûr de ce que vous entendez par «simuler la soumission par un clic sur un bouton». Voulez-vous dire que vous voulez empêcher l'événement de soumission de se produire lorsque quelqu'un clique sur OK? Je suppose que je vous demande simplement de préciser ce que signifie «simuler la soumission», pouvez-vous fournir un cas d'utilisation pertinent? –

Renvoi d'une valeur dans la boîte de dialogue de confirmation à l'aide de la boîte de dialogue JQuery UI

Répondre

Questions connexes