Loading jqueryUI dialog () function on WordPress page
I'm making my first, basic attempt at creating a JavaScript popup for a WordPress site. I am using jQueryUI dialog () function. My expected behavior is that when the page loads, a popup appears, but it doesn't. I am using a basic example from http://jqueryui.com/dialog/#default
I made a test html page with a div that 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:
jQuery(document).ready(function() {
$( "#dialog" ).dialog();
});
I saved this script to a file popup.js
.
Then I highlighted the script using the following code, which works great 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 am making the mistake. Thanks for your help.
source to share
this is only jquery conflict , try this:
jQuery(document).ready(function() {
jQuery( "#dialog" ).dialog();
});
you can use jQuery noConflict function, if you want to use jquery object as $ sign, just put this line before all jquery code:
var $ = jQuery.noConflict();
If you want it to pop up on click event so you can use:
var $ = jQuery.noConflict();
$(document).ready(function() {
$('.the_button').click(function(){
$( "#dialog" ).dialog();
});
});
source to share