How to replace entire CSS of a page after an ajax request with jQuery?
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:"
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"));
});
});
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.
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){ ... });
i have it working on my site. I simply added an id to my link tag where my css is loaded. and then you change the attri href (you got that part right).
HTML:
<link type="text/css" href="/llt_style/skin/nuit.css" rel="stylesheet" id="llt_skin_href"/>
And the i use a select to let the user choose his skin.
<select onchange="$('#llt_skin_href').attr('href', $(this).val());">
<option value="/llt_style/skin/jour.css">Jour</option>
<option value="/llt_style/skin/nuit.css">Nuit</option>
</select>
加载中,请稍侯......
精彩评论