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

148

Ich versuche, JQuery UI Dialog zu verwenden, um die hässliche javascript:alert()Box zu ersetzen . In meinem Szenario habe ich eine Liste von Elementen, und neben jedem einzelnen von ihnen würde ich für jedes eine Schaltfläche "Löschen" haben. Das Pseudo-HTML-Setup wird wie folgt aussehen:

<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, wenn das Dokument fertig ist, würde ich zuerst das div als modalen Dialog mit der erforderlichen Schaltfläche einrichten und die "a", die ausgelöst werden sollen, auf Bestätigung setzen, bevor sie entfernt werden, wie:

$("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 Initialisierungszeit hat der Dialog keine Ahnung, wer (Element) es startet, und auch die Element-ID (!). Wie kann ich das Verhalten dieser Bestätigungsschaltflächen einrichten, um, wenn der Benutzer immer noch JA wählt, dem Link zu folgen, um sie zu entfernen?

xandy
quelle
Es gibt ein einfach zu verwendendes Plugin, um dies hier zu tun: stackoverflow.com/questions/6457750/form-confirm-before-submit
1
Looooong suchte nach einer Lösung: stackoverflow.com/a/18474005/1876355
Pierre

Antworten:

166

Ich musste nur das gleiche Problem lösen. Der Schlüssel, um dies zum Laufen zu bringen, war, dass das dialogteilweise in der initialisiert werden mussclick Ereignishandler für den Link, mit dem Sie die Bestätigungsfunktion verwenden möchten, (wenn Sie dies für mehr als einen Link verwenden möchten). Dies liegt daran, dass die Ziel-URL für den Link in den Ereignishandler eingefügt werden muss, damit die Bestätigungsschaltfläche angeklickt wird. Ich habe eine CSS-Klasse verwendet, um anzugeben, welche Links das Bestätigungsverhalten haben sollen.

Hier ist meine Lösung, die abstrahiert wurde, 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 generieren können (confirmLink in meinem Beispiel).

Hier ist eine jsfiddle mit dem Code darin.

Im Interesse einer vollständigen Offenlegung werde ich feststellen, dass ich einige Minuten mit diesem speziellen Problem verbracht habe und eine ähnliche Antwort auf diese Frage gegeben habe , die zu diesem Zeitpunkt ebenfalls ohne akzeptierte Antwort war.

Paul Morie
quelle
2
+1 funktioniert fast ... aber siehe Antwort von @lloydphillips für eine Korrektur
rohancragg
Hat jemand anderes bemerkt, dass dies zu einem vollständigen PostBack in einem UpdatePanel führt? Wie behebt man das?
Homer
3
Diese Antwort und die Antworten von @lloydphillips haben etwas, das es für mich einfach nicht ganz tut. Die ursprüngliche Frage bezieht sich auf eine Schaltfläche "Löschen" (Link). Im Allgemeinen ist es nicht ratsam, einen Link (HTTP GET) für eine Operation zu verwenden, die den Status ändert (z. B. DELETE). Bei beiden Antworten wird davon ausgegangen, dass für den Benutzer Javascript aktiviert ist. Wenn Javascript deaktiviert ist, werden die Links ausgelöst und der Löschvorgang (oder was auch immer) wird ohne Bestätigung ausgelöst, was katastrophal sein kann. Ich hatte gehofft, eine Antwort zu finden, die sich mit diesem Thema befasste.
Echo
@echo: Ich dachte über das gleiche. Um es richtig zu machen, muss es meiner Meinung nach eine andere Seite geben, die nach einer Bestätigung fragt, wenn JS deaktiviert ist. Bei JS könnte diese Seite weggelassen werden. Möglicherweise durch einen anderen get-Parameter wie bestätigt = wahr. Es ist wirklich schwierig und umständlich, Fälle mit und ohne JS zu berücksichtigen. Webentwicklung ist ein Chaos.
Robsch
1
@sree Sicher. Sie können eine Funktion extrahieren, die den Namen der ID als Parameter verwendet und die jQuery-Aufrufe zum Einrichten der Ereignishandler für die übergebene ID ausführt.
Paul Morie
59

Ich fand, dass die Antwort von Paul nicht ganz funktionierte, da die Art und Weise, wie er die Optionen einstellte, nachdem der Dialog beim Klickereignis instanziiert wurde, falsch war. Hier ist mein Code, der funktioniert hat. Ich habe es nicht auf Pauls Beispiel zugeschnitten, aber es ist nur der Unterschied eines Katzenschnurrhaars in Bezug auf einige Elemente, die unterschiedlich benannt sind. Sie sollten in der Lage sein, es herauszufinden. 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, das hilft jemand anderem, da dieser Beitrag mich ursprünglich auf den richtigen Weg gebracht hat. Ich dachte, ich sollte die Korrektur besser veröffentlichen.

lloydphillips
quelle
1
Ich sehe nicht, was du getan hast, das war anders als Pauls Antwort.
Grant Birchmeier
2
Sieht gut für mich aus. Das einzige, was ich vorschlagen würde, wäre, onstattdessen zu verwenden click, da dies weiterhin funktioniert, wenn (zum Beispiel) das Feld mit jQuery - api.jquery.com/on
Aaron Newton
1
hah "Unterschied zwischen Katzenschnurrhaaren" - ich muss diesen Satz mehr verwenden.
Chad Gorshing
27

Ich habe eine eigene Funktion für einen Bestätigungsdialog für die Abfrage 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.

D-Codierer
quelle
Dies ist eine gute Lösung, die meiner sehr ähnlich ist, die ich zum Abrufen von Ajax-URLs und zur schnellen Anzeige verwende ... Funktion JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.mysite.com'> </ div>"); $ ("# dialog"). load (url) .dialog ({Größe ändern: false, Breite: 770, Höhe: 470, modal: true, Schaltflächen: {"Schließen": function () {$ (this) .dialog ( "close"); $ ("# dialog"). remove ();}}}); }
Conners
6

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

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

Dann füge einfach die Klasse = "Bestätige" zu deinem Link hinzu und es funktioniert!

user681365
quelle
Die Textnachricht fragt "Sicher?" gibt aber keine Wahl zwischen Ja / Nein, OK / Abbrechen. Wie gibt der Benutzer an, ob er "sicher" oder "nicht sicher" ist?
Genki
6

Dies ist meine Lösung. Ich hoffe, es hilft jedem. Es ist spontan geschrieben anstatt kopiert, also verzeihen Sie mir alle 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 Sie auf die Bestätigungsschaltfläche klicken, besteht die Lösung nicht darin, einen Linkklick zu simulieren, sondern dasselbe native Abfrageereignis (Klick) auf die ursprüngliche Schaltfläche auszulösen, die ausgelöst worden wäre, wenn es keinen Bestätigungsdialog gegeben hätte. Der einzige Unterschied besteht in einem anderen Ereignis-Namespace (in diesem Fall "bestätigt"), sodass der Bestätigungsdialog nicht erneut angezeigt wird. Der native Jquery-Mechanismus kann dann übernehmen und die Dinge können wie erwartet laufen. Ein weiterer Vorteil ist, dass es für Schaltflächen und Hyperlinks verwendet werden kann. Ich hoffe ich war klar genug.

BineG
quelle
Bearbeiten Sie Ihren Beitrag und teilen Sie der Community mit, warum Sie diese Lösung bevorzugen. Was macht es besser für dich?
Fuzzical Logic
Ich habe den Beitrag bearbeitet. Ich hoffe es macht jetzt mehr Sinn. Als ich es schrieb, schien es so klar, dass es keinen Kommentar brauchte. Was für ein Unterschied, als ich es nach einer Weile wieder besuchte ... :)
BineG
Eine tolle wie sehr saubere Lösung! Lesen Sie noch nie zuvor über Ereignis-Namespaces. Dank dafür!
Griffla
BEAAUUTIFULLL! "..aber um das gleiche native jquery-Ereignis auszulösen (klicken) auf die ursprüngliche Schaltfläche .." klingt wunderschön !! Danke für $("#btn").trigger("click.confirmed");
Irf
4

