I am creating a custom plugin on WP admin to insert data into custom MySQL tables. For almost a week I tried to make a confirmation dialog for the event of the item element in the Wordpress table. After I almost lost all my hair, looking for an answer, it seemed that it was too good and simple to be true. But it worked. Executes the code.
EDIT : It turns out that the standard jQuery wp is not working properly, and the hosted jQuery included in another class makes the right calls for JS. When I deleted the registrar / registration added below, ALL other dialog calls stopped working. I don’t know why this happened or the version of jQuery included in this particular WP distribution, but when I returned to the old registrations using scripts hosted by Google, as shown below, everything returned to normal.
In PHP (register first 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'); }
Then, if you open a dialog in a click event, for example, I, make sure that you ALWAYS use the 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 contains the text of the dialog. I needed to set the style to hide the div.
<div id="dialog_id" style="display: none;"> Are you sure about this? </div>
Finally, 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 : calling the standard wp dialog style does not work. The pepper-sharpener style launched a dialogue in the center of the window. I know that the look of the dialog box is not very easy on the eye, but I need a confirmation dialog, and it worked fine for me.