Comment mettre en place de « confirmation » dans la boîte de dialogue Jquery UI ?

Question

Je suis d'essayer d'utiliser JQuery UI Dialog pour remplacer le moche javascript:alert()- fort. Dans mon scénario, j'ai une liste d'éléments, et à côté de chaque individu d'entre eux, je voudrais avoir un bouton "supprimer" pour chacun d'eux. le pseudo html, le programme d'installation va être 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 JQ partie, sur le document prêt, je voudrais tout d'abord le programme d'installation de la div à une boîte de dialogue modale nécessaire avec bouton, et ceux qui "un" être de tir à la 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 l'initialisation, la boîte de dialogue n'ai aucune idée de qui (item) le feu vers le haut, et aussi l'id de l'élément (!). Comment puis-je configurer le comportement de ceux qui, la confirmation de boutons, afin que, si l'utilisateur choisit OUI, il va suivre le lien pour le supprimer?

Answer 1

J'ai juste eu à résoudre le même problème. La clé de l'obtention de ce travail était que l' dialog doit être partiellement initialisé dans l' click gestionnaire d'événement pour le lien que vous voulez utiliser la confirmation avec la fonctionnalité (si vous souhaitez utiliser ce pour plus d'un lien). C'est parce que l'URL cible du lien doit être injecté dans le gestionnaire d'événement pour la confirmation de clic de bouton. J'ai utilisé une classe CSS pour indiquer les liens doivent avoir la confirmation de comportement.

Voici ma solution, disparaît à être adapté pour 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 ce serait travailler pour vous, si vous pouvez obtenir vos liens avec la classe CSS (confirmLink, dans mon exemple).

Voici un jsfiddle avec le code.

Dans l'intérêt de la divulgation complète, je note que j'ai passé quelques minutes sur ce problème particulier et j'ai fourni une semblable réponse à cette question, qui était aussi sans un accepté de répondre à l'époque.

Answer 2

J'ai trouvé la réponse par Paul n'a pas assez de travail comme la façon dont il a été paramètre les options APRÈS le dialogue a été instancié sur l'événement click étaient incorrectes. Voici mon code qui fonctionne. Je n'ai pas adaptés pour correspondre à l'exemple de Paul, mais c'est seulement un chat moustache de différence en termes de certains de ses éléments sont nommés différemment. Vous devriez être en mesure de s'en sortir. La correction est dans le setter de la boîte de dialogue option pour les boutons sur 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");

    });

});

Espérons que cela aide quelqu'un d'autre que ce post à l'origine, m'a mis sur la bonne piste, j'ai pensé que je ferais mieux de poster la correction.

Answer 3

J’ai créé un ma propre fonction pour un jquery ui confirment la boîte de dialogue. Voici le code

Maintenant pour l’utiliser dans votre code, simplement écrire suivant

Allez.

Answer 4

Solution simple et courte que je viens d’essayer et ça marche

ensuite il suffit d’ajouter la classe = « confirmer » pour vous avez un lien et ça marche !

Answer 5

C'est ma solution.. j'espère que cela aide quelqu'un. Il est écrit à la volée au lieu de copypasted donc pardonner moi pour 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é.. j'ai vraiment shouldve expliqué plus en détail. Je l'aime parce qu'à mon avis c'est une solution élégante. Lorsque l'utilisateur clique sur le bouton qui doit être confirmée d'abord l'événement est annulé en tant qu'il a à être. Lorsque la fenêtre de confirmation bouton est cliqué, la solution n'est pas de simuler un lien cliquez mais de déclencher les mêmes jquery native de l'événement (de la souris) sur le bouton d'origine qui aurait déclenché si il n'y a pas de boîte de dialogue de confirmation. La seule différence étant un événement différent de l'espace de noms (dans ce cas, 'confirmés'), de sorte que la boîte de dialogue de confirmation n'est pas encore présentée. Jquery mécanisme natif peut alors prendre le relais et les choses peuvent fonctionner comme prévu. Un autre avantage est qu'il peut être utilisé pour les boutons et les liens hypertexte. J'espère avoir été assez clair.