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

148

J'essaye d'utiliser la boîte de dialogue JQuery UI pour remplacer la javascript:alert()boîte laide . Dans mon scénario, j'ai une liste d'éléments, et à côté de chacun d'entre eux, j'aurais un bouton «supprimer» pour chacun d'eux. la configuration html psuedo sera quelque chose qui 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 configurerais d'abord le div pour être une boîte de dialogue modale avec le bouton nécessaire, et définirais ces "a" pour qu'ils se déclenchent en 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 de qui (l'élément) le déclenchera, 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?

Xandy
la source
Il existe un plugin facile à utiliser pour le faire ici: stackoverflow.com/questions/6457750/form-confirm-before-submit
1
Looooong a recherché une solution: stackoverflow.com/a/18474005/1876355
Pierre

Réponses:

166

Je devais juste résoudre le même problème. La clé pour que cela fonctionne était que le dialogdoit être partiellement initialisé dans le clickgestionnaire d'événements pour le lien avec lequel vous souhaitez utiliser la fonctionnalité de confirmation (si vous souhaitez l'utiliser pour plus d'un lien). En effet, l'URL cible du lien doit être injectée dans le gestionnaire d'événements pour le clic du bouton de confirmation. J'ai utilisé une classe CSS pour indiquer quels liens devraient 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 crois que cela fonctionnerait pour vous, si vous pouvez générer vos liens avec la classe CSS ( confirmLink, dans mon exemple).

Voici un jsfiddle avec le code dedans.

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 était également sans réponse acceptée à l'époque.

Paul Morie
la source
2
+1 fonctionne presque ... mais voir la réponse de @lloydphillips pour une correction
rohancragg
Quelqu'un d'autre remarque-t-il que cela entraînera un postback complet dans un UpdatePanel? Comment résolvez-vous cela?
Homer
3
Il y a quelque chose dans cette réponse et les réponses de @lloydphillips qui ne le font tout simplement pas pour moi. La question d'origine fait référence à un bouton «supprimer» (lien). En général, il est déconseillé d'utiliser un lien (HTTP GET) pour une opération qui change d'état (comme un DELETE). Ces deux réponses supposent que l'utilisateur a activé javascript. Si javascript est désactivé, les liens se déclencheront et l'opération de suppression (ou autre) se déclenchera sans confirmation, ce qui pourrait être catastrophique. J'espérais trouver une réponse qui traite de cette question.
écho
@echo: J'ai pensé à la même chose. Pour le rendre correct, je pense qu'il doit y avoir une autre page qui demande une confirmation si JS est désactivé. Si JS, cette page peut être omise. Peut-être via un autre paramètre get comme confirmé = true. Vraiment difficile et encombrant de prendre en compte les cas avec et sans JS. Le développement Web est un gâchis.
robsch
1
@sree Bien sûr. Vous pouvez extraire une fonction qui prend le nom de l'ID à utiliser comme paramètre et effectue les appels jQuery pour configurer les gestionnaires d'événements pour l'ID transmis.
Paul Morie
59

J'ai trouvé que la réponse de Paul ne fonctionnait pas tout à fait car la façon dont il définissait les options APRÈS que la boîte de dialogue ait été instanciée sur l'événement de clic était incorrecte. Voici mon code qui fonctionnait. Je ne l'ai pas adapté pour correspondre à l'exemple de Paul, mais ce n'est que la différence d'un chat en ce que certains éléments sont nommés différemment. Vous devriez pouvoir y arriver. La correction se trouve dans le paramètre de l'option de dialogue pour les boutons sur l'événement de clic.

