ansaurus

Question

How to replace entire CSS of a page after an ajax request with jQuery?

Answer 1

+1 A:

Try this:

$.load('next_page.html', function(data) {
    $('link[rel=stylesheet]:first').replaceWith($(data).find('link[rel=stylesheet]:first'));
});

You were not actually making an AJAX call in your own example, perhaps that was the problem or you just forgot to add the .load part? This should work just fine, given that it is inside the $(document).ready(function() { ... }); block.

Tatu Ulmanen 2010-01-27 12:09:29

sorry, I did forgot the .get part.. I edited my question so it's correct now.

Martin Tajur 2010-01-27 12:49:27

still, this does not solve the problem because $(data).find('link[rel=stylesheet]') is not found

Martin Tajur 2010-01-27 12:54:27

@Martin, what does your `data` look like?

Tatu Ulmanen 2010-01-27 14:02:44

data is a full xhtml 1.0 transitional page

Martin Tajur 2010-02-01 20:41:27

have you validated it? perhaps it's more transitional than you think

reinierpost 2010-02-10 17:07:35

Answer 2

+2 A:

This jquery should do it:

  $(document).ready(function() {
        $.get("next_page.html", function(data) {
            $("link[rel='stylesheet']").attr("href", $(data).filter("link[rel='stylesheet']").attr("href"));
        });
    });

ryanulit 2010-01-27 13:29:12

I concur. That'll do the trick.

Andrew Dyster 2010-01-27 14:22:50

This does not work either! :( Seems jQuery is failing to find the whole <head> tag from ajax data.

Martin Tajur 2010-01-28 11:41:01

Update: $.filter() finds the stylesheet in Firefox (ver 3.5 on Mac), but does not work neither in Google Chrome nor Safari (on Mac). So it's unfortunately still not solved.

Martin Tajur 2010-01-28 11:52:11

Ah, I only tested in IE and Firefox. Back to the drawing board...

ryanulit 2010-01-28 13:26:11

It doesn't seem to be a problem with the response type. I tested that and it is text/html in IE, FF, and Chrome (don't have Safari to test). For some reason, the attr("href") after filter won't find the href attribute value. Is there a reason you use a different page to get the url for the new stylesheet? Why don't you just use a link on the page and take the url from there?

ryanulit 2010-01-28 15:23:44

Answer 3

+1 A:

This is valid as per jQuery dev team — "parsing straight HTML we only guarantee the contents of the body element. If you wish to access the XML of the page directly then I recommend that you explicitly make the file .xhtml or request it as XML, for example:"

$.ajax({ dataType: "xml", file: "some.html", success: function(data){ ... });

Martin Tajur 2010-02-10 16:55:32

ansaurus

tags:

views:

answers:

How to replace entire CSS of a page after an ajax request with jQuery?

related questions