Jquery To Load A Page Overrides My Css

I'm using the line of jquery to load content into a div on my page $('#divURLContent').load('http://myurl'); The problem is the CSS on the page I am loading overrides the CSS on t

Solution 1:

It usually makes no sense to load a full page inside a DIV.

You should take care of rendering only a bunch of HTML in the server, without head or body, or select the part of content that you want to insert in the DIV.

In your case, the most simple thing you can do is:

$('#divURLContent').load('http://myurl body');

That will put in the DIV only the content inside the body tag of the loaded page.

Look at http://api.jquery.com/load "Loading Page Fragments" for more information.

Solution 2:

Your best bet is to either redesign the page you're loading to only include the markup you wish to inject into the page rather than an entire page complete with CSS, or to lad the page with $.ajax instead of $.load and extracting the body's contents with jQuery before actually insertint it into the DOM. The former approach will reduce the amount of data you need to shift, the latter will degrade more gracefully as people will still see a page if they visit that page without going through AJAX.