$(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 aide quelqu'un d'autre, car ce message m'a à l'origine mis sur la bonne voie, je pensais que je ferais mieux de publier la correction.

Lloydphillips
la source
1
Je ne vois pas ce que vous avez fait qui était différent de la réponse de Paul.
Grant Birchmeier
2
Cela me semble correct. La seule chose que je suggérerais serait d'utiliser à la onplace de click, car cela continuera à fonctionner si (par exemple) le champ est redessiné à l'aide de jQuery - api.jquery.com/on
Aaron Newton
1
hah "la différence des moustaches de chat" - je dois utiliser cette phrase plus.
Chad Gorshing
27

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.

d-coder
la source
C'est une bonne solution, c'est très similaire à la mienne que j'utilise pour obtenir une URL ajax et un affichage rapide ... function JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.monsite.com'> </div>"); $ ("# dialog"). load (url) .dialog ({redimensionnable: false, width: 770, height: 470, modal: true, boutons: {"Close": function () {$ (this) .dialog ( "close"); $ ("# dialog"). remove ();}}}); }
conners
6

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!

user681365
la source
Le message .text demande "Bien sûr?" mais ne donne pas le choix entre oui / non, ok / annuler. Comment l'utilisateur indique-t-il s'il est "sûr" ou "incertain"?
Genki
6

C'est ma solution .. j'espère que cela aide n'importe qui. Il est écrit à la volée au lieu d'être copypasté, alors pardonnez-moi toute erreur.

$("#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. Je l'aime car à 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 n'est pas de simuler un clic de lien mais de déclencher le même événement jquery natif (clic) sur le bouton d'origine qui se serait déclenché s'il n'y avait pas de dialogue de confirmation. La seule différence étant un espace de noms d'événement différent (dans ce cas «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 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 avoir été assez clair.

BineG
la source
Envisagez de modifier votre message et dites à la communauté pourquoi vous préférez cette solution. Qu'est-ce qui le rend meilleur pour vous?
Fuzzical Logic
J'ai édité le message. J'espère que cela a plus de sens maintenant. Quand je l'ai écrit, il semblait si clair qu'il n'y avait pas besoin de commentaire. Quelle différence quand je l'ai revisité après un moment ... :)
BineG
Une excellente solution très propre! Jamais lu sur les espaces de noms d'événements auparavant. Merci pour ça!
griffla
BEAAUUTIFULLL! "..mais pour déclencher le même événement jquery natif (cliquez) sur le bouton d'origine .." sonne beauutifulll !! Merci pour $("#btn").trigger("click.confirmed");
Irf
4

Je sais que c'est une vieille question mais voici ma solution utilisant les attributs de données HTML5 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");
});
woggles
la source
J'aime cette solution, merci. Facile à comprendre et fonctionne pour moi. Je n'ai pas utilisé la partie @ Url.Action, mais cela fonctionne avec une URL générée par mon MVC côté serveur (PHP / Symfony2).
fazy
3

Ç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');
});
et moi
la source
Merci pour cette réponse. Je suis sûr que je vais le tester (et pourtant il semble fonctionnel). Un des problèmes que j'ai vu dans de nombreuses réponses ici est le manque de généralité. Si la page a un autre ensemble de contrôles (ou de liens ou ainsi de suite) qui nécessitaient une confirmation, il semble que nous ayons besoin de plusieurs déclarations sur l'interaction / l'action. L'ancienne méthode javascript, c'est-à-dire href = "javascript: confirm ('link_url');" est simple et élégant et convient à tous les cas similaires. Bien sûr, la méthode javascript est trop gênante pour que les personnes sans javascript rateront complètement le lien. Encore une fois merci pour la grande réponse.
xandy
3

Comme ci-dessus. Les messages précédents m'ont mis sur la bonne voie. Voilà comment 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 un script PHP à partir de la base de données). Lorsqu'un 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 liées à l'enregistrement cliqué dans la boîte de dialogue 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');
}

Boîte de dialogue div:

<div id="confirmDelete" title="Delete User?"></div> 

Lien 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 réellement l'action.

LukeP
la source
2

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.

kgiannakakis
la source
2