Ich weiß , dass dies eine alte Frage, aber hier ist meine Lösung HTML5 mit Datenattributen 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");
});
Woggles
quelle
Ich mag diese Lösung, danke. Leicht zu verstehen und funktioniert für mich. Ich habe den Teil @ Url.Action nicht verwendet, aber er funktioniert mit einer URL, die von meiner serverseitigen MVC (PHP / Symfony2) generiert wurde.
Fazy
3

Wird das reichen?

$("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');
});
und ich
quelle
Danke für diese Antwort. Ich bin sicher, ich werde es testen (und dennoch sieht es funktional aus). Eines der Probleme, die ich aus vielen Antworten hier gesehen habe, ist die mangelnde Allgemeinheit. Wenn die Seite über andere Steuerelemente (oder Links usw.) verfügt, die bestätigt werden müssen, benötigen wir anscheinend mehrere Deklarationen für die Interaktion / Aktion. Der alte Javascript-Weg, dh href = "Javascript: bestätige ('link_url');" ist einfach und elegant und passt zu allen ähnlichen Fällen. Natürlich ist die Javascript-Methode zu aufdringlich, als dass Leute ohne Javascript den Link komplett verpassen würden. Nochmals vielen Dank für die tolle Antwort.
Xandy
3

Wie oben. Frühere Beiträge haben mich auf den richtigen Weg gebracht. So habe ich es gemacht. Die Idee ist, neben jeder Zeile in der Tabelle ein Bild zu haben (generiert durch ein PHP-Skript aus der Datenbank). Wenn Sie auf ein Bild klicken, wird der Benutzer zur URL umgeleitet. Infolgedessen wird der entsprechende Datensatz aus der Datenbank gelöscht, während einige Daten zum angeklickten Datensatz im jQuery UI-Dialogfeld angezeigt werden.

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 PHP-Schleifenwerte in das Dialogfeld übergeben. Der einzige Nachteil ist die Verwendung der GET-Methode, um die Aktion tatsächlich auszuführen.

