<script>
jQuery(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
aber keine Würfel. Mein Div wird als Standard-Div angezeigt.
Irgendwelche Ideen? Ich weiß, dass das Top-Stylesheet mit Enqueue aufgerufen werden sollte, aber das sollte dies nicht daran hindern, zu funktionieren.
Chris_O
WordPress jQuery wird im konfliktfreien Modus aufgerufen:
Außerdem wird die jQuery-Benutzeroberfläche vor jQuery geladen. Sie erhalten 2 Javascript-Fehler:
Nicht erfasster Referenzfehler: jQuery ist nicht definiert
103Uncaught TypeError: Eigenschaft ‘$’ des Objekts [object DOMWindow] ist keine Funktion
Der erste Fehler stammt vom Laden der jQuery-Benutzeroberfläche vor jQuery und der zweite, weil das $ im konfliktfreien Modus nicht erkannt wird.
Entfernen Sie alle Inline <script src= Tags und den Aufruf der custom.css im Header php und fügen Sie diese Funktion zu Ihrer Datei functions.php des untergeordneten Themas hinzu, um die Skripte zu laden. WordPress bringt sie für Sie in die richtige Reihenfolge.
Ich baue ein benutzerdefiniertes Plugin auf WP Admin, um Daten in benutzerdefinierte MySQL-Tabellen einzufügen. Fast eine Woche lang habe ich versucht, einen Bestätigungsdialog für ein Ereignis zum Löschen von Elementen in einer WordPress-Tabelle zu erstellen. Nachdem ich bei der Suche nach einer Antwort fast alle Haare verloren hatte, schien es zu gut und einfach, um wahr zu sein. Aber funktioniert. Folgt dem Code.
BEARBEITEN: Es stellte sich heraus, dass die wp-Standard-jQuery nicht richtig funktionierte und die von Google gehostete jQuery, die in einer anderen Klasse enthalten war, die richtigen Aufrufe für das JS durchführte. Als ich das unten hinzugefügte Abmelden/Registrieren entfernte, funktionierten ALLE anderen Dialogaufrufe nicht mehr. Ich weiß nicht, warum dies passiert ist oder welche jQuery-Version in dieser speziellen WP-Distribution enthalten ist, aber als ich zu den alten Registrierungen zurückkehrte und von Google gehostete Skripte wie unten gezeigt verwendete, kehrte alles zur Normalität zurück.
Auf PHP (zuerst registrieren und das Skript aufrufen):
add_action('admin_init', 'init_scripts_2');
function init_scripts_2(){
///deregister the WP included jQuery and style for the dialog and add the libs from Google
wp_deregister_script('jquery-ui');
wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');
wp_deregister_style('jquery-ui-pepper-grinder');
wp_register_style('jquery-ui-pepper-grinder', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css');
wp_enqueue_script('jquery-ui'); ///call the recently added jquery
wp_enqueue_style('jquery-ui-pepper-grinder'); ///call the recently added style
wp_deregister_script('prevent_delete'); ///needed the deregister. why? don't know, but worked
///register again, localize and enqueue your script
wp_register_script('prevent_delete', WP_PLUGIN_URL . '/custom_plugin/js/prevent_delete.js', array('jquery-ui'));
wp_localize_script('prevent_delete', 'ajaxdelete', array('ajaxurl' => admin_url('admin-ajax.php')));
wp_enqueue_script('prevent_delete');
}
Als nächstes, wenn Sie den Dialog auf einem Click-Event öffnen, wie ich, stellen Sie sicher, dass Sie IMMER class anstelle von id verwenden, um die Schaltfläche oder den Link später in jQuery zu identifizieren.
Wir müssen auch ein Tag verwenden, das den Dialogtext enthält. Ich musste den Stil festlegen, um das div zu verbergen.
<div id="dialog_id" style="display: none;">
Are you sure about this?
</div>
Schließlich die jQuery.
/*jslint browser: true*/
/*global $, jQuery, alert*/
jQuery(document).ready(function ($) {
"use strict";
///on class click
$(".delete").click(function (e) {
e.preventDefault(); ///first, prevent the action
var targetUrl = $(this).attr("href"); ///the original delete call
///construct the dialog
$("#dialog_id").dialog({
autoOpen: false,
title: 'Confirmation',
modal: true,
buttons: {
"OK" : function () {
///if the user confirms, proceed with the original action
window.location.href = targetUrl;
},
"Cancel" : function () {
///otherwise, just close the dialog; the delete event was already interrupted
$(this).dialog("close");
}
}
});
///open the dialog window
$("#dialog_id").dialog("open");
});
});
BEARBEITEN: Der Aufruf für den Standard-wp-Dialogstil hat doch nicht funktioniert. Der “Pfeffermühlen”-Stil ließ den Dialog korrekt in der Mitte des Fensters erscheinen. Ich weiß, dass das Aussehen des Dialogs nicht sehr angenehm für das Auge ist, aber ich brauchte den Bestätigungsdialog und das hat für mich gut funktioniert.
Gary Grün
Das Dialog-Div wird erstellt, NACHDEM Sie versuchen, darauf zu reagieren. Stattdessen sollten Sie Folgendes verwenden:
Ich habe meinen Code mit dem geändert, was Sie haben, aber keine Änderung. Ich folge dem Code von hier: jqueryui.com/demos/dialog
– Chris Cummings
26. April 2011 um 14:44 Uhr
Mit der Ausnahme, dass ich (von anderen Seiten) in einer WP-Installation festgestellt habe, dass das erste $ aufgrund eines Konflikts mit einem anderen Plugin durch jQuery ersetzt werden muss.
– Chris Cummings
26. April 2011 um 14:45 Uhr
Kannst du tun alert(jQuery) um zu sehen, ob es geladen ist, oder um nach Fehlern in der Konsole zu suchen?
– Gary Grün
26. April 2011 um 14:56 Uhr
10032700cookie-checkVerwenden des jQuery-UI-Dialogs in WordPressyes