jQuery/jQuery UI

you need to attach both jquery and the jquery-ui js files to your header or just above the close of the body tag.

use something like this to attach the files:-

<script type='text/javascript' src='jquery-file-location.js'></script>

you then need to write an onload such as this. I tend to include this in a third js file:-

$(document).ready(function() {
// do stuff
});

then add your tabs code to the //do stuff part.

the jquery ui website probably has the best documentation and tutorials you’ll find on the web for it at https://jqueryui.com/demos/.

hope this helps.

dave.

Hi dave,

thank you very much for your fast answer. I have tried including my jquery-script in several ways, including the one you suggested. But still nothing happens. I have implemented the code as suggested in the jQuery UI documentation and with the nettuts-Tutorial on how to implement a tabbed UI. The problem is, absolutely nothing happens. It’s like, no matter how hard i try to include that stuff, it is totally ignored :-O.

hello,

do you have a link to your site? it sounds like either the files are not loading properly or the code is on being loaded on page load but could be a dozen other things.

dave.

Are you using a relative URL for the script source? Relative URLs do not work as expected within the WP framework.

@dave:
Sorry, i forgot to post my Site: https://books-and-it.de

@apljdi:
Actually i used the wp_enqueue_script()-function with the handles: jquery, jquery-ui-core and jquery-ui-tabs.
But i have tried to include with both, relative and absolut paths already, too.

First i wanted to use my own jquery-ui script which i had downloaded and uploaded into my theme. That that either didn’t work. After that i found out that wordpress already comes with the needed scripts, so i tried to include those.

haven’t looked at your site but you need to be careful with the jquery-ui plugin as it comes in many forms. you need to ensure the one you have supports tabs. if you go to their download page there are lots of checkboxes. most can be disabled but for you tabs definitely needs to be ticked.

the download page is at https://jqueryui.com/download

not sure what the wordpress jquery-ui comes with.

dave.

sorry for posting twice. but something else to not is your jquery ui is loading in the footer. if you have your jQuery(‘#tabs’).tabs loading above it won’t work.

make sure that your code is below the library and plugins.

Looks like you are successfully loading four jquery scripts– two of them look to be slightly different versions of the jQuery UI core. That could be your problem.

@dave: i only tried once loading in the footer. I read up on a few posts about jquery and WordPress 2.8 and found out, that it is supposed to be loaded in the footer. So i tried that. Therefore i had an extra function included in my functions.php which made sure that the jquery-tab-function wouldn’t be loaded until the scripts are loaded. I just forgot to take that out again, sorry. But, whatever, once again, it didn’t work :-).

@apljdi: thanks for your hint. I removed the one script. But it won’t work. Some posts i found don’t mention anything about where to load the libraries other posts say, they have to be loaded in the footer. I don’t understand why i can’t find anything about that in the WordPress documentation.

You should have the following the in the header file for your theme if you want to use jQuery.. (don’t know regarding UI)..

<?php wp_enqueue_script('jquery');?>
<?php wp_head(); ?>

<?php wp_head(); ?> should already be there, you need to make sure the enqueue script is placed before wp_head.

You also need to rename your functions or use no conflict mode.

This is a snippet (so incomplete) from my “working” header file..

<?php wp_enqueue_script('jquery');?>
<?php wp_head(); ?>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function() {

	<?php if(is_search()) { ?>
	jQuery('#toggle_options').css('cursor','pointer')
	.click(
		function() {
			// Toggle the class on the item toggling the hidden content
			jQuery(this).prev('div').toggleClass('hide');
			jQuery(this).prev('div').toggleClass('show');
		}
	);
	<?php } ?>

Just to give you an idea of what some basic jQuery may look like in the file…

I’m using 2.8.4 …

NOTE: There is a conflict when loading jQuery tools externally alongside the above though. I don’t use jQuery tools now, but i did have it for something else previously and happened to notice the problem, so felt it worth a mention “just incase”.

Hi,
i really appreciate your guy’s help! Thanks a lot!

@t31os_:
I have found out now, that only jQuery UI is my problem because it is loaded in the footer. Everything i do with jQuery works fine.

Can someone tell me how (and where) to wrap up the jQuery(‘#tabs’).tabs()-code so that it is loaded after the libraries are loaded in the footer and to get it working?

You can do the tabs in the header, i use them for some personal projects.

jQuery(document).ready(function() {
	jQuery('#tabs').tabs( TAB_ARGS_HERE );
});

Sorry i didn’t reply before, it’s hard to keep track of older threads.

The important part is this..

jQuery(document).ready(function()

Which tells the script to wait until the document/page has finished loading (or more appropriately, when it’s ready).