wake-up-neo.com

Wie implementiere ich den "Bestätigungs" -Dialog im Jquery UI-Dialog?

Ich versuche, JQuery UI Dialog zu verwenden, um das hässliche Feld javascript:alert() zu ersetzen. In meinem Szenario habe ich eine Liste von Elementen, und neben jeder einzelnen von ihnen würde ich eine Schaltfläche "Löschen" für jede von ihnen haben. Das Pseudo-HTML-Setup sieht folgendermaßen aus:

<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>

Im JQ-Teil, auf dem Dokument bereit, würde ich zuerst das div als modalen Dialog mit der erforderlichen Schaltfläche einrichten und diese "a" zur Bestätigung auslösen, bevor sie entfernt werden, wie zum Beispiel:

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

OK, hier ist das Problem. Während der Init-Zeit hat der Dialog keine Ahnung, wer (Item) ihn startet, und auch die Item-ID (!). Wie kann ich das Verhalten dieser Bestätigungsschaltflächen einstellen, damit der Benutzer, wenn er immer noch JA wählt, dem Link folgt, um ihn zu entfernen?

147
xandy

Ich musste nur das gleiche Problem lösen. Der Schlüssel, um dies zum Laufen zu bringen, war, dass das dialog im click -Ereignishandler für den Link, mit dem Sie die Bestätigungsfunktion verwenden möchten, teilweise initialisiert werden muss (wenn Sie dies für weitere Zwecke verwenden möchten) als ein Link). Dies liegt daran, dass die Ziel-URL für den Link in die Ereignisbehandlungsroutine eingefügt werden muss, damit auf die Schaltfläche zur Bestätigung geklickt werden kann. Ich habe eine CSS-Klasse verwendet, um anzugeben, welche Links das Bestätigungsverhalten aufweisen sollen.

Hier ist meine Lösung, abstrahiert, um für ein Beispiel geeignet zu sein.

<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>

Ich glaube, dass dies für Sie funktionieren würde, wenn Sie Ihre Links mit der CSS-Klasse (in meinem Beispiel confirmLink) generieren können.

Hier ist ein jsfiddle mit dem Code darin.

Im Interesse einer vollständigen Offenlegung stelle ich fest, dass ich einige Minuten mit diesem speziellen Problem verbracht habe und eine ähnliche Antwort auf diese Frage gegeben habe, die zu der Zeit auch ohne akzeptierte Antwort war.

166
Paul Morie

Ich fand, dass die Antwort von Paul nicht ganz funktionierte, da die Art und Weise, in der er die Optionen festlegte, nachdem der Dialog beim Klickereignis instanziiert worden war, falsch war. Hier ist mein Code, der funktioniert hat. Ich habe es nicht auf das Beispiel von Paul zugeschnitten, aber es ist nur der Unterschied eines Katzenschnurrbartes in Bezug auf einige Elemente, die unterschiedlich benannt sind. Sie sollten es herausfinden können. Die Korrektur erfolgt im Setter der Dialogoption für die Schaltflächen des Klickereignisses.

$(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");

    });

});

Ich hoffe, dies hilft jemand anderem, da dieser Beitrag mich ursprünglich auf die richtige Spur gebracht hat. Ich dachte, ich poste die Korrektur besser.

59
lloydphillips

Ich habe eine eigene Funktion für eine Abfrage über den Bestätigungsdialog erstellt. Hier ist der 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');
      }
    }
  });
}

Um dies nun in Ihrem Code zu verwenden, schreiben Sie einfach Folgendes

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

Mach weiter.

27
d-coder

Dies ist meine Lösung .. Ich hoffe, es hilft jedem. Es ist im laufenden Betrieb geschrieben, anstatt kopypastiert zu werden, also verzeihen Sie mir etwaige Fehler.

$("#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");
    }
});

Persönlich bevorzuge ich diese Lösung :)

