Posted 3 years ago #
Hi all,
I have a very strange problem. I would like to use javascript libs such as prototype or scriptaculous or jquery to have some page effects. I have included js lib on the page (confirmed by viewing the source code), but it seems the page just ignore those libs so that when I tried to use some function like "$(ID)", error occurred. I am not sure why is that? Please help and thank you in advance!
Ming
Posted 3 years ago #
Don't use the '$' alias. Use 'jQuery' instead.
Posted 3 years ago #
yeah, but I also tried Jquery and in jQuery, it also use something like $(document).. how should I solve that?
There must be reasons that stop all the scripts working right?
Posted 3 years ago #
You'd generally wrap your functions in jQuery(document).ready(function(){...} but that probably isn't your problem. How are you including the .js files? Are you sure they are actually being included? Just having the script tag isn't necessarily proof that the file loads. Maybe the src url is wrong, for example. And what is your URL?
Posted 3 years ago #
I load jQuery by calling wp_enqueue_script('jquery') function in the header of file and by visiting this url ( http://www.misi.se/orebro/wp-includes/js/jquery/jquery.js?ver=1.2.6 ) I guess I have succeed to include the lib?
Posted 3 years ago #
wp_enqueue_script is the way to do it. Do you call wp_enqueue_script before wp_head()?
Put something really simple in your theme. Something like:
<script type="text/javascript">
jQuery(document).ready(function() {
alert('Hi');
}) </script>Does that work?
Can you post the javascript that you are trying to get to work?
Posted 3 years ago #
thank you for your help, I have tried the script that you provided to me and that seems to work. however, my code still does not work and here I post what I coded:
jQuery(document).ready(function() {
if(jQuery('ming')){
alert('Hi');
jQuery('ming').click(function () {
alert (1);
if (jQuery('location_list').is(":hidden")) {
jQuery('location_list').slideDown("slow");
} else {
jQuery('location_list').hide();
}
});
}
})Please notice that I have 2 alerts there just for debugging, and when the page is loaded, the first alert popped up, which is correct, but when I click on 'ming' element, the second alert did not pop-up. Do you have any idea of that? Thanks again.
Ming
Posted 3 years ago #
Ok. You have your selector a little bit wrong. It isn't enough to tell jQuery to look for 'ming'. You have to tell it whether it is looking for a class or an ID, at least. Classes are represented by '.' (a period); IDs are represented by '#'. What you need is either jQuery('.ming') or jQuery('#ming'). You can be more specific if you need to be, for example, jQuery('a#ming') would target an anchor tag with the ID 'ming'. The same is going to be true with 'location_list'.
Posted 3 years ago #
thanks for your reply again. I have changed to use ID for looking for elements. But still, I had the same result. Please notice that the problem could be discovered by that 2 alerts. The first alert popped up but not the second one. So strange...
Posted 3 years ago #
This works for me:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('h2#ming').click(function () {
if (jQuery('.location_list').is(":hidden")) {
jQuery('.location_list').slideDown("slow");
} else {
jQuery('.location_list').hide();
}
});
})</script>
<h2 id="ming">...............hi</h2>
<div class="location_list">
<ul><li>1111111111111</li><li>2222222222222222222</li><li>3333333333333333</li><li>4444444444444</li></ul>
</div>Are you sure that you are selecting for either an ID or a class in every case?
Posted 3 years ago #
OMG! It works now ! I think the only change I made according to your example is to add element tags before id or class, for example,
jquery('h2#ming')Anyway, now I can do my stuff =) Thanks a lot friend!
This topic has been closed to new replies.
