Ajax call returning whole page

Question

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?

Answer 1

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');

Answer 2

You need:

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

More info on load here