jQuery UI Dialog - Uncaught TypeError in Wordpress

Question

I am attempting to implement a jQuery UI dialog in Wordpress 4.5.3, but it only works about half the time. The rest of the time I get the following error:

Uncaught TypeError: jQuery(...).dialog is not a function  lwr_jquery_dialog.js(2)

I have enqueued the scripts as follows, and verified they load in the correct order on the page:

function enqueue_jquery_dialog() {

    wp_enqueue_script('jquery-ui-dialog', false, array('jquery','jquery-ui-core'), 
        false, true );
    wp_enqueue_script('lwr_dialog', get_stylesheet_directory_uri() . 
        '/js/lwr_jquery_dialog.js', array('jquery-ui-dialog') );        
}
add_action( 'wp_enqueue_scripts', 'enqueue_jquery_dialog' );

In lwr_jquery_dialog.js I have:

jQuery(document).ready(function() {
    jQuery('#dialog').dialog({
        width: 600,
        modal: true,
        resizable: false,
        draggable: false,
    });
});

And here's the actual dialog function in functions.php

function add_jquery_dialog() {
    ?>  
    <div id="dialog" title="Today Only">
            DIALOG TEXT HERE
    </div>
<?php
}
add_action('wp_footer', 'add_jquery_dialog');

Half the time sounds like a script is not in the right order, and just so happens to either be cached the second time or loads just-in-time that you don't notice it being an issue the first time. Check the order of your scripts and ensure jquery-UI is loaded after the main jquery library. if it's not that, stay open-minded about it when you look at the code again - if it happens to be something like this let me know and I'll make an answer of it! — Jonathan
– Jonathan, Commented Aug 7, 2016 at 1:21

James Vu · Accepted Answer · 2016-08-09 01:10:11Z

2

+50

Update 1: You're missing jquery-ui-dialog script. Try this instead:

add_action('wp_enqueue_scripts', function()
{
  $theme_uri = get_stylesheet_directory_uri();

  wp_enqueue_script('lwr-jquery-dialog', $theme_uri . '/js/lwr_jquery_dialog.js',
['jquery-ui-core', 'jquery-ui-dialog'], false, true);
}, 10, 0);

Since you're using false as value of source file, the dependencies are not enqueued correctly. See $src param from wp_enqueue_script() function for more info.

Try this:

add_action('wp_enqueue_scripts', function()
{
  $theme_uri = get_stylesheet_directory_uri();

  wp_enqueue_script('lwr-jquery-dialog', $theme_uri . '/js/lwr_jquery_dialog.js',
['jquery-core', 'jquery-ui-core'], false, true);
}, 10, 0);

edited Aug 9, 2016 at 1:10

answered Aug 7, 2016 at 13:10

James Vu

2,4713 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dpruth Over a year ago

Even when it fails, I've verified in the html source that the files are loading in the correct order. I tried this, but with no additional luck.

James Vu Over a year ago

@dpruth I have made a test and updated the answer. Hope it works this time.

dpruth Over a year ago

My script above includes jquery-ui-dialog. But I did update the wp_enqueue_script function with your suggestion (taking out "FALSE") and it seems to be working now. Thanks!

Collectives™ on Stack Overflow

jQuery UI Dialog - Uncaught TypeError in Wordpress

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related