learning jQuery but come to an issue..

DragonWoLf · 30 Aug 2011 at 08:43

<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>jQuery Practice</title>
</head>

<body>

<p onclick="$(this).hide();">this is TESTING text</p>
<script type="text/javascript" src="js/jquery.js"</script>
</body>
</html>

So I'm learning new things all the time and jQuery is one of em but some to a snag that's bugging me! That's the code used in TheNewBoston tutorials I've been following, now what's supposed to happen is once you have refreshed the page, click on the text and text disappears BUT not for me, nothing happens, am I missing something small or what? :confused:

Xelene · 30 Aug 2011 at 08:56

Obvious question, do you have js/jquery.js?

You have a typo also:

Code:

<script type="text/javascript" src="js/jquery.js"[COLOR="Red"][b]>[/b][/COLOR]</script>

DragonWoLf · 30 Aug 2011 at 09:01

sldsmkd said:
Obvious question, do you have js/jquery.js?

You have a typo also:

Code:

<script type="text/javascript" src="js/jquery.js"[COLOR="Red"][b]>[/b][/COLOR]</script>

God dammit it's always something small, cheers mate and yes I does ^^

Tripnologist · 30 Aug 2011 at 09:18

I've not looked at the tutorial, but if they're telling you to use inline js, it's a pretty poor tutorial.
You should call jquery in the head, and also have your scripts in an external file. Also, attaching events to the actual elements negates one of the great things about jquery which is separation of js and html. (I've included the script in here obviously, but I would put it in js/jquery.scripts.js)

Code:

<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>jQuery Practice</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){ 
		$('p.hide').click(function(){
			$(this).hide();
		});
	});
</script>
</head>

<body>
	<p class="hide">this is TESTING text</p>
</body>
</html>

DragonWoLf · 30 Aug 2011 at 09:21

Tripnologist said:
I've not looked at the tutorial, but if they're telling you to use inline js, it's a pretty poor tutorial.

Ah they tell you the advantages/disadvantages of inline and external as they progress to more difficult ones

Dj_Jestar · 30 Aug 2011 at 11:12

Tripnologist said:
I've not looked at the tutorial, but if they're telling you to use inline js, it's a pretty poor tutorial.
You should call jquery in the head, and also have your scripts in an external file. Also, attaching events to the actual elements negates one of the great things about jquery which is separation of js and html. (I've included the script in here obviously, but I would put it in js/jquery.scripts.js)

Code:

<!doctype html> <html lang="eng"> <head> <meta charset="utf-8"> <title>jQuery Practice</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('p.hide').click(function(){ $(this).hide(); }); }); </script> </head> <body> <p class="hide">this is TESTING text</p> </body> </html>

There's really no need to get so uppity about external script files and in-line scripting. It's a tutorial, and by the looks of it, the OP is still on the basics.. so why do you feel the need to complicate matters?

GravyMonster · 30 Aug 2011 at 11:18

Tripnologist said:
I've not looked at the tutorial, but if they're telling you to use inline js, it's a pretty poor tutorial.

I was going to post the exact same thing, however I saw in the OP it's a NewBoston tutorial, and they're very good on the whole, so I gave them the benefit of the doubt that this was near the start of the tutorial

Tripnologist · 30 Aug 2011 at 11:32

Dj_Jestar said:
There's really no need to get so uppity about external script files and in-line scripting. It's a tutorial, and by the looks of it, the OP is still on the basics.. so why do you feel the need to complicate matters?

What you see as being uppity, I see as being helpful by telling him that what he's doing is not the best way to do things. I know when I was first starting out, if I was doing something incorrectly, I would have appreciated someone letting me know.

If by taking the time out of my morning to try and help someone get on the right path has annoyed or bothered you, I do kindly apologise.

Dj_Jestar · 30 Aug 2011 at 12:11

There's nothing helpful by getting on a high horse about things that are not appropriate at the current time. Let the guy learn how things work before telling him he is "doing it wrong".

redeye_uk · 30 Aug 2011 at 12:12

DragonWolf you need to include the script tag before you bind the onclick handler

Dj_Jestar · 30 Aug 2011 at 12:14

redeye_uk said:
DragonWolf you need to include the script tag before you bind the onclick handler

Technically he needs to include the script the onclick event is invoked - i.e. before he clicks the paragraph.

Tripnologist · 30 Aug 2011 at 12:36

Dj_Jestar said:
There's nothing helpful by getting on a high horse about things that are not appropriate at the current time. Let the guy learn how things work before telling him he is "doing it wrong".

I've already apologised once for somehow offending your sense of decency. I'm not sure what else you would like me to do?

I'll just keep my mouth shut from now on and refrain from attempting to help anyone in this subforum - less I be accused of riding a high horse.

redeye_uk · 30 Aug 2011 at 12:42

So was the problem the syntax error?

HungryHippos · 30 Aug 2011 at 16:25

Tripnologist said:
I've already apologised once for somehow offending your sense of decency. I'm not sure what else you would like me to do?

I'll just keep my mouth shut from now on and refrain from attempting to help anyone in this subforum - less I be accused of riding a high horse.

Sir, please note, it is illegal to ride a high horse around here, please step down!

Xelene · 30 Aug 2011 at 18:30

Tripnologist said:
You should call jquery in the head, and also have your scripts in an external file.

You are wrong, JQuery and any other JS include should be at the bottom of a document as events aren't processed until the page is fully rendered. What he should do is use JQuery from the Google CDN as that will be cached by most users.

likwid · 30 Aug 2011 at 19:23

This depends on the script.

Particularly if page layout is affected you don't want the user to see the page updating once all your images are loaded. Links for another example; say you want comment replies loaded by ajax where available (e.g. facebook) and the user clicks before all your images are loaded.

In practice it's better to have your (CDN cached) library loaded in the head, a script in the head and widgets etc in the body.

Eye seven · 30 Aug 2011 at 20:54

sldsmkd said:
You are wrong, JQuery and any other JS include should be at the bottom of a document as events aren't processed until the page is fully rendered. What he should do is use JQuery from the Google CDN as that will be cached by most users.

As this has turned into the pedantic thread you should use the CDN with a local fallback.

Xelene · 30 Aug 2011 at 22:56

Eye seven said:
As this has turned into the pedantic thread you should use the CDN with a local fallback.

Wasn't trying to be pedantic, just calling out the poster that was saying spurious stuff that's not helpful.

The best template i've seen is @ http://html5boilerplate.com/

GravyMonster · 31 Aug 2011 at 00:13

If we're being pedantic, if you use the Google CDN, remember to link to a specific version of jQuery. Linking to just '1.6' or 'latest' won't be cached, so is pointless.