Solved

Need to get jQuery working in head of Wordpress site (colorbox jQuery plugin)

Posted on 2013-11-10
7
468 Views
Last Modified: 2013-11-10
I can't get a jQuery script to work in Wordpress. It worked fine before moving to Wordpress so I know it was working. Here's what I have. Can anyone point out what I'm doing wrong?

In function.php I have added:

	function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
		wp_enqueue_script('jquery');		
		wp_register_style('colorbox_css', get_bloginfo('template_directory') . '/inc/stylesheets/colorbox.css');
		wp_enqueue_style('colorbox_css');
		wp_register_script('colorbox', get_bloginfo('template_directory') . '/inc/scripts/jquery.colorbox-min.js');
		wp_enqueue_script('colorbox');
	}
}
add_action('init', 'my_init');

Open in new window


In the head portion I have this:
<?php wp_head(); ?>
<script type="text/javascript">

			// Dialog			
		jQuery(document).ready(function() {
    	jQuery("#dialog").dialog({
      	bgiframe: true, autoOpen: false, height: 300, width: 450, modal: true
    });
  });

		</script>

Open in new window


And in the <body>, I have this:

<li><a href="#" onclick="jQuery('#dialog').dialog('open'); return false">MyLink</a></li> <span class="barFont">|</span

Open in new window

0
Comment
Question by:MHenry
7 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39637425
Why are you trying to back to an old version of jQuery?  You might simply be breaking some of the jQuery code that already exists in Wordpress.  This is the current version of the 1.x series: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39637590
What Dave said:  can you run the script under modern JQuery or will it only work with 1.3.2?

If 1.3.2 is the only option, make sure no other versions of JQuery are loading via a plugin or by the theme. Deregistering JQuery would handle the theme, but a plugin may override it or add to it.
0
 
LVL 7

Author Comment

by:MHenry
ID: 39637625
ok, I updated the link to jQuery, there are no plugins active.

Still not working.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39637651
jQuery Dialog is part of the jQuery UI - so you need to include that (and also the UI stylesheet)

http://jqueryui.com
0
 
LVL 7

Author Comment

by:MHenry
ID: 39637657
GaryC123,

Yeah, I noticed that right after I first posted. I tried adding those references but it's still not working.

I'm thinking something is wrong in the way I'm adding to the functions.php but I can't figure out what I'm doing wrong.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39637661
Would be a lot easier if you posted the link else the rendered HTML.
0
 
LVL 7

Author Comment

by:MHenry
ID: 39637689
so the main thing was not linking to the JQuery UI. That and leaving an S off of dialog.

sheesh.

Thanks!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question