Ajax call returning whole page

I have following page with some random tips: http://www.javaexperience.com/tips

I want to display the tips only on the other pages of website so I am making an ajax call and adding whatever returned by the ajax response to a Div's HTML.

The DIV html is:

<div id="tips"><div>

The ajax call is:

jQuery("#tips").load("/tips/");

The problem is that the ajax call results in whole page content to be added to div (since the page gets appended to the div, the above jQuery code gets invoked infinitely) where as I want to add only the tips section. Is there any easy way out?

Upvotes: 0

Views: 1375

Answers (2)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

You need:

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

More info on load here

Upvotes: 1

Jay Blanchard
Jay Blanchard

Reputation: 34406

This is the expected behavior of the load method, it'll always download the entire content. You can specify that a certain part of the loaded page be parsed and placed into the calling container.

jQuery('#tips').load('url #tip1');

Upvotes: 7

Related Questions