(Depuis le 22/03/2016, le téléchargement sur la page liée à ne fonctionne pas. Je laisse le lien ici au cas où le développeur le corrige à un moment donné parce que c'est un super petit plugin. Le message original suit. Un alternative, et un lien qui fonctionne réellement: jquery.confirm .)

C'est peut-être trop simple pour vos besoins, mais vous pouvez essayer ce plugin de confirmation jQuery . C'est vraiment simple à utiliser et fait le travail dans de nombreux cas.

grahamesd
la source
Le lien me mène à un profil lié. Il semble que vous ne pouvez pas voir le plugin sauf si vous êtes un membre premium lié.
Zane
J'ai mis à jour le lien pour qu'il fonctionne à nouveau. Le développeur doit rediriger l'ancien lien vers son profil LinkedIn. Si elle le modifie à nouveau, recherchez-le simplement sur Google en utilisant "jquery confirm plugin nadia".
grahamesd
Merci! Bien que j'aie déjà implémenté ma version maintenant, je vais toujours y jeter un œil.
Zane
le lien est à nouveau mort
Valamas
1

Même si je déteste utiliser eval, cela m'a semblé être le moyen le plus simple, sans causer beaucoup de problèmes selon les 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>
SethT
la source
1

Je suis tombé sur cela moi-même et je me suis retrouvé avec une solution, qui est similaire à plusieurs réponses ici, mais implémentée légèrement différemment. Je n'aimais pas 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 ajouter de javascript à chaque utilisation. Voici ce que j'ai proposé (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>

Étant donné que 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. Le snip javascript peut être inclus dans un include généralisé .js, et simplement en appliquant une classe, vous avez une jolie fenêtre de confirmation.

Redreinard
la source
0
$("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;
        });
Thulasiram
la source
0

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 écho. En l'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();  
});
Draghon
la source
0

Une autre variante de ce qui précède où il vérifie si le contrôle est soit un 'asp: linkbutton' ou 'asp: button' qui est rendu comme deux contrôles html différents. Cela semble fonctionner 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");
        });
Drauka
la source
0

Je cherchais ceci à utiliser sur des boutons de lien dans un Gridview ASP.NET (contrôle GridView construit dans les commandes) Ainsi, l'action "Confirmer" dans 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");
             }
         }
     });
 });
fétiche
la source
eval () peut être nuisible! Au fait, je dois citer cette partie de votre code: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);cela n'a aucun sens!
Sk8erPeter
0

Je sais que cette question est ancienne mais c'était la première fois que je devais utiliser une boîte de 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 :)

Mollo
la source
0

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.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 vision 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 puis, chaque fois que vous en avez besoin dans une vue, il vous suffit d'utiliser @ 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 le JQueryClickSelector qui correspondra aux éléments qui nécessitent une boîte de dialogue 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:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
Frederick Samson
la source
ASP.Net MVC avec jQuery.
Frederick Samson
0

Sujet très populaire et Google le trouve pour la requête "jquery dialog close which event was clicked". Ma solution gère correctement les événements OUI, NON, ESC_KEY, X. Je veux que ma fonction de rappel soit appelée quelle que soit la manière 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.

Qui
la source
0

Autant de bonnes réponses ici;) Voici ma démarche. Utilisation similaire à 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']);
}
Daniel Więcek
la source
0

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

<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 cela en fournissant un nom pour la fonction JQuery et en transmettant le texte / titre que vous souhaitez afficher en tant que paramètre.

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

stef
la source
-1

Eh bien, c'est la réponse à vos questions ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

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

Costa
la source
C'est l'un des codes les plus laids que j'ai vus depuis des années. Vous utilisez des attributs obsolètes (comme LANGUAGE="JavaScript"), utilisez des caractères majuscules et minuscules mélangés, vous mélangez des codes JS simples avec des codes jQuery totalement inutilement, et vous définissez des styles avec JS au lieu de CSS (moche et sémantiquement incorrect), et, en passant, votre style la modification (avec JS simple) n'a absolument aucune importance en ce qui concerne la question d'origine. Vous devez absolument raccourcir et embellir votre code et vous concentrer sur la réponse à la question initiale.
Sk8erPeter
-1

Un 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();
}
Lukas
la source
2
Le but était spécifiquement d'éviter d'utiliser les fonctions javascript par défaut alert / confirm, etc.
redreinard