All geek questions in one place

How to replace all CSS page after ajax request using jQuery?

I have a document with one CSS linked internally. How can I replace the current CSS with one coming from the document I just received with an AJAX request using jQuery?

Here is the code I'm trying to do right now, but have not yet succeeded:

$(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 by Firefox 3.5, Chrome and Safari 3 on Mac), but $ .filter () found only the stylesheet in Firefox 3.5 - still nothing in Chrome and Safari 3.

It should be simple, correct - replace the current CSS href with a new one, and voil ??

For some reason, jQuery does not find anything inside a tag <head>that comes from an AJAX request. In addition, jQuery cannot even find all <head>of the AJAX data. In other words, $(data).find('head').size()inside the callback function returns 0.

I am using jQuery 1.4.

UPDATE February 10, 2010. I sent an error about this to jQuery and they agreed that it was not possible to find any of the tag <head>from ajax data. Here is the answer I received:

http://dev.jquery.com/ticket/6061#comment:1 - "Yes, that’s right - parsing direct HTML, we guarantee only the content of the body element. If you want to access the XML page of the page right then I recommend you explicitly make the .xhtml file or request it as XML, for example: "

+3
4

jQuery dev - " HTML body. XML- , .xhtml XML, :"

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

jquery :

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

:

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

AJAX , , , .load? , , $(document).ready(function() { ... });.

+1

. id , css. attri href ( ).

HTML:

<link type="text/css" href="/llt_style/skin/nuit.css" rel="stylesheet" id="llt_skin_href"/>

And I use select so the user can select their 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>
0
source

Source: https://habr.com/ru/post/1730198/

More articles:


All Articles