Home/ Questions/Q 605467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:08:55+00:00

I have a document with one CSS linked in. How can I replace the

  • 0

I have a document with one CSS linked in. How can I replace the current CSS with one coming from a document that I just fetched with AJAX request using jQuery?

Here’s the code I am trying right now, but with no success so far:

$(function() {
    $.get('next_page.html', function(data, textStatus) {
        $('link[rel=stylesheet]:first')
            .attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
    });
});

Update: $.find() does not work in any browser (tested Firefox 3.5,
Chrome and Safari 3 on Mac), but
$.filter() found the stylesheet only
in Firefox 3.5 – still nothing in
Chrome and Safari 3.

It should be plain simple, right – replace the current CSS href with the new one, and voilá?

For some reason, jQuery fails to find anything inside the <head> tag that is coming from AJAX request. Furthermore, jQuery even fails to find the whole <head> itself from the AJAX data. In other words, $(data).find('head').size() inside the callback function returns 0.

I am using jQuery 1.4.

UPDATE Feb 10, 2010: I filed a bug about this to jQuery and they agreed it is not possible to find anything from the <head> tag from an ajax data.
Here’s the response I got:

http://dev.jquery.com/ticket/6061#comment:1 — “Yep, that’s correct – 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:”

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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){ ... });
    • 0