Use CSS/Javascript received through AJAX

Question

I'm experimenting with the jQuery UI tab control, and have three tabs that each load a different page through AJAX. The pages that are loaded are complete html-pages, with their own Javascript and CSS.

Scripts that are inline in the html body are ok, so are CSS in the style-attribute on tags, but Javascript and CSS in the head of the loaded pages are not used at all.

How can I make use of the Javascript and CSS in the head of the loaded pages? Or do I have to include all CSS and Javascript in the page containing the tab control?

tvanfosson · Accepted Answer · 2010-11-02 16:25:58Z

1

The AJAX load is going to filter out anything that's not in the body element. You can put the CSS/Javascript tags in the body and they will be added to your page, but I would avoid that if at all possible. If you're not careful, you'll end up including things multiple times.

I suggest putting the common stuff like jQuery itself, plugins, etc. on the page containing the tabs and only put tab-specific scripts on the bits that are loaded via AJAX. You'll need to be careful to manage ids -- they have to be globally unique, not unique within the tab. Sticking with classes may be a better way to handle this or preface your ids with the tab name. For CSS I would try to make it so the CSS applies to the entire page, including tabs, and load it with the page.

YMMV.

answered Nov 2, 2010 at 16:25

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

2 Comments

Some programmer dude Over a year ago

Seems to much of a hassle, I think I just continue working without the tab-control, and just use normal links between pages.

tvanfosson Over a year ago

@Joachim - In practice I don't find it to be. It's probably easier to start this way that to retrofit something into tabs, but honestly I haven't had much trouble. Of course, ASP.NET MVC might make this easier than some other frameworks because of the separation of concerns.

Knu · Accepted Answer · 2010-11-23 16:09:07Z

0

You could add this line in your head:

<link rel="stylesheet" id="yourid" type="text/css" />

and this after your ajax call:

document.getElementById('yourid').href='css/'+yourvariable+'.css';}

And you can do the same for scripts (change rel and type).

edited Nov 23, 2010 at 16:09

answered Nov 2, 2010 at 20:44

Knu

15.2k6 gold badges60 silver badges93 bronze badges

Collectives™ on Stack Overflow

Use CSS/Javascript received through AJAX

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related