Контент, загружаемый ajax, не принимает стили страницы - PullRequest
Новая
       2

Контент, загружаемый ajax, не принимает стили страницы

0 голосов
/ 25 июня 2019

С помощью ajax я приношу контент для загрузки своего сайта с информацией. Страница сначала загружает все нормально, затем выполняет соответствующий ajax, но при загрузке ajax и размещении соответствующей информации эта информация не применяет стили веб-страницы. Вот пример того, как мой код будет: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- Styles that you do not recognize -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="content" class="div-short"></div>
    <script src="js/jquery.js"></script>
    <script>
        $.ajax({
            type: 'POST',
            url: "http://localhost:8000/api/pag/5",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data){
                // Dynamic information
                $('#id').html(data);
            }
        });
    </script>
</body>
</html>

Если у кого-то есть какое-то решение или как это можно сделать, это очень полезно для меня. Спасибо

Ответы [ 3 ]

1 голос
/ 25 июня 2019

Пример фрагмента

В приведенном ниже примере ...

  • предположим, что const data возвращается из вашего вызова ajax
  • игнорировать все, кроме jQuery, так как все это только для того, чтобы показать, что стили проходят сквозь пальцы, главное - сосредоточиться на том, как генерируется HTML
  • Я знаю, что не использовал ваш точный код и идентификаторы для создания этого фрагмента. Это не имеет значения - что важно, так это образование, которое вы можете получить, увидев поток данных. 

const data = '[{"species": "dog", "breed": "Husky", "name": "Kenna"},{"species": "cat", "breed": "Siamese", "name": "Jeff"},{"species": "dog", "breed": "Doberman", "name": "Bella"}]';

let parsed_data = jQuery.parseJSON(data);
var html = "";

$.each(parsed_data, function(key, value) {
  html += '<div class="card"><h3>' + value.name + '</h3><p>Species: ' + value.species + '</p><p>Breed: ' + value.breed + '</p></div>';
});

$("#container").html(html);
.card {
  margin: 20px;
  padding: 20px;
  background-color: #EEE;
  font-family: "Arial", sans-serif;
  cursor: default;
}

.card > h3 {
  color: blue;
  cursor: pointer;
}

.card > h3:hover {
  text-decoration: underline;
}

.card > p {
  color: #555;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>

Пояснение

Обратите внимание, как первое, что я сделал с данными, запустил jQuery.parseJSON() на них. Это берет результат из строкового представления в объект javascript.

Затем я перебираю объект javascript с помощью $.each. Я обращаюсь к переменным в формате funcParam.keyName (например, первый доступ value.name).

Я, наконец, включил сгенерированный HTML в переменную, а затем использовал .html(), чтобы добавить его в свой контейнер после $.each (что быстрее, чем использование .append() на каждой итерации цикла).

См. Ниже, где будет размещен код генерации HTML: 

$.ajax({
   type: 'POST',
   url: "http://localhost:8000/api/pag/5",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function(data){
      // run your HTML generation code (like my Snippet example) HERE
   }
});
0 голосов
/ 25 июня 2019

после получения ответа добавьте простой HTML с классом, например, 

$('#id').append('<p class="test">test</p>');

и в заголовке добавьте следующую строку 

<style>
.test { font-size: 50px; }
</style>

, если ваш "p" получит данный стиль, что означаетваша проблема с переменной "data"

0 голосов
/ 25 июня 2019

я думаю, вам нужно отформатировать ваши данные в html ... пример 

$('#id').append("<span class='yourclass'>"+ data.name +"</span>");

, чтобы вы делали thediv со всеми необходимыми данными и стилями, а затем добавляете его в свой div # id

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...