jQuery Ajax loading div question

Question

I have somewhat of a thought question regarding jQuery Ajax. My question is this: If I load just one section of an HTML into a div using jQuery Ajax, like this:

$('#result').load('ajax/test.html #container');

Will the user have to download the entire test.html in order to see what the #container div has? In other words, will the entire test.html file be downloaded and then parsed to only select the #container div, or will only the #container div be downloaded? If the first happens, can you think of any way of only downloading the #container div without creating a new html file?

Thank you so much for your input! :) I really appreciate it.

kapa · Accepted Answer · 2011-03-28 16:03:40Z

3

Certainly the whole HTML will be downloaded.

If you want to avoid this, you have to create some kind of serverside script, for example PHP, that will only send the required content.

You could call it with something like

$('#result').load('ajax/test.php?ajax=1');

and in the PHP check for the existence of $_GET['ajax'], and if it exists, only send the #container div.

answered Mar 28, 2011 at 16:03

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thirtydot · Accepted Answer · 2011-03-28 15:50:31Z

3

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

$('#result').load('ajax/test.html #container');

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

answered Mar 28, 2011 at 15:50

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Comments

Josiah Ruddell · Accepted Answer · 2011-03-28 15:50:06Z

1

The whole page will be downloaded. After jQuery has the contents it parses it to find the appropriate selection. See Docs for jquery load

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

answered Mar 28, 2011 at 15:50

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

Collectives™ on Stack Overflow

jQuery Ajax loading div question

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related