Как заменить весь CSS страницы после ajax-запроса на jQuery? - PullRequest
Новая
       31

Как заменить весь CSS страницы после ajax-запроса на jQuery?

3 голосов
/ 27 января 2010

У меня есть документ с одним связанным CSS. Как я могу заменить текущий CSS документом из документа, который я только что получил с помощью AJAX-запроса с использованием jQuery?

Вот код, который я сейчас пробую, но пока безуспешно: 

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

Обновление: $ .find () не работает ни в одном браузере (проверено Firefox 3.5, Chrome и Safari 3 на Mac), но $ .filter () нашел только таблицу стилей в Firefox 3.5 - до сих пор ничего не Chrome и Safari 3.

Это должно быть очень просто, верно - заменить текущий CSS href новым, и вуаля?

По какой-то причине jQuery не может найти что-либо внутри тега <head>, полученного из запроса AJAX. Более того, jQuery даже не может найти весь <head> из данных AJAX. Другими словами, $(data).find('head').size() внутри функции обратного вызова возвращает 0.

Я использую jQuery 1.4.

ОБНОВЛЕНИЕ 10 февраля 2010 г .: Я отправил сообщение об ошибке в jQuery, и они согласились, что невозможно найти что-либо из тега <head> из данных ajax. Вот ответ, который я получил:

http://dev.jquery.com/ticket/6061#comment:1 - "Да, правильно - разбор прямой HTML мы только гарантируем содержимое элемента body. если ты хотите получить доступ к XML страницы прямо тогда я рекомендую вам явно сделать файл .xhtml или запросите его как XML, например: "

Ответы [ 4 ]

2 голосов
/ 27 января 2010

Этот jquery должен сделать это: 

  $(document).ready(function() {
        $.get("next_page.html", function(data) {
            $("link[rel='stylesheet']").attr("href", $(data).filter("link[rel='stylesheet']").attr("href"));
        });
    });
1 голос
/ 10 февраля 2010

Это справедливо для команды разработчиков jQuery: «парсируя прямой HTML, мы гарантируем только содержимое элемента body. Если вы хотите получить прямой доступ к XML страницы, я рекомендую вам явно создать файл .xhtml или запрос это как XML, например: "

$.ajax({ dataType: "xml", file: "some.html", success: function(data){ ... });
1 голос
/ 27 января 2010

Попробуйте это: 

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

Вы на самом деле не делали AJAX-вызов, возможно, в этом была проблема, или вы просто забыли добавить часть .load? Это должно работать просто отлично, учитывая, что оно находится внутри блока $(document).ready(function() { ... });.

0 голосов
/ 17 ноября 2012

у меня это работает на моем сайте. Я просто добавил идентификатор в тег ссылки, куда загружен мой css. и затем вы изменяете attri href (вы правильно поняли эту часть).

HTML: 

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

И я использую select, чтобы позволить пользователю выбрать его скин. 

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