12

I am attempting to use the jQuery UI dialog script in my Wordpress theme admin page. Everything is straight from the UI demo and yet I end up with a dialog box where the dialog is not popped up over anything and instead buried in bottom corner, just before the closing body tag.

The UI dialog script is queued properly w/ wp_enqueue_script as its shows up in the source code as does jquery (from google API) and the UI core. 

jQuery(document).ready(function($) {
    $("#dialog").dialog();
}); //end onload stuff

Then I have this in my options page:

<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>
Improve this question
2
  • well i solved it. looked at the demo again and there are apparently quite a few scripts being enqueued that aren't mentioned as dependencies. jquery.bgiframe-2.1.1.js.js , jquery.ui.widget.js , jquery.ui.mouse.js ,jquery.ui.draggable.js" ,jquery.ui.position.js , jquery.ui.resizable.js all seem to be needed in addition to the obvious jquery.ui.dialog.js Commented Jul 7, 2010 at 16:54
  • The link is broken. Commented Jul 23, 2018 at 20:53

4 Answers 4

Reset to default
32

You should be all ready to go. WP already has dialog and styles for it.

Here are the steps to use it:

  1. Write the jQuery for creating the dialog box - you must use the dialogClass of wp-dialog
  2. Enqueue the above file on init using the proper dependencies (jquery-ui-dialog)
  3. Enqueue the proper WP styles (wp-jquery-ui-dialog)

For example:

// custom.js
jQuery(function($) {
    var $info = $("#modal-content");
    $info.dialog({                   
        'dialogClass'   : 'wp-dialog',           
        'modal'         : true,
        'autoOpen'      : false, 
        'closeOnEscape' : true,      
        'buttons'       : {
            "Close": function() {
                $(this).dialog('close');
            }
        }
    });
    $("#open-modal").click(function(event) {
        event.preventDefault();
        $info.dialog('open');
    });
});

In your PHP

add_action( 'admin_enqueue_scripts', 'queue_my_admin_scripts');

function queue_my_admin_scripts() {
    wp_enqueue_script (  'my-spiffy-miodal' ,       // handle
                        URL_TO_THE_JS_FILE  ,       // source
                        array('jquery-ui-dialog')); // dependencies
    // A style available in WP               
    wp_enqueue_style (  'wp-jquery-ui-dialog');
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

once i made the following adjustments, this worked perfectly. 1. i got $info is not defined errors, b/c it is initially definded as $modalContents. so i replaced $modalContents w/ $info. 2. instead of enqueing this everywhere on the front-end... i added it to admin_init. could probably get more specific to my particular admin page. THANKS!
@helga - Yeah, using $info was a typo, and admin__init is better - Thanks!
Oh my, really ugly dialog. I hope WordPress peeps improve the look of it. The X-closing button looks like it's from some other program, and whats with the borders? At least the WP native button look can be attained with this: 'buttons' : [{'text' : 'Close', 'class' : 'button-primary', 'click' : function() { $(this).dialog('close');} }] (notice the button-primary class)
@Ciantic WordPress is open source, so you can contribute your change. Check out the following link make.wordpress.org/core
6

I manged to show the dialog using the following code (but styling was not applied!):

add_action('init', 'myplugin_load');

function myplugin_load(){
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-dialog' );
}

When calling it used:

$("#dialog-view").dialog({
   height: 240,
   modal: true
});
Improve this answer

1 Comment

if you enqueue jquery-ui-dialog its dependencies will also automatically be enqueued, so you don't need to add jquery and jquery-ui-core. You can just enqueue your JS like: wp_enqueue_script('my-script-handle', URL_TO_MY_SCRIPT, array('jquery-ui-dialog'));
1

I don't know if it makes any difference (because I'm not in the right place to do any testing at the moment), but maybe try the code exactly as it is on the jQuery UI site:

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

Best of luck! ^.^

Improve this answer

1 Comment

thanks, but that doesn't solve it. i've read that you have to use jQuery(document).ready(function($) { }); to wrap jquery functions in WP and have found that to be true w/ the couple other things i have managed to make work
1

Step 1: Add Script :

wp_enqueue_script( 'jquery-ui-dialog' );// in your function.php or plugin

Step 2: Create Dialog Box :

  <div id="dialog-content" style="display:none;" class="dialog-content"> <div style="padding:100px;text-align:center;">Your Custom Content </div></div>

Create a hidden content box. So you can show it as a dialog box. Finally attach a click event to a button to call the dialog box.

Step 3: Call the Dialog :

  //attach a click event then call the dialog 
  $('#dialog-calling-btn').click(function () {

    $("#dialog-content").dialog({
      'dialogClass': 'wp-dialog email-quote-box',
      'title': 'Title',
      'modal': true,
      'autoOpen': true,
      'closeOnEscape': true,
      'height': 500,
      'width': 360
    });
  })
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.