question about JQuery

**gib65** · 09-08-2012, 01:58 AM

Hello,

I using JQuery to fill my divs with content from another page. I'm doing this as follows:

Code:

	<script type="text/javascript">

		function loadContent(elementSelector, sourceURL)
		{
			$(elementSelector).load(sourceURL);
		}
	
	</script>

...

<a href="javascript:loadContent('#content', 'about_the_book.html');">
				About the Book
			</a>
...

<div id="content" class="standard content">
</div>

My question is: should about_the_book.html be a fully fleshed out web page with all the bells and whistles (like <!DOCTYPE...) or can it work in quirks mode (is it even necessary to have your standard head and body tags or can it be more like an include file)?

**jscheuer1** · 09-08-2012, 06:43 AM

It's best not to have 'all the bells and whistles'. In fact no DOCTYPE, html, head or body tags is good. Take what's in or what would be in the body and put that in a div tag. For example if your page was:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<div>Hello World!</div>
</body>
</html>

It should become:

Code:

<div>
<div>Hello World!</div>
</div>

However, jQuery .load() has a unique feature. You can use an id selector to grab just one element. If you were to use that method, you could have a standard standalone page and just have a container div with an id and select just that element for import.

If you're interested in that let me know.

**gib65** · 09-08-2012, 05:33 PM

Code:

<div>
<div>Hello World!</div>
</div>

So that's two div tags in the source file?

Originally Posted by jscheuer1

However, jQuery .load() has a unique feature. You can use an id selector to grab just one element. If you were to use that method, you could have a standard standalone page and just have a container div with an id and select just that element for import.

If you're interested in that let me know.

That is interesting, but I can't think of an application of that to my current project. If I ever have a use for that in future projects, though, I'll remember you.

**jscheuer1** · 09-08-2012, 06:31 PM

That's not two div tags, well obviously it is in this particular case. Think of it more this way. Take a normal standard page with a DOCTYPE, html, head, and body. Remove the DOCTYPE and the html tags. Remove the entire head section including its head tags. Change the body tag to a div tag.

The result of that, as long as the page was valid HTML before all that, will be a valid xml document, or as close to one as you're likely to get when what you're actually doing is importing HTML. It will be ideal for importation via AJAX, which stands for Asynchronous Javascript and XML by the way.

In most cases you can get away with an ordinary page. But you asked which was best, and what I've told you is just that.

About using jQuery's .load() method to grab selected contents from the imported page, see:

http://api.jquery.com/load/

They may have ironed out the kinks in it (the load content from the imported page via selector feature), but last I checked it was a little quirky. It's good for most things though.