Comment implémenter la boîte de dialogue "confirmation" dans la boîte de dialogue Jquery UI?
J'essaie d'utiliser le dialogue JQuery UI Dialog pour remplacer la boîte laide javascript:alert(). Dans mon scénario, j'ai une liste d'éléments et, à côté de chacun d'entre eux, un bouton "Supprimer" pour chacun d'eux. la configuration hpml psuedo sera quelque chose suit:
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
Dans la partie JQ, sur le document prêt, je commencerais par configurer la div pour qu’elle soit un dialogue modal avec le bouton nécessaire, puis définirais ces "a" pour qu'ils se déclenchent comme une confirmation avant de 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 dialogue n’aura aucune idée du nom de l’élément qui sera activé, ni de l’identifiant de l’élément (!). Comment puis-je configurer le comportement de ces boutons de confirmation afin que, 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 pendant plusieurs années). lien). Cela est dû au fait que l'URL cible du lien doit être injectée dans le gestionnaire d'événements pour que le bouton de confirmation soit activé. J'ai utilisé une classe CSS pour indiquer quels liens doivent avoir le comportement de confirmation.
Voici ma solution, abstraite pour convenir à un exemple.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
Je pense que cela fonctionnerait pour vous si vous pouviez générer vos liens avec la classe CSS (confirmLink, dans mon exemple).
Voici un jsfiddle avec le code qu'il contient.
Dans l'intérêt d'une divulgation complète, je noterai que j'ai passé quelques minutes sur ce problème particulier et que j'ai fourni une réponse similaire à cette question , qui n'avait également pas de réponse acceptée à l'époque.
J'ai trouvé que la réponse de Paul ne fonctionnait pas tout à fait, car la manière dont il configurait les options APRÈS que la boîte de dialogue ait été instanciée lors du 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 d'un whisker de chat, certains éléments portant un nom différent. Vous devriez pouvoir y arriver. La correction est dans le configurateur de l'option de dialogue 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 poste m'a permis de trouver la bonne voie. Je pensais que je devrais poster la correction.
J'ai créé ma propre fonction pour une boîte de dialogue de confirmation jquery ui. Voici le code
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; Word-wrap: break-Word;">' + dialogText + '</div>').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 utiliser ceci dans votre code, écrivez simplement ce qui suit
myConfirm('Do you want to delete this record ?', function () {
alert('You clicked OK');
}, function () {
alert('You clicked Cancel');
},
'Confirm Delete'
);
Continue.
Ceci est ma solution .. j'espère que cela aide quelqu'un. C'est écrit sur le vif au lieu de copypasted alors pardonnez-moi pour toutes les erreurs.
$("#btn").on("click", function(ev){
ev.preventDefault();
dialog.dialog("open");
dialog.find(".btnConfirm").on("click", function(){
// trigger click under different namespace so
// click handler will not be triggered but native
// functionality is preserved
$("#btn").trigger("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 parce qu'à mon avis c'est une solution élégante. Lorsque l'utilisateur clique sur le bouton qui doit être confirmé en premier, l'événement est annulé comme il se doit. Lorsque le bouton de confirmation est cliqué, la solution ne consiste pas à simuler un lien, mais à 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 eu de boîte de dialogue de confirmation. La seule différence étant un espace de nom d'événement différent (dans le cas présent, "confirmé"), de sorte que la boîte de dialogue de confirmation ne s'affiche plus. Le mécanisme natif de Jquery peut alors prendre le relais et tout peut fonctionner comme prévu. Un autre avantage est qu'il peut être utilisé pour les boutons et les hyperliens. J'espère avoir été assez clair.
Solution simple et courte que je viens d'essayer et cela fonctionne
$('.confirm').click(function() {
$(this).removeClass('confirm');
$(this).text("Sure?");
$(this).unbind();
return false;
});
puis ajoutez simplement le class = "confirm" à votre lien et cela fonctionne!
Je sais que c’est une vieille question mais voici ma solution en utilisant HTML5 attributs de données dans MVC4:
<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
Are you sure about this?
</div>
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 articles précédents m'ont mis sur la bonne voie. Voici comment je l'ai fait. L'idée est d'avoir une image à côté de chaque ligne du tableau (générée par le script PHP de la base de données). Lorsque l'utilisateur clique sur une image, l'utilisateur est redirigé vers l'URL et, par conséquent, l'enregistrement approprié est supprimé de la base de données tout en affichant certaines données relatives à l'enregistrement cliqué dans la boîte de dialogue jQuery UI.
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');
}
Dialogue div:
<div id="confirmDelete" title="Delete User?"></div>
Lien de l'image:
<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>
De cette façon, vous pouvez passer les valeurs de la boucle PHP dans la boîte de dialogue. 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:
<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>
Il supprime tout l'élément li, vous pouvez l'adapter à vos besoins.
(Depuis le 22/03/2016, le téléchargement sur la page liée à ne fonctionne plus. Je laisse le lien ici au cas où le développeur le corrigerait un jour parce que c'est un excellent petit plugin. 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 ceci plugin jQuery confirm . C'est vraiment simple à utiliser et fait le travail dans de nombreux cas.
Je me suis heurté à cela et je me suis retrouvé avec une solution, semblable à plusieurs réponses ici, mais implémentée légèrement différemment. Je n'ai pas aimé beaucoup de morceaux de javascript, ou un espace réservé div quelque part. Je souhaitais une solution généralisée pouvant être utilisée en HTML sans ajouter de javascript à chaque utilisation. Voici ce que je suis venu avec (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");
$('<div>' + content + '</div>'). 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:
<a href="http://www.google.com/"
class="confirm"
alt="Confirm test"
title="Are you sure?">Test</a>
Puisque l'attribut 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'attribut title pour la vignette). Le titre de la fenêtre de confirmation est le contenu de la balise alt. La copie javascript peut être incluse dans un .js généralisé, et en appliquant simplement une classe, vous avez une jolie fenêtre de confirmation.
Autant que je déteste utiliser eval, cela me semblait la manière la plus simple, sans causer beaucoup de problèmes en fonction des circonstances. Similaire à la fonction javascript settimeout.
<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
<p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: false,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
eval(callback)
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
}
function do_function(params){
console.log('approved');
}
</script>
REMARQUE: Pas assez de représentants 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 dialogue dynamique.
$('#submit-button').bind('click', function(ev) {
var $btn = $(this);
ev.preventDefault();
$("<div />").html("Are you sure?").dialog({
modal: true,
title: "Confirmation",
buttons: [{
text: "Ok",
click: function() {
$btn.trigger("click.confirmed");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]
}).show();
});
JQuery UI 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
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Vous pouvez personnaliser davantage cette fonctionnalité en fournissant un nom à la fonction JQuery et en transmettant le texte/titre à afficher en tant que paramètre.
Je sais que cette question est ancienne mais c'était la première fois que je devais utiliser un dialogue 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 trigger
var conBox = confirm("Are you sure ?");
if(conBox){
// Do what you have to do
}
else
return;
});
J'espère que tu aimes :)
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']);
}
Personnellement, je considère 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.UrlAttribute = "href";
this.ButtonConfirmText = Global.LblButtonConfirm;
this.ButtonCancelText = Global.LblButtonCancel;
}
public string DialogId { get; set; }
public string DialogTitle { get; set; }
public string DialogMessage { get; set; }
public string JQueryClickSelector { get; set; }
public string UrlAttribute { get; set; }
public string ButtonConfirmText { get; set; }
public string ButtonCancelText { get; set; }
}
}
Et ma vue partielle:
@using YourNamespace.Models;
@model SyConfirmationDialogModel
<div id="@Model.DialogId" title="@Model.DialogTitle">
@Model.DialogMessage
</div>
<script type="text/javascript">
$(function() {
$("#@Model.DialogId").dialog({
autoOpen: false,
modal: true
});
$("@Model.JQueryClickSelector").click(function (e) {
e.preventDefault();
var sTargetUrl = $(this).attr("@Model.UrlAttribute");
$("#@Model.DialogId").dialog({
buttons: {
"@Model.ButtonConfirmText": function () {
window.location.href = sTargetUrl;
},
"@Model.ButtonCancelText": function () {
$(this).dialog("close");
}
}
});
$("#@Model.DialogId").dialog("open");
});
});
</script>
Et ensuite, chaque fois que vous en avez besoin dans une vue, vous utilisez simplement @ Html.Partial (il l'a fait dans les scripts de section afin que JQuery soit défini):
@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})
L'astuce consiste à spécifier le JQueryClickSelector qui correspondra aux éléments nécessitant une boîte de dialogue de confirmation. Dans mon cas, toutes les ancres de la classe SyLinkDelete mais il pourrait s'agir d'un identifiant, d'une classe différente, etc. Pour moi, il s'agissait d'une liste de:
<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
<img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
Je cherchais cela à utiliser sur les boutons de liens dans une grille Gridview ASP.NET (commandes de construction GridView). Ainsi, l'action "Confirmer" de la boîte de dialogue 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");
}
}
});
});
Une autre variante de ce qui précède, où il vérifie si le contrôle est un "asp: linkbutton" ou un "asp: button" qui s'affiche sous la forme de deux contrôles HTML différents. Cela semble bien fonctionner 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");
});
$("ul li a").live('click', function (e) {
e.preventDefault();
$('<div></div>').appendTo('body')
.html('<div><h6>Are you sure about this?</h6></div>')
.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;
});
Sujet très populaire et Google trouve cela pour "requête jquery dialogue fermer 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 façon dont le dialogue a été supprimé.
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 rediriger le navigateur vers une nouvelle URL ou d'effectuer autre chose sur la fonction retval.