Cannot get jQuery to function

Hi all,

Im pretty frustrated with this, as I feel like I am missing something really simple but just cant figure it out. Basically I was going to use jQuery to animate the "search" image at the top. After this didnt work, I realized I couldnt get any jquery to work :o

So I went back to basics to try a very simple script and just cant get any jQuery to work.

Code:

$(document).ready(function(){
("a#searchAnimate").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});

Some of Relevenat HTML:
<ul><li id="searchBox">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li></ul>
<div style="display:block;"><a href="http://jquery.com" id="searchAnimate" title="Search"><img class="search" src="wp-content/themes/splat!/style/images/search.png" alt="Search" /></a></div>

Test page is here (http://premiumthemes.net84.net/wordpress).

If you view the page, you can see the scripts are being called properly in the head and appear inf firebug, I thought it might have been a path issue, so threw in the absolute path and still couldnt get it to work.

So, any ideas what have I done wrong? Appreciate any help or advice :)

Best Regards,

Drew

Edit-Just would like to add before someone tells me to correct them, the 4 html markup errors are just from the free host that I use tracking script, the actual page and markup is valid :thumbsup:

You missed:

$(document).ready(function(){
$("a#searchAnimate").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});


Also, sincce id is unique in every page, you can just remove highlighted:

("a#searchAnimate")


Hope that helps.

Hi Rangana,

Wow, I feel pretty embarrassed that I missed that. Thank you very much. However, I still cannot jQuery to function as I want it to. Take for example this:
$(document).ready(function(){
$("#searchAnimate").click(function(event){
event.preventDefault();
$(this).hide("slow");
});

});
I still cant get this very simple script to work, any ideas? I think I need to step away from it and let my eyes rest for a bit :D

Best Regards,

Drew

Try to interchange the two:

event.preventDefault();
$(this).hide("slow");


event.preventDefault is the same as if you return false on JS which cancels any event from the point of declaration forward.

Hope that helps.

Try to interchange the two:

event.preventDefault();
$(this).hide("slow");


event.preventDefault is the same as if you return false on JS which cancels any event from the point of declaration forward.

Hope that helps.

Hey Rangana,

Thanks again, but I am still having no luck, here is my updated code:
$(document).ready(function(){
$("#searchAnimate").click(function(){
$(this).hide("slow");
return false;
});

});
About ready to pull my hair out, just dont know why I cant get this right. I really appreciate all of your help :thumbsup:

Best regards,

Drew

Working fine at my end.

See testing example:

<script type="text/javascript" src="http://premiumthemes.net84.net/wordpress/wp-content/themes/splat!/style/scripts/jquery-1.2.6.min.js"></script>
<script>
$(document).ready(function(){
$("#searchAnimate").click(function(){
$(this).hide('slow');
return false;
});

});
</script>
<ul><li id="searchBox">
test
</li></ul>
<div style="display:block;"><a href="http://jquery.com" id="searchAnimate" title="Search"><img class="search" src="http://rangana.moonylist.com/images/Picture7.jpg" alt="Search" style="width:350px;height:300px;"/></a></div>


Click on the image and it hides, nothing wrong (as far as I can see), or you expect it to do something else?

Working fine at my end.

See testing example:

<script type="text/javascript" src="http://premiumthemes.net84.net/wordpress/wp-content/themes/splat!/style/scripts/jquery-1.2.6.min.js"></script>
<script>
$(document).ready(function(){
$("#searchAnimate").click(function(){
$(this).hide('slow');
return false;
});

});
</script>
<ul><li id="searchBox">
test
</li></ul>
<div style="display:block;"><a href="http://jquery.com" id="searchAnimate" title="Search"><img class="search" src="http://rangana.moonylist.com/images/Picture7.jpg" alt="Search" style="width:350px;height:300px;"/></a></div>


Click on the image and it hides, nothing wrong (as far as I can see), or you expect it to do something else?

Nope, that works great. It was really strange, I got it to work if I put the script hard coded on the html instead of linking to it. I then tried linking to it again and it worked :o

Either way, im satisfied, thanks very much for all of your help Rangana :thumbsup:

Best Regards,

Drew

hi, I'm using eclipse for development and trying oout jQuery for the first time, I can't seem to get the following working.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
#box
{
background:red;
width:80px;
height:80px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$('a').click(function() {
$('#box').fadeOut();
});
});

</script>

<title>Test</title>
</head>
<body>
<div id="box"></div>
<a href="#">Link</a>

</body>
</html>

Make a new thread for your question.