• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Click event not working in jQuery

 
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I have just started to learn JQuery using Headfirst. I tried following code in order to hide all paragraphs on a button click, but thats actually not happening.



Please point out where am going wrong here.
 
Bartender
Posts: 4568
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Have a look at the error console. Are you getting any errors? The first thing you want do is make sure that the jQuery library is getting loaded.

If it is, and there are no errors, then the next thing I'd be trying to confirm is which part is failing to fire? Is it the document ready handler? Or the onclick event? Or is that being fired but just not having the effect you want?
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Since am starting to learn JQuery, I do my coding with a text editor. I haven't explored on how to see errors in console. I am sure, Jquery library is getting loaded. I am not sure if to use consoles during initial stages of learning.
 
Marshal
Posts: 67447
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
All of the modern browsers have JavaScript debuggers (with error consoles) that you need to learn how to use now. It's almost impossible to debug Javascript or jQuery issues without one.

Learn how to use your browser's debugger before writing one more line of code.
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

Just installed FireBug plugin and tried it. I couldn't any error on the console.

Please let me know, what further information you need .
 
Bear Bibeault
Marshal
Posts: 67447
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You claim that jQuery is loading correctly. I say that it is not. In fact, I claim with 100% certainty that jQuery is not loading in your page.

Prove to me that your claim is correct.
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I could see the jquery.js script in the console. In addition to it, I replaced the same code with click functionality on paragraph elements, that worked as expected.

So I feel jQuery libraries are loaded .
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

You claim that jQuery is loading correctly. I say that it is not. In fact, I claim with 100% certainty that jQuery is not loading in your page



Can you tell me how you say jQuery is not loading. Can you help me with few pointers that I could look for.
 
whippersnapper
Posts: 1843
5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Is the HTML valid?
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What you mean by valid ?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is not correct


You can not use empty tag notation with script tags.

Eric

 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I had tried already by replacing

<script src="jquery.js"/>


with

<script src="jquery.js"></script>



This one too didn't work.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Works for me: http://jsfiddle.net/WmZ7U/

You have something wrong.

Eric
 
Ranch Hand
Posts: 90
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I think the jquery.js path provided is incorrect. May be its not able to find that js file.

Try example Click Event Sample mentioned out here.

Thanks,
Ashwini Kashyap

 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

You have something wrong.



Yes. I am just trying to figure out whats wrong.

I think the jquery.js path provided is incorrect. May be its not able to find that js file.



The jQuery libraries seems to be loading.
 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I finally got that working. I moved the script tags into head tag. I really wonder if that could be the reason behind it though.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So the sample code above did not match what you were testing and telling us it was broken?

 
Ashwin Sridhar
Ranch Hand
Posts: 277
Oracle Spring Flex
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The code thats working is below.



<!DOCTYPE html>
<html>

<head>
<script src="jquery.js"></script>

</head>
<body>
<p>HI How are you. ? </p>
<p>HI How are you. ? </p>
<p>HI How are you. ? </p>
<p>HI How are you. ? </p>
<button id="myButtonId">Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>

</body>
</html>



If you observe, I have just moved the script tags around.
 
Bear Bibeault
Marshal
Posts: 67447
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There is no need to move the script tags. The script will work correctly if also placed in the head section. Eric's example shows this.
 
There are 29 Knuts in one Sickle, and 17 Sickles make up a Galleon. 42 tiny ads in a knut:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic