loading jqueryUI dialog() function on WordPress page

Question

I am making my first, basic attempt to make a popup window JavaScript for a WordPress site. I'm using jQueryUI's dialog() function. My expected behavior is that a popup would appear when the page loads, but this is not happening. I am using the basic example from http://jqueryui.com/dialog/#default

I made a test html page with a div that the jQuery can grab:

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

My jQueryUI script code is just this:

jQuery(document).ready(function() {

    $( "#dialog" ).dialog();

});

I've saved this script to a file popup.js.

I then enqueued the script using the following code, which works fine, as I can see the script in the HTML source of my web page:

function my_popup_script() {
    wp_enqueue_script(
        'my-popup-script',
        get_stylesheet_directory_uri() . '/js/popup.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_popup_script' );

I'm not sure where in this process I'm making an error. Thanks for your help.

do you have a link to share? if not (localhost install etc.) check your browser console log after the page load, do you have any errors? — Eran.E
– Eran.E, Commented Apr 21, 2015 at 22:31
Sorry, yes the link is dev.greenbee-web.com/lanwt/joe-test-jquery-popup-page I think the problem is I don't have a second JavaScript function that explicitly opens the dialog. I thought the dialog would open by itself, since a dialog's "autoOpen" defaults to "true", but from the examples I've read, there is always a second JavaScript function, usually with a button, to open the dialog. But...I'm still lost. Do you think I'm on the right track with a second JavaScript function to explicitly open the dialog? — LeonardShelby
– LeonardShelby, Commented Apr 21, 2015 at 23:39

Eran.E · Accepted Answer · 2015-04-22 00:47:00Z

2

it's only a jquery conflict, try this:

jQuery(document).ready(function() {

    jQuery( "#dialog" ).dialog();

});

you can use the jquery noConflict function if you want to use the jquery object as a $ sign, just put this line before all the jquery code:

var $ = jQuery.noConflict();

If you want it to Popup on click event so you can use:

var $ = jQuery.noConflict();
$(document).ready(function() {    
    $('.the_button').click(function(){     
        $( "#dialog" ).dialog();
    });    
});

edited Apr 22, 2015 at 0:47

answered Apr 21, 2015 at 23:56

Eran.E

9405 silver badges8 bronze badges

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

2 Comments

LeonardShelby Over a year ago

Yes you are right, that fixed it. Now the popup loads when the page loads. However, now that I have the basics working, I'd really like to make the popup window load only after clicking a button. Should I edit this question with my updated JavaScript code, or start an entirely new question?

LeonardShelby Over a year ago

I'd upvote your answer, but my rep is only 13. I need 15 to upvote.

Collectives™ on Stack Overflow

loading jqueryUI dialog() function on WordPress page

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related