Получить содержимое элементов div в JQuery / JQuery Mobile

0

У меня есть 3.html документов. 1: products1.html 2: products2.html 3: allproducts.html

На products1.html и products2.html у меня есть элементы div, показывающие мои продукты, например, из product1.html:

<div data-role="content" id="product1items">

    <ul data-role="listview">
        <li>
        <a href="item1.html" data-ajax="false" data-transition="slide">
            <img src="images/item1.jpg">
            <h2>Item1</h2>

        </a>
        </li>
</ul>
</div>

На allproducts.html я хотел бы получить/извлечь элементы из products1.html и products2.html, поэтому на этой странице будут показаны все мои продукты. Как мне это сделать в JQuery/JQuery Mobile?

Заранее спасибо!

Я не могу опубликовать ответ на свой собственный пост, как Im новый пользователь, поэтому я обновил этот пост.

Теперь у меня есть следующие (только созданные products1.html & allproducts.html). Я пытаюсь загрузить содержимое products1.html в allproducts.html, можете ли вы рассказать мне, что я делаю неправильно?

products1.html:

<html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>  
</head>

<body>

<div data-role="page" id="productpage">

    <div data-role="content" id="product1">
        <ul data-role="listview">
        <li>
        <a href="item1.html" data-ajax="false" data-transition="slide">
            <img src="images/item1.jpg">
            </a>
        </li>
        </ul>
     </div>
 </div>
</body>
</html>

allproducts.html:

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>


</head>

<body>

    <div data-role="page" id="allproductspage">

    <div data-role="content" id="allproducts">
        </div>

<script>
$.get( "products1.html", function( data ) {
  $( ".allproducts" ).append( data );
  alert( "Load was performed." );
});
</script> 

 </div>

</body>
</html>
  • 0
    Конечно, HTML-файлы статичны? Так почему бы вам просто не зашифровать данные?
  • 0
    Какие серверные технологии вы используете? (PHP? ASPX?) Это на самом деле не вопрос jQuery на стороне клиента, поскольку он лучше подходит для решения на стороне сервера, если нет большого количества данных.
Показать ещё 1 комментарий
Теги:
jquery-mobile

1 ответ

3

Вы можете отправить запрос AJAX в html файлы и добавить содержимое ответа к вашему allproducts.html.

    $.get( "products1.html", function( data ) {
      $( "#allproducts" ).html($( "#allproducts" ).html(  )+data );
      alert( "Load was performed." );
    });
  $.get( "products2.html", function( data ) {
      $( "#allproducts" ).html($( "#allproducts" ).html(  )+data );
      alert( "Load was performed." );
    });

Я отредактирую этот ответ, если вам нужны какие-либо технические подробности

Поделиться
  • 0
    Привет Sekai, я (почти) абсолютный новичок, так что, если бы вы могли помочь мне в правильном направлении, это было бы высоко оценено :)
  • 0
    В части кода я запросил html-содержимое products1.html, после того, как я его получил, я взял содержимое и поместил его в файл allproducts.html в div, в котором есть класс allproductsContainer, код javascript должен быть в вашем файле allproducts.html
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню