Using jQuery UI dialog in Wordpress

WordPress jQuery is called in no-conflict mode:

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

Also jQuery UI is loading before jQuery. You're getting 2 javascript errors:

Uncaught ReferenceError: jQuery is not defined

103Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

The first error is from jQuery UI loading before jQuery and the second is because the $ is not recognized in no-conflict mode.

Remove any of the inline <script src= tags and the call to the custom.css in header php and add this function to your child theme functions.php file to load the scripts. WordPress will put them in the right order for you.

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

I'm building a custom plugin on WP admin to insert data on custom MySQL tables. For nearly a week I was trying to do a confirmation dialog for a delete item event on a Wordpress table. After I almost lost all my hair searching for an answer, it seemed too good and simple to be true. But worked. Follows the code.

EDIT: turns out that the wp standard jquery wasn't working properly, and the Google hosted jQuery included in another class was making the correct calls for the JS. When I removed the unregister/register added below, ALL the other dialog calls stopped working. I don't know why this happened, or the jQuery version included in this particular WP distribution, but when I returned to the old registrations, using Google hosted scripts as seen below, everything went back to normality.

On PHP (first, register and call the script):

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

Next, if you're opening the dialog on a click event, like me, make sure you ALWAYS use class instead of id to identify the button or link later, on jQuery.

<a class="delete" href="?page=your_plugin&action=delete">Delete</a>

We also need to use a tag that holds the dialog text. I needed to set the style to hide the div.

<div id="dialog_id" style="display: none;">    Are you sure about this?</div>

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

EDIT: The call for the standard wp dialog style didn't work after all. The "pepper-grinder" style made the dialog appear correctly in the center of the window. I know the looks for the dialog are not very easy on the eye, but i needed the confirmation dialog and this worked just fine for me.

The dialog div is created AFTER when you're trying to act upon it. Instead, you should use:

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