By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,652 Members | 1,441 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,652 IT Pros & Developers. It's quick & easy.

Reload page asynchronously using Prototype

P: 22

I'm currently putting together a stylesheet switcher for a project I'm working on, it's a server side solution at the moment, and I'd like to AJAX it up and avoid page reloads. I'm using Prototype's Ajax.Request method like so:

Expand|Select|Wrap|Line Numbers
  1. function resizetext(size) {
  2. new Ajax.Request('resize.php', {method: 'get', parameters: {style: size} });
  3. }
And all seems to work fine(ish). My only problem is that you have to reload the page before the stylesheet changes, I'm guessing I have to do something involving the onComplete callback, but what I'm not sure. The page in question is here:

Any help you can offer would be great, I'm a bit of a JavaScript n00b and have tried to figure it out for myself, but I've hit a brick wall!
Jun 9 '08 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
To change stylesheets, you don't need Ajax (though you could perhaps be generating something via a server-side script). Just change the link href (in the head which loads the CSS file) to point to another CSS file. An easy way is to give it an ID and reference it using document.getElementById().
Jun 9 '08 #2

P: 22
Yeah, I'd rather do it server side if at all possible, otherwise I'm duplicating work. Any ideas?
Jun 10 '08 #3

Expert Mod 15k+
P: 16,027
Ignore what I wrote above about changing the href (I was thinking of something else). Here's a good tutorial. Just set disabled to false for those that you want to enable and don't forget to set the title and rel attributes. If you have problems implementing this, post back here.
Jun 10 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.