How to include a CSS link if a call isn't done via AJAX?

Question

I have a page 'foo.html' that populates a table via AJAX 'ajax.html?options=option1'(accesses a database.)

'foo.html' has a css linked to it that makes the table from ajax.html look nice. However, I'd like to have ajax.html also look nice with a css if it is directly accessed. if I add <link rel="stylesheet" type="text/css" href="/dev/css/default.css" /> then the AJAX inserts the link again in foo.html which I don't want. Is there any way I can make the css link code not show up in the AJAX call or only show up on non-AJAX calls?

Thanks.

Answer 1

an easy way i can think of to solve this problem is to pass an additional parameter that defines the calling context.

Answer 2

The easiest way to do this is to use jQuery.

Load the ajax.html page with jQuery.get() on success, do : Remove the stylesheet : $('link[rel=stylesheet]').remove();

If you then want to add another stylesheet :

var link = $("<link>");
link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: 'http://domain.com/stylesheet.css'
});
$("head").append( link );

Or change it later :

$("link").attr("href","http://domain.com/stylesheet.css");