LukeP
quelle
2

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.

kgiannakakis
quelle
2

(Ab dem 22.03.2016 funktioniert der Download auf der mit verlinkten Seite nicht mehr. Ich lasse den Link hier, falls der Entwickler ihn irgendwann behebt, weil es sich um ein tolles kleines Plugin handelt. Der ursprüngliche Beitrag folgt Alternative und ein Link, der tatsächlich funktioniert: jquery.confirm .)

Es mag für Ihre Anforderungen zu einfach sein, aber Sie können dieses jQuery-Bestätigungs-Plugin ausprobieren . Es ist sehr einfach zu bedienen und erledigt die Arbeit in vielen Fällen.

grahamesd
quelle
Der Link führt mich zu einem verlinkten Profil. Anscheinend können Sie das Plugin nur sehen, wenn Sie ein Premium-Mitglied sind.
Zane
Ich habe den Link aktualisiert, damit er wieder funktioniert. Die Entwicklerin muss den alten Link zu ihrem LinkedIn-Profil umleiten. Wenn sie es erneut ändert, googeln Sie es einfach mit "jquery verify plugin nadia".
Grahamesd
Vielen Dank! Obwohl ich meine Version jetzt bereits implementiert habe, werde ich trotzdem einen Blick darauf werfen.
Zane
Der Link ist wieder tot
Valamas
1

So sehr ich es auch hasse, eval zu verwenden, es schien mir der einfachste Weg zu sein, ohne abhängig von 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>
SethT
quelle
1

Ich bin selbst darauf gestoßen und habe eine Lösung gefunden, die mehreren Antworten hier ähnelt, aber etwas anders implementiert ist. Ich mochte nicht viele Javascript-Stücke oder irgendwo ein 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 (dies erfordert 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");
        }
      }
    });

  });

});

Und dann werden in HTML keine Javascript-Aufrufe oder Verweise 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 die Bestätigungsfrage sogar 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 ein verallgemeinertes .js-Include aufgenommen werden. Durch einfaches Anwenden einer Klasse erhalten Sie ein hübsches Bestätigungsfenster.

Redreinard
quelle
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
quelle
0

HINWEIS: Nicht genügend Mitarbeiter, um Kommentare abzugeben, aber die Antwort von BineG funktioniert perfekt bei der Lösung von Postback-Problemen mit ASPX-Seiten, wie von Homer und Echo hervorgehoben. 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();  
});
Draghon
quelle
0

Eine weitere Variante des oben Gesagten, bei der überprüft wird, ob das Steuerelement entweder ein 'asp: linkbutton' oder ein 'asp: button' ist, der als zwei verschiedene HTML-Steuerelemente dargestellt wird. Scheint für mich gut zu funktionieren, habe 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");
        });
Drauka
quelle
0

Ich habe danach gesucht, um dies für Link-Schaltflächen in einem ASP.NET-Gridview zu verwenden (in Befehle eingebautes GridView-Steuerelement). Daher muss die Aktion "Bestätigen" im Dialogfeld ein vom Gridview-Steuerelement zur Laufzeit generiertes Skript aktivieren. das hat bei mir funktioniert:

 $(".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");
             }
         }
     });
 });
Chinkchink
quelle
eval () kann schädlich sein! Übrigens muss ich diesen Teil Ihres Codes zitieren: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);Das macht überhaupt keinen Sinn!
Sk8erPeter
0

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

Mollo
quelle
0

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

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 dann verwenden Sie jedes Mal, wenn Sie es in einer Ansicht benötigen, einfach @ Html.Partial (in Abschnittsskripten, 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, die einen Bestätigungsdialog benötigen. 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>
Frederick Samson
quelle
ASP.Net MVC mit jQuery.
Frederick Samson
0

Sehr beliebtes Thema und Google findet dies für die Abfrage "JQuery-Dialog schließen, auf welches Ereignis geklickt wurde". Meine Lösung behandelt YES-, NO-, ESC_KEY- und X-Ereignisse ordnungsgemäß. Ich möchte, dass meine Rückruffunktion aufgerufen wird, unabhängig davon, 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 Funktionsüberholung auszuführen.

Wen
quelle
0

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 aus wie:

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

Die JQuery-Benutzeroberfläche bietet sofort 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 Text / Titel übergeben, der als Parameter angezeigt werden soll.

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

stef
quelle
-1

Nun, das ist die Antwort auf Ihre Fragen ...

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

Stellen Sie sicher, dass Sie jquery 1.4.4 und jquery.ui haben

Costa
quelle
Dies ist einer der hässlichsten Codes, die ich seit Jahren gesehen habe. Sie verwenden veraltete Attribute (wie LANGUAGE="JavaScript"), verwenden gemischte Groß- und Kleinbuchstaben, mischen unnötigerweise einfache JS-Codes mit jQuery-Codes und setzen Stile mit JS anstelle von CSS (hässlich und semantisch falsch) und übrigens mit Ihrem Stil Eine Änderung (mit einfachem JS) ist in Bezug auf die ursprüngliche Frage absolut irrelevant. Sie sollten Ihren Code auf jeden Fall kürzen und verschönern und sich auf die Beantwortung der ursprünglichen Frage konzentrieren.
Sk8erPeter
-1

Einfacher Weg mit einem Hauch von 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
quelle
2
Es ging speziell darum, die Verwendung der Standard-Javascript-Funktionen Alert / Confirm usw. zu vermeiden. Dies ist also keine Lösung für die Frage.
Redreinard