edit: Sorry .. ich hätte es wirklich genauer erklären sollen. Ich mag es, weil es meiner Meinung nach eine elegante Lösung ist. Wenn der Benutzer auf die Schaltfläche klickt, die zuerst bestätigt werden muss, wird das Ereignis so abgebrochen, wie es sein muss. Wenn auf die Bestätigungsschaltfläche geklickt wird, besteht die Lösung nicht darin, einen Linkklick zu simulieren, sondern dasselbe native Abfrageereignis (Klick) auf die ursprüngliche Schaltfläche auszulösen, das ausgelöst worden wäre, wenn es keinen Bestätigungsdialog gegeben hätte. Der einzige Unterschied ist ein anderer Ereignis-Namespace (in diesem Fall "bestätigt"), sodass der Bestätigungsdialog nicht erneut angezeigt wird. Der native Jquery-Mechanismus kann dann die Kontrolle übernehmen und die Dinge können wie erwartet ablaufen. Ein weiterer Vorteil ist, dass es für Schaltflächen und Hyperlinks verwendet werden kann. Ich hoffe ich war klar genug.

6
BineG

Einfache und kurze Lösung, die ich gerade ausprobiert habe und es funktioniert

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

dann füge einfach die class = "confirm" zu deinem Link hinzu und es funktioniert!

6
user681365

Ich weiß, dass dies eine alte Frage ist, aber hier ist meine Lösung mit HTML5 Datenattribute in MVC4:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

JS-Code:

$("#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");
});
4
woggles

Wird das gehen?

$("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');
});
3
andi

Wie oben. Frühere Beiträge haben mich auf den richtigen Weg gebracht. So habe ich es gemacht. Die Idee ist, ein Bild neben jeder Zeile in der Tabelle zu haben (generiert von PHP= Skript aus der Datenbank). Wenn auf ein Bild geklickt wird, wird der Benutzer zur URL und als umgeleitet Das Ergebnis ist, dass der entsprechende Datensatz aus der Datenbank gelöscht wird, während einige Daten angezeigt werden, die sich auf den angeklickten Datensatz in jQuery UI Dialog beziehen.

Der JavaScript-Code:

$(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:

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

Bildlink:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

Auf diese Weise können Sie die Schleifenwerte von PHP= in das Dialogfeld übernehmen. Der einzige Nachteil ist die Verwendung der GET-Methode, um die Aktion tatsächlich auszuführen.

3
LukeP

Wie wäre es damit:

$("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;
});

Ich habe es bei diesem HTML getestet:

<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>

Es entfernt das gesamte li-Element, Sie können es an Ihre Bedürfnisse anpassen.

2
kgiannakakis

(Stand vom 22.03.2016, der Download auf der verlinkten Seite funktioniert nicht. Ich lasse den Link hier, falls der Entwickler ihn irgendwann repariert, da es sich um ein großartiges kleines Plugin handelt. Der ursprüngliche Beitrag folgt Alternative und ein Link, der tatsächlich funktioniert: jquery.confirm .)

Es mag für Ihre Bedürfnisse zu einfach sein, aber Sie könnten dies versuchen jQuery confirm plugin . Es ist wirklich einfach zu bedienen und erledigt die Arbeit in vielen Fällen.

2
grahamesd

Ich bin selbst darauf gestoßen und habe eine Lösung gefunden, die einigen Antworten hier ähnlich ist, aber etwas anders implementiert wurde. Ich mochte nicht viele Javascript-Teile oder irgendwo einen Platzhalter div. Ich wollte eine verallgemeinerte Lösung, die dann in HTML verwendet werden kann, ohne bei jeder Verwendung Javascript hinzuzufügen. Folgendes habe ich mir ausgedacht (dazu ist eine Abfrage erforderlich):

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");
        }
      }
    });

  });

});

Und dann werden in HTML keine Javascript-Aufrufe oder Referenzen benötigt:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

