Cannot get jQuery to function

[FWDrew]

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

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.

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

[rangana]

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.

[FWDrew]

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

Best Regards,

Drew

[rangana]

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.

[FWDrew]

Originally Posted by rangana

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

Best regards,

Drew

[rangana]

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?

[FWDrew]

Originally Posted by rangana

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

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

Best Regards,

Drew

[kerry1803]

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>

[Fumigator]

Make a new thread for your question.