Информация .load() не распознает стили CSS

Я делаю приложение HTML5 и загружаю данные из базы данных в HTML с помощью функции .load() jQuery. Функция отлично работает, но проблема в том, что загруженный HTML-код не изменен таблицей стилей (jQuery Mobile). Причина, по которой я это делаю, заключается в том, что я буду использовать PhoneGap Build для получения приложения для Android.

Вот мой код разбивается на части:

ГОЛОВА:

<head> 
<title>Parking Lot App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<link rel="stylesheet" href="themes/florida_tech.min.css" />

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
    $( "#maps" ).get( "map_list.php");
    window.setTimeout(function(){ document.location.reload(true); }, 10000);
    });
</script>

</head>

ТЕЛО:

<body>  

    <!-- HOME PAGE -->
    <div data-role="page" id="home_page" class="name"  data-theme="a">

    <!-- HEADER HOME PAGE -->

<div data-role='header' id='header'>
    <h2>
    Parking Lot App
    </h2>
    <a href='index.html' data-iconpos='notext' data-icon='home'></a>
</div>

    <!-- CONTENT HOME PAGE -->
<div data-role="content" data-theme="a" id="maps">

</div>

    <!-- FOOTER HOME PAGE -->

<div data-role="footer" data-position="fixed">
    <h3> Senior Design Project </h3>
</div>

</div> <!-- END OF HOME PAGE -->

</body>

И, наконец, файл (после загрузки), с которым у меня возникли проблемы, MAP_LIST.PHP:

<ul data-role="listview" data-inset="true" data-divider-theme="a" data-count-theme="b">
<li data-role="list-divider"> Parking Lots </li>
<li>
    <a href="#mapdata1" 
    data-inline="true"

    > Parking Lot 1
    <span class="ui-li-count">0</span></a></li><li><a href='#info'> Help </a></li>
</ul>

Мне было интересно, есть ли другой/лучший способ вставить данные из базы данных в мой HTML-код, чтобы стиль изменил код.


javascript css jquery-mobile jquery-mobile-listview
person JoseD    schedule 10.04.2014    source источник
comment
@adeneo Я не думаю, что повторяющийся ответ отвечает на это.   -  person Omar    schedule 10.04.2014
comment
insdie MAP_LIST.PHP, в частности, внутри ul $("ul").listview().   -  person Omar    schedule 10.04.2014
comment
@Omar - он отлично отвечает на этот вопрос: при добавлении динамического контента в jQuery Mobile необходимо активировать метод создания для обновления.   -  person adeneo    schedule 10.04.2014
comment
@adeneo при использовании .append() отличается от использования .load() или .get(). Попробуй себя.   -  person Omar    schedule 10.04.2014
comment
@adeneo Я только что попробовал .trigger("create") безуспешно..   -  person JoseD    schedule 10.04.2014
comment
@ Омар, что ты имеешь в виду под $("ul").listview()? твой ответ меня как-то смутил.   -  person JoseD    schedule 10.04.2014
comment
Я скоро добавлю ответ, позвольте мне сначала настроить демо.   -  person Omar    schedule 10.04.2014
comment
Он цитирует прямо из дубликата, который, как он утверждает, не является дубликатом, где вы можете использовать $('ul').listview('refresh');, чтобы обновить список.   -  person adeneo    schedule 10.04.2014
comment
@Omar Я добавил JS .trigger(create) в свой MAP_LIST.PHP, и он заработал после того, как его загрузил html-файл. Большое спасибо   -  person JoseD    schedule 10.04.2014
comment
@adeneo тоже спасибо за помощь. Оба ваших комментария были полезны   -  person JoseD    schedule 10.04.2014
comment
Событие @adeneo .listview("refresh") не будет работать, пока представление списка не будет создано / инициировано.   -  person Omar    schedule 10.04.2014

Ответы (1)


arrow_upward
1
arrow_downward

Использование .load() или .get() отличается от использования функций вставки, например. append() / prepend(). Первые функции используют Ajax для извлечения данных, поэтому вам нужно вызывать расширение после выполнения вызова Ajax.

Использование .get()

$.get("URL", function (data) {
   var list = $(data).find("#listID");
   $("#target_div").append(list);
   $("#listID").listview();
}, "html");

Внутри URL присвойте listview значение id.

Демо – Код

person Omar    schedule 10.04.2014