Da das title-Attribut für den div-Inhalt verwendet wird, kann der Benutzer sogar die Bestätigungsfrage erhalten, indem er mit der Maus über die Schaltfläche fährt (weshalb ich das title-Attribut für die Kachel nicht verwendet habe). Der Titel des Bestätigungsfensters ist der Inhalt des Alt-Tags. Der JavaScript-Snip kann in einem verallgemeinerten .js-Include enthalten sein. Durch einfaches Anwenden einer Klasse erhalten Sie ein hübsches Bestätigungsfenster.

1
redreinard

So sehr ich es auch hasse, eval zu benutzen, es schien mir der einfachste Weg zu sein, ohne je nach den verschiedenen Umständen viele Probleme zu verursachen. Ähnlich wie bei der Javascript-Settimeout-Funktion.

<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>
1
SethT

HINWEIS: Nicht genügend Repräsentanten, um einen Kommentar abzugeben, aber die Antwort von BineG eignet sich perfekt zur Behebung von Postback-Problemen mit ASPX-Seiten, die von Homer und Echo hervorgehoben wurden. Zu Ehren gibt es hier eine Variation, die einen dynamischen Dialog verwendet.

$('#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();  
});
0
Draghon

Die JQuery-Benutzeroberfläche bietet standardmäßig folgende Lösung:

$( 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>

Sie können dies weiter anpassen, indem Sie einen Namen für die JQuery-Funktion angeben und den gewünschten Text/Titel als Parameter übergeben.

Referenz: https://jqueryui.com/dialog/#modal-confirmation

0
stef

Ich weiß, dass diese Frage alt ist, aber ich musste zum ersten Mal einen Bestätigungsdialog verwenden. Ich denke, das ist der kürzeste Weg.

$(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;
});

Ich hoffe du magst es :)

0
Mollo

So viele gute Antworten hier;) Hier ist mein Ansatz. Ähnlich wie bei 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'
            }
        ]
    });     
}

Und die Verwendung sieht so aus:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}
0
Daniel Więcek

Persönlich sehe ich dies als eine wiederkehrende Anforderung in vielen Ansichten vieler ASP.Net MVC-Anwendungen.

Deshalb habe ich eine Modellklasse und eine Teilansicht definiert:

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; }
  }
}

Und meine Teilansicht:

@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>

Und jedes Mal, wenn Sie es in einer Ansicht benötigen, verwenden Sie einfach @ Html.Partial (in hat es in Abschnittsskripten funktioniert, damit JQuery definiert wird):

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

Der Trick besteht darin, den JQueryClickSelector anzugeben, der den Elementen entspricht, für die ein Bestätigungsdialogfeld erforderlich ist. In meinem Fall alle Anker mit der Klasse SyLinkDelete, aber es könnte ein Bezeichner, eine andere Klasse usw. sein. Für mich war es eine Liste von:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
0

Ich habe danach gesucht, dass dies für Link-Schaltflächen in einer ASP.NET-Gridview verwendet wird (in Befehle integriertes GridView-Steuerelement). Daher muss bei der Aktion "Bestätigen" im Dialogfeld ein Skript aktiviert werden, das vom Gridview-Steuerelement zur Laufzeit generiert wird. das hat bei mir geklappt:

 $(".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");
             }
         }
     });
 });
0
chinkchink

Eine andere Variante des obigen Beispiels, bei der geprüft wird, ob das Steuerelement entweder ein "asp: linkbutton" oder ein "asp: button" ist, der als zwei verschiedene HTML-Steuerelemente dargestellt wird. Scheint gut für mich zu funktionieren, hat es aber nicht ausgiebig getestet.

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

Sehr beliebtes Thema und Google findet diese für "jquery dialog close which event angeklickt" Abfrage. Meine Lösung behandelt die Ereignisse YES, NO, ESC_KEY und X ordnungsgemäß. Ich möchte, dass meine Rückruffunktion aufgerufen wird, egal wie der Dialog angeordnet wurde.

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);
});

Es ist einfach, den Browser auf eine neue URL umzuleiten oder etwas anderes für die Funktion retval auszuführen.

0
Whome