Reload page asynchronously using Prototype

[pezholio]

Hi,

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:

function resizetext(size) {
new Ajax.Request('resize.php', {method: 'get', parameters: {style: size} });
}
 

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:

http://www.ratemyplace.org.uk/newsite/

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!

[acoder]

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().

[pezholio]

Yeah, I'd rather do it server side if at all possible, otherwise I'm duplicating work. Any ideas?

[acoder]

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.