Verwenden des jQuery-UI-Dialogs in WordPress

Lesezeit: 6 Minuten

Ich weiß, dass es mindestens einen anderen Beitrag zu SO gibt, der sich damit befasst, aber die Antwort wurde nie genau dargelegt.

Ich arbeite in einem WP-Child-Theme im Dokument head.php. Ich habe das in den Kopf eingefügt:

<link type="text/css" href="http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />  


<?php
    wp_enqueue_style('template-style',get_bloginfo('stylesheet_url'),'',version_cache(),'screen');
    wp_enqueue_script('jquery-template',get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
    wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css'); 
    wp_enqueue_script('jq-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js '); 
    wp_enqueue_script('jq-ui-min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js' );   
?>

und ich habe dies im Körper hinzugefügt:

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

Verwenden des jQuery UI Dialogs in Wordpress
Chris_O

WordPress jQuery wird im konfliktfreien Modus aufgerufen:

jQuery(document).ready(function($) {
  $('#dialog' ).dialog();
});

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.

add_action( 'init', 'frontporch_enqueue_scripts' );
function frontporch_enqueue_scripts() {
    if (!is_admin() ) {
        wp_enqueue_script( 'jquery' );
        wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) );
        wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
        wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);
        wp_register_style( 'template-style', 'http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css', true); 
        wp_enqueue_style( 'jquery-style' );
        wp_enqueue_style( ' jquery-template' );
        wp_enqueue_script( 'google-jquery-ui' );
        wp_enqueue_script( 'jquery-template' );
    }       
}

Verwenden des jQuery UI Dialogs in Wordpress
Pablo

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.

<a class="delete" href="https://stackoverflow.com/questions/5790820/?page=your_plugin&action=delete">Delete</a>

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.

1647295750 133 Verwenden des jQuery UI Dialogs in Wordpress
Gary Grün

Das Dialog-Div wird erstellt, NACHDEM Sie versuchen, darauf zu reagieren. Stattdessen sollten Sie Folgendes verwenden:

$(document).ready(function() {
  $( "#dialog" ).dialog();
});

  • 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

1003270cookie-checkVerwenden des jQuery-UI-Dialogs in WordPress

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy