Google.load and jQuery

JavaScript
1

I’ve read chapter 2 of the jQuery ninja book for the umpteenth time and my commands such as hiding and unhiding and hovering still do not work.

I’ve chosen to use the CDN to get my jQuery and jQuery UI libraries. I think I am doing something wrong in this respect.

Below is the code from the beginning of my page. Am I using google.load wrong?

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>9 jQuery</title>
<script type=“text/javascript” src=“http://www.google.com/jsapi?key=&lt;snip&gt;”></script>
<script>
google.load(“jquery”, “1.4.2”, {uncompressed:true});
</script>

&lt;script&gt;
  google.load("jqueryui", "1.7.2", {uncompressed:true});
&lt;/script&gt;
2

Check the browsers error log. Got any?

3

I went into the Firefox error console, clicked on the error tab and found exactly one error:

Error: uncaught exception: [Exception… “Security error” code: “1000” nsresult: “0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)” location: “http://elshaddaiministries.podomatic.com/javascripts/palette.js Line: 514”]

This particular error has nothing to do with the the website I was working on. This is my second post so I cannot send you the direct link to that web page. So, I’ll say it cryptically: zionthreads dot com slash jQ9 dot html.

4

The tags of the last script in your head section are not closed. Add in the red bits:

<script[COLOR="Red"]>[/COLOR]
 
	$('#celebs tbody tr').hover(function() { 
 	$(this).addClass('zebraHover');  
	}, function() { 
 	$(this).removeClass('zebraHover');  
	});  
 
</script[COLOR="Red"]>[/COLOR]
5

Thank you very much. I should have noticed that!

However, I added the changes and the pages still does not work – hovering will not change anything and clicking the buttons will not make the disclaimer disappear.

6

You may still have other problems, but here’s the most pressing issue.

When a web browser processes an html document, it does so in a top to bottom fashion. Pretty much line by line.

So, if you have some javascript that interacts with or depends on certain html elements, those elements must exist. If those elements are defined further down in the page, then you have a problem, because as far as the browser is concerned, they don’t exist yet.

You can place your scripts further down in the html document to resolve this. You can also look at the jquery ready() method. I bet your book covers this.

7

One last thing. Before I start trying to get my HTML all straightened out, please set my mind at ease about my original question: Do my lines that begin with “google.load” look as though they are correctly done?

8

There doesn’t seem to be anything wrong.

This is the google.load code that I have been using myself:


<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

That was from before when 1.4 came out, but as you can see it’s the same apart fro the key part. That I suspect will only be use use when you use services that require your google key. jQuery and it’s UI don’t, so you can get away with not having it there, but it doesn’t cause any harm to have it there either.

9

Thank you so much for your help. Judging from the way that you and Sarah have been communicating with me, I feel like you are the most professional company I can remember dealing with online.

Page 19 of the jQuery ninja book says, “Every example that follows in this book, unless otherwise stated, needs to be run from inside the document-ready event.”

Does that mean that all commands should begin right before the </script> tag?

For instance,

	&lt;script&gt;
		$(document).ready(function() { 
		alert('You will be clicking on the radio buttons below to design your own T shirt.  Click on OK to get started.');  
		});

$(‘#celebs tbody tr:even’).css({
‘background-color’: ‘#dddddd’,
‘color’: ‘#666666’,
‘font-size’: ‘11pt’,
‘line-height’: ‘2.5em’
});
$(‘#celebs tr:even’).addClass(‘zebra’);
<input type=“button” id=“hideButton” value=“hide” />
$(‘#hideButton’).click(function() {
$(‘#disclaimer’).hide();
});
</script>

I don’t think that is what the authors mean. But, it is a bit confusing.

10

He means that the commands should be run from the following section


$(document).ready(function() { 
    // run commands from here
});

Or from here:


$(function() { 
    // run commands from here
});
11

Hello,

The jQuery ninja book says that the plugins can be inserted in the HTML.
As you can see in the source code for zionthreads dot com slash jq22.php, I inserted the easing plugin in the head below the google.load code. It makes the header drop way down.
I like the way it is in zionthreads dot com slash jq23.php.
What is the proper way to do it?

Peter77

12

Even though I can get to the domain name, neither of those pages appear to exist for me. I seem to face this difficulty when it comes to religion.

Can you provide a reference to a page that actually exists?

13

Sorry, there was an upper case Q that I missed.

http://zionthreads.com/jQ23.php

Peter77

14

The “hide disclaimer” works for me using Firefox 2. Is there something else that isn’t working for you? I was wondering if maybe the page wasn’t valid and that was causing problems, but as far as I can see most of the errors are a result of using XHTML tags in an HTML page. http://validator.w3.org/check?uri=http%3A%2F%2Fzionthreads.com%2FjQ23.php&charset=(detect+automatically)&doctype=Inline&group=0

15

The way you’re talking about is where the script is embedded halfway through the content of the page. That is a technique that is frowned upon, because it mixes together both the content and the behaviour, which means that you’re not capable of separating the management of the content from the behaviour.

The proper way to do it is to load the script as late as possible in the loading of the page. This commonly means placing the script tag just before the </body> tag.

See http://developer.yahoo.com/performance/rules.html#js_bottom

16

I tried to do everything you asked me to.

I learned all about HTML Tidy. Now the validator gives me an excellent report.
I put the code right above the </body> tag.

The hide button (from page 32 of the Ninja book) still does not work. I am trying to hide all paragraphs with the class of “yellow”.

Any ideas?

Peter77

17

The address of the pages referenced above is http://zionthreads.com/color-and-design.php.

Peter77

18

Are we on the same page? http://zionthreads.com/jQ23.php still has several errors http://validator.w3.org/check?uri=http%3A%2F%2Fzionthreads.com%2FjQ23.php&charset=(detect+automatically)&doctype=Inline&group=0

i.e. No character encoding
using XHTML tags in an HTML page
missing attribute

The disclaimer gets hidden for me OK in Firefox, and the page doesn’t have any elements with a class yellow.

At least try giving the <script> tag the type attribute. I thought browsers used javascript as default when none was given, but maybe not.

What browser are you having the problem in?

19

OK, it is a different page. I would put the reference before the assignments

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

And this looks messed up to me

<input type="button" id="hideButton" value="hideYellowText" /> 
<br />
$('#hideButton').click(function() { 
 $('p.yellow').hide();  
}); 

<p class="brownSmall">Website designed by
<a href="http://peterennsdesigns.com/">Peter Enns
Designs</a></p><br /><br /></div></div>

Shouldn’t the script be in script tags?

20

When you say “I would put the reference before the assignments” what are “assignments”?

You said, “this looks messed up to me.” I more or less copied it from page 32 of the ninja book. How can I “unmess” it?

Peter77