I am trying to get the jQuery UI Dialog to work with WordPress. I saw this post(<a href="https://stackoverflow.com/questions/5790820/using-jquery-ui-dialog-in-wordpress">Using jQuery UI dialog in Wordpress</a>) and I attempted the solution but it is not working for me. In case it matters, I am using a child theme based on the twentyeleven theme.
I put this directly in front of the wp_head() function in php:
<em>I noticed that the twentyeleven theme or the child theme doesn't actually have that third script(template.js), but I don't think that is causing the problem.</em>
Then I added this at the bottom of the HEAD tag:
I get the following error in the Error Console when I load the page:
<blockquote>
<strong>Error: $ is not a function</strong>
</blockquote>
The page where this is occurring is <a href="http://www.dynamicpalette.com/esprit/" rel="nofollow noreferrer">here</a> if that will help you diagnose the problem. Thanks for any help!
I put this directly in front of the wp_head() function in php:
Code:
function frontporch_enqueue_scripts() {
if (!is_admin() ) {
wp_enqueue_script( 'jquery' );
wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) );
wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);
wp_enqueue_style( 'jquery-style' );
wp_enqueue_script( 'google-jquery-ui' );
wp_enqueue_script( 'jquery-template' );
}
}
add_action( 'init', 'frontporch_enqueue_scripts' );
<em>I noticed that the twentyeleven theme or the child theme doesn't actually have that third script(template.js), but I don't think that is causing the problem.</em>
Then I added this at the bottom of the HEAD tag:
Code:
<script type="text/javascript">
$( "#markte_area" ).dialog({
autoOpen: false,
});
jQuery(document).ready(function($){
jQuery( "#markte_link" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
}); //end document ready
</script>
I get the following error in the Error Console when I load the page:
<blockquote>
<strong>Error: $ is not a function</strong>
</blockquote>
The page where this is occurring is <a href="http://www.dynamicpalette.com/esprit/" rel="nofollow noreferrer">here</a> if that will help you diagnose the problem. Thanks for any help!