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?
quelle
Antworten:
Ich musste nur das gleiche Problem lösen. Der Schlüssel, um dies zum Laufen zu bringen, war, dass das
dialog
teilweise 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.
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.
quelle
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.
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.
quelle
on
stattdessen zu verwendenclick
, da dies weiterhin funktioniert, wenn (zum Beispiel) das Feld mit jQuery - api.jquery.com/onIch habe eine eigene Funktion für einen Bestätigungsdialog für die Abfrage erstellt. Hier ist der Code
Um dies nun in Ihrem Code zu verwenden, schreiben Sie einfach Folgendes
Mach weiter.
quelle
Einfache und kurze Lösung, die ich gerade ausprobiert habe und die funktioniert
Dann füge einfach die Klasse = "Bestätige" zu deinem Link hinzu und es funktioniert!
quelle
Dies ist meine Lösung. Ich hoffe, es hilft jedem. Es ist spontan geschrieben anstatt kopiert, also verzeihen Sie mir alle Fehler.
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.
quelle
$("#btn").trigger("click.confirmed");
Ich weiß , dass dies eine alte Frage, aber hier ist meine Lösung HTML5 mit Datenattributen in MVC4:
JS-Code:
quelle
Wird das reichen?
quelle
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:
Dialog div:
Bildlink:
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.
quelle
Wie wäre es damit:
Ich habe es bei diesem HTML getestet:
Es entfernt das gesamte li-Element, Sie können es an Ihre Bedürfnisse anpassen.
quelle
(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.
quelle
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.
quelle
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:
Und dann werden in HTML keine Javascript-Aufrufe oder Verweise benötigt:
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.
quelle
quelle
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.
quelle
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.
quelle
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:
quelle
var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);
Das macht überhaupt keinen Sinn!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.
Ich hoffe du magst es :)
quelle
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:
Und meine Teilansicht:
Und dann verwenden Sie jedes Mal, wenn Sie es in einer Ansicht benötigen, einfach @ Html.Partial (in Abschnittsskripten, damit JQuery definiert wird):
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:
quelle
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.
Es ist einfach, den Browser auf eine neue URL umzuleiten oder etwas anderes für die Funktionsüberholung auszuführen.
quelle
So viele gute Antworten hier;) Hier ist mein Ansatz. Ähnlich wie bei eval ().
Und die Verwendung sieht aus wie:
quelle
Die JQuery-Benutzeroberfläche bietet sofort folgende Lösung:
HTML
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
quelle
Nun, das ist die Antwort auf Ihre Fragen ...
Stellen Sie sicher, dass Sie jquery 1.4.4 und jquery.ui haben
quelle
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.Einfacher Weg mit einem Hauch von Javascript
quelle