Comment implémenter la boîte de dialog «confirmation» dans la boîte de dialog Jquery UI?

Je suis en train d’essayer d’utiliser JQuery UI Dialog pour remplacer la vilaine boîte de javascript:alert() . Dans mon scénario, j’ai une liste d’éléments, et à côté d’eux, j’aurais un bouton “supprimer” pour chacun d’eux. La configuration de HTML Psuedo sera quelque chose comme suit:

  
Are you sure?

Dans la partie JQ, sur le document prêt, je commencerais par configurer le div comme un dialog modal avec le bouton nécessaire, et configurer ces “a” pour qu’ils soient confirmés avant de les supprimer, comme:

 $("ul li a").click(function() { // Show the dialog return false; // to prevent the browser actually following the links! } 

OK, voici le problème. Pendant le temps d’initialisation, la boîte de dialog n’aura aucune idée de qui (élément) le déclenchera, ainsi que l’identifiant de l’élément (!). Comment puis-je configurer le comportement de ces boutons de confirmation pour, si l’utilisateur choisit toujours OUI, il suivra le lien pour le supprimer?

Je devais juste résoudre le même problème. La clé pour que cela fonctionne est que la dialog doit être partiellement initialisée dans le gestionnaire d’événements click pour le lien avec lequel vous souhaitez utiliser la fonctionnalité de confirmation (si vous souhaitez l’utiliser pour plusieurs liens). En effet, l’URL cible du lien doit être injectée dans le gestionnaire d’événements pour le clic sur le bouton de confirmation. J’ai utilisé une classe CSS pour indiquer quels liens doivent avoir le comportement de confirmation.

Voici ma solution, abstraite pour convenir à un exemple.

 
Are you sure about this?
Click here Or, you could click here

Je pense que cela fonctionnerait pour vous, si vous pouvez générer vos liens avec la classe CSS ( confirmLink , dans mon exemple).

Voici un jsfiddle contenant le code.

Dans l’intérêt de la divulgation complète, je noterai que j’ai passé quelques minutes sur ce problème particulier et j’ai fourni une réponse similaire à cette question , qui était également sans réponse acceptée à l’époque.

J’ai trouvé que la réponse de Paul ne marchait pas très bien car la façon dont il configurait les options APRÈS l’instanciation du dialog lors de l’événement de clic était incorrecte. Voici mon code qui fonctionnait. Je ne l’ai pas adapté à l’exemple de Paul, mais ce n’est que la différence de la moustache d’un chat en termes de certains éléments qui sont nommés différemment. Vous devriez être capable de le résoudre. La correction est dans le setter de l’option de dialog pour les boutons de l’événement click.

 $(document).ready(function() { $("#dialog").dialog({ modal: true, bgiframe: true, width: 500, height: 200, autoOpen: false }); $(".lb").click(function(e) { e.preventDefault(); var theHREF = $(this).attr("href"); $("#dialog").dialog('option', 'buttons', { "Confirm" : function() { window.location.href = theHREF; }, "Cancel" : function() { $(this).dialog("close"); } }); $("#dialog").dialog("open"); }); }); 

J’espère que cela aidera quelqu’un d’autre, car ce message m’a d’abord permis de suivre le bon chemin. Je pensais que je ferais mieux d’afficher la correction.

J’ai créé ma propre fonction pour une boîte de dialog de confirmation de jquery. Voici le code

 function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) { $('
' + dialogText + '
').dialog({ draggable: false, modal: true, resizable: false, width: 'auto', title: dialogTitle || 'Confirm', minHeight: 75, buttons: { OK: function () { if (typeof (okFunc) == 'function') { setTimeout(okFunc, 50); } $(this).dialog('destroy'); }, Cancel: function () { if (typeof (cancelFunc) == 'function') { setTimeout(cancelFunc, 50); } $(this).dialog('destroy'); } } }); }

Maintenant, pour l’utiliser dans votre code, écrivez simplement

 myConfirm('Do you want to delete this record ?', function () { alert('You clicked OK'); }, function () { alert('You clicked Cancel'); }, 'Confirm Delete' ); 

Continue.

Solution simple et courte que j’ai juste essayée et ça marche

  $('.confirm').click(function() { $(this).removeClass('confirm'); $(this).text("Sure?"); $(this).unbind(); return false; }); 

puis ajoutez simplement class = “confirm” à votre lien et ça marche!

Ceci est ma solution .. J’espère que ça aide tout le monde. Il est écrit à la volée au lieu d’être copié, alors pardonnez-moi pour toute erreur.

 $("#btn").on("click", function(ev){ ev.preventDefault(); dialog.dialog("open"); dialog.find(".btnConfirm").on("click", function(){ // sortinggger click under different namespace so // click handler will not be sortingggered but native // functionality is preserved $("#btn").sortinggger("click.confirmed"); } dialog.find(".btnCancel").on("click", function(){ dialog.dialog("close"); } }); 

Personnellement je préfère cette solution 🙂

edit: Désolé .. je devrais vraiment l’expliquer plus en détail. J’aime ça car à mon avis c’est une solution élégante. Lorsque l’utilisateur clique sur le bouton à confirmer, l’événement est annulé comme il se doit. Lorsque l’utilisateur clique sur le bouton de confirmation, la solution n’est pas de simuler un clic sur un lien mais de déclencher le même événement jquery natif (clic) sur le bouton d’origine qui aurait été déclenché s’il n’y avait pas de dialog de confirmation. La seule différence étant un espace de nom d’événement différent (dans ce cas «confirmé»), de sorte que la boîte de dialog de confirmation ne s’affiche plus. Le mécanisme natif de Jquery peut alors prendre le relais et les choses peuvent fonctionner comme prévu. Un autre avantage étant qu’il peut être utilisé pour les boutons et les hyperliens. J’espère que j’étais assez clair.

Je sais que c’est une vieille question, mais voici ma solution en utilisant les atsortingbuts de données HTML5 dans MVC4:

 
Are you sure about this?

Code JS:

 $("#dialog").dialog({ modal: true, autoOpen: false, buttons: { "Confirm": function () { window.location.href = $(this).data('url'); }, "Cancel": function () { $(this).dialog("close"); } } }); $("#TheIdOfMyButton").click(function (e) { e.preventDefault(); $("#dialog").dialog("open"); }); 

Ça fera l’affraire?

 $("ul li a").click(function(e) { e.preventDefault(); $('#confirmDialog').show(); var delete_path = $(this).attr('href'); $('#confirmDialog a.ok').unbind('click'); // just in case the cancel link // is not the only way you can // close your dialog $('#confirmDialog a.ok').click(function(e) { e.preventDefault(); window.location.href = delete_path; }); }); $('#confirmDialog a.cancel').click(function(e) { e.preventDefault(); $('#confirmDialog').hide(); $('#confirmDialog a.ok').unbind('click'); }); 

Comme ci-dessus Les messages précédents m’ont mis sur la bonne voie. C’est comme ça que je l’ai fait. L’idée est d’avoir une image à côté de chaque ligne de la table (générée par le script PHP depuis la firebase database). Lorsque l’utilisateur clique sur une image, l’utilisateur est redirigé vers l’URL. Par conséquent, l’enregistrement approprié est supprimé de la firebase database tout en affichant certaines données liées à l’enregistrement cliqué dans la boîte de dialog de l’interface utilisateur jQuery.

Le code JavaScript:

 $(document).ready(function () { $("#confirmDelete").dialog({ modal: true, bgiframe: true, autoOpen: false }); }); function confirmDelete(username, id) { var delUrl = "/users/delete/" + id; $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'"); $('#confirmDelete').dialog('option', 'buttons', { "No": function () { $(this).dialog("close"); }, "Yes": function () { window.location.href = delUrl; } }); $('#confirmDelete').dialog('open'); } 

Dialog div:

 

Lien d’image:

 Delete User 

De cette façon, vous pouvez passer les valeurs de la boucle PHP dans la boîte de dialog. Le seul inconvénient est d’utiliser la méthode GET pour effectuer l’action.

Que dis-tu de ça:

 $("ul li a").click(function() { el = $(this); $("#confirmDialog").dialog({ autoOpen: false, resizable:false, draggable:true, modal: true, buttons: { "Ok": function() { el.parent().remove(); $(this).dialog("close"); } } }); $("#confirmDialog").dialog("open"); return false; }); 

Je l’ai testé à ce html:

  

Il supprime l’intégralité de l’élément li, vous pouvez l’adapter à vos besoins.

(Au 22/03/2016, le téléchargement sur la page liée à ne fonctionnait pas. Je laisse le lien ici au cas où le développeur le corrigerait à un moment donné car il s’agit d’un petit plugin génial. Le message original suit. alternative, et un lien qui fonctionne réellement: jquery.confirm .)

C’est peut-être trop simple pour vos besoins, mais vous pouvez essayer ce plug-in de confirmation jQuery . C’est très simple à utiliser et fait le travail dans de nombreux cas.

Autant que je déteste utiliser eval, cela semblait être le moyen le plus simple pour moi, sans causer beaucoup de problèmes en fonction des circonstances. Similaire à la fonction javascript settimeout.

 Confirm   

Je me suis heurté à ce problème et je me suis retrouvé avec une solution similaire à plusieurs réponses ici, mais implémentée différemment. Je n’ai pas aimé beaucoup de morceaux de javascript, ou un espace réservé div quelque part. Je voulais une solution généralisée, qui pourrait ensuite être utilisée en HTML sans ajout de javascript pour chaque utilisation. Voici ce que j’ai trouvé (cela nécessite jquery ui):

Javascript:

 $(function() { $("a.confirm").button().click(function(e) { e.preventDefault(); var target = $(this).attr("href"); var content = $(this).attr("title"); var title = $(this).attr("alt"); $('
' + content + '
'). dialog({ draggable: false, modal: true, resizable: false, width: 'auto', title: title, buttons: { "Confirm": function() { window.location.href = target; }, "Cancel": function() { $(this).dialog("close"); } } }); }); });

Et puis, en HTML, aucun appel ou référence JavaScript n’est nécessaire:

 Test 

Puisque l’atsortingbut title est utilisé pour le contenu div, l’utilisateur peut même obtenir la question de confirmation en survolant le bouton (c’est pourquoi je n’ai pas utilisé l’atsortingbut title pour la vignette). Le titre de la fenêtre de confirmation est le contenu de la balise alt. Le javascript peut être inclus dans un fichier .js généralisé, et en appliquant simplement une classe, vous avez une jolie fenêtre de confirmation.

 $("ul li a").live('click', function (e) { e.preventDefault(); $('
').appendTo('body') .html('
Are you sure about this?
') .dialog({ modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true, width: 'auto', modal: true, resizable: false, buttons: { Confirm: function () { // $(obj).removeAttr('onclick'); // $(obj).parents('.Parent').remove(); $(this).dialog("close"); window.location.reload(); }, No: function () { $(this).dialog("close"); } }, Cancel: function (event, ui) { $(this).remove(); } }); return false; });

NOTE: Pas assez de rep pour commenter, mais la réponse de BineG fonctionne parfaitement pour résoudre les problèmes de publication avec les pages ASPX comme souligné par Homer et echo. En honneur, voici une variante utilisant un dialog dynamic.

 $('#submit-button').bind('click', function(ev) { var $btn = $(this); ev.preventDefault(); $("
").html("Are you sure?").dialog({ modal: true, title: "Confirmation", buttons: [{ text: "Ok", click: function() { $btn.sortinggger("click.confirmed"); $(this).dialog("close"); } }, { text: "Cancel", click: function() { $(this).dialog("close"); } }] }).show(); });

Une autre variante de ce qui précède où il vérifie si le contrôle est soit un «asp: linkbutton», soit un «asp: button» qui affiche deux contrôles HTML différents. Semble travailler très bien pour moi, mais je ne l’ai pas testé de manière approfondie.

  $(document).on("click", ".confirm", function (e) { e.preventDefault(); var btn = $(this); $("#dialog").dialog('option', 'buttons', { "Confirm": function () { if (btn.is("input")) { var name = btn.attr("name"); __doPostBack(name, '') } else { var href = btn.attr("href"); window.location.href = href; } $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } }); $("#dialog").dialog("open"); }); 

Je cherchais à utiliser ceci sur les boutons de liaison dans une Gridview ASP.NET (commandes intégrées au contrôle GridView). Ainsi, l’action “Confirmer” dans la boîte de dialog doit activer un script généré par le contrôle Gridview au moment de l’exécution. cela a fonctionné pour moi:

  $(".DeleteBtnClass").click(function (e) { e.preventDefault(); var inlineFunction = $(this).attr("href") + ";"; $("#dialog").dialog({ buttons: { "Yes": function () { eval(inlineFunction); // eval() can be harmful! }, "No": function () { $(this).dialog("close"); } } }); }); 

Je sais que cette question est ancienne mais c’était la première fois que je devais utiliser une boîte de dialog de confirmation. Je pense que c’est le moyen le plus court de le faire.

 $(element).onClick(function(){ // This can be a function or whatever, this is just a sortinggger var conBox = confirm("Are you sure ?"); if(conBox){ // Do what you have to do } else return; }); 

J’espère que tu aimes 🙂

Personnellement, je vois cela comme une exigence récurrente dans de nombreuses vues de nombreuses applications ASP.Net MVC.

C’est pourquoi j’ai défini une classe de modèle et une vue partielle:

 using Resources; namespace YourNamespace.Models { public class SyConfirmationDialogModel { public SyConfirmationDialogModel() { this.DialogId = "dlgconfirm"; this.DialogTitle = Global.LblTitleConfirm; this.UrlAtsortingbute = "href"; this.ButtonConfirmText = Global.LblButtonConfirm; this.ButtonCancelText = Global.LblButtonCancel; } public ssortingng DialogId { get; set; } public ssortingng DialogTitle { get; set; } public ssortingng DialogMessage { get; set; } public ssortingng JQueryClickSelector { get; set; } public ssortingng UrlAtsortingbute { get; set; } public ssortingng ButtonConfirmText { get; set; } public ssortingng ButtonCancelText { get; set; } } } 

Et ma vue partielle:

 @using YourNamespace.Models; @model SyConfirmationDialogModel 
@Model.DialogMessage

Et puis, chaque fois que vous en avez besoin dans une vue, vous utilisez simplement @ Html.Partial (dans les scripts de section pour que JQuery soit défini):

 @Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"}) 

L’astuce consiste à spécifier JQueryClickSelector qui correspondra aux éléments nécessitant une boîte de dialog de confirmation. Dans mon cas, toutes les ancres avec la classe SyLinkDelete mais cela pourrait être un identifiant, une classe différente, etc. Pour moi, c’était une liste de:

  Delete  

Le sujet très populaire et google le trouve pour la requête “jquery dialog close quel événement a été cliqué”. Ma solution gère correctement les événements YES, NO, ESC_KEY, X. Je veux que ma fonction de rappel soit appelée quelle que soit la manière dont le dialog a été éliminé.

 function dialog_YES_NO(sTitle, txt, fn) { $("#dialog-main").dialog({ title: sTitle, resizable: true, //height:140, modal: true, open: function() { $(this).data("retval", false); $(this).text(txt); }, close: function(evt) { var arg1 = $(this).data("retval")==true; setTimeout(function() { fn(arg1); }, 30); }, buttons: { "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); }, "No": function() { $(this).data("retval", false); $(this).dialog("close"); } } }); } - - - - dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) { alert("Dialog retval is " + status); }); 

Il est facile de redirect le navigateur vers une nouvelle URL ou d’effectuer quelque chose d’autre lors du retour à la fonction.

Tant de bonnes réponses ici;) Voici mon approche. Similaire à l’utilisation de eval ().

 function functionExecutor(functionName, args){ functionName.apply(this, args); } function showConfirmationDialog(html, functionYes, fYesArgs){ $('#dialog').html(html); $('#dialog').dialog({ buttons : [ { text:'YES', click: function(){ functionExecutor(functionYes, fYesArgs); $(this).dialog("close"); }, class:'green' }, { text:'CANCEL', click: function() { $(this).dialog("close"); }, class:'red' } ] }); } 

Et l’utilisation ressemble à:

 function myTestYesFunction(arg1, arg2){ alert("You clicked YES:"+arg1+arg2); } function toDoOrNotToDo(){ showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']); } 

L’interface utilisateur JQuery prête à l’emploi offre cette solution:

 $( function() { $( "#dialog-confirm" ).dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); } ); 

HTML

 

These items will be permanently deleted and cannot be recovered. Are you sure?

Vous pouvez personnaliser davantage en fournissant un nom pour la fonction JQuery et en transmettant le texte / titre que vous souhaitez afficher comme paramètre.

Référence: https://jqueryui.com/dialog/#modal-confirmation

Eh bien c’est la réponse à vos questions …

 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  Santa Luisa                 

CONFERMA L`AZIONE:
POSSO CANCELLARE
QUESTA RIGA ?

-->

Modifica/Dettagli: 298 dsadas sadsadas  
1
DATACODICENOME/NOMITESTO  
12/22/2010 298 daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaModificaCancella
22/10/2010 298 dfdsfsdfsfModificaCancella
1

assurez-vous d’avoir jquery 1.4.4 et jquery.ui

Moyen facile avec une touche de javascript

 $("#myButton").click(function(event) { var cont = confirm('Continue?'); if(cont) { // do stuff here if OK was clicked return true; } // If cancel was clicked button execution will be halted. event.preventDefault(); }