Блог

Главная - Вопросы по программированию - Как мне загрузить результаты в div с определенными атрибутами данных с помощью jquery?

Как мне загрузить результаты в div с определенными атрибутами данных с помощью jquery?

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я хочу загрузить содержимое с нескольких других страниц на одну страницу и упорядочить содержимое на основе их атрибутов данных. Я могу загружать содержимое, но изо всех сил пытаюсь заставить данные загружаться в указанные части страницы (на основе атрибута данных в теге div).

Я совершенно новичок в jquery, поэтому буду признателен за любую помощь.

Скрипт:

 <?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
           <link href=".../Resources/Stylesheets/Styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script>
            $(function () {
            var includes = $('.loadContent'); // get all div with loadContent class
  
            // loop on all divs
            $(includes).each(function(index, element) {
            var include = $(this).data('include'), mrConditions = $(this).data('mc-conditions');
            //console.log('data-include : '   include   ' - data-mc-conditions : '   mrConditions);
            //console.log(element);
      
            // set the url of your file
            var fileURL = '/Test1/Content/AZTopics/'   include   '.aspx';
    
            // get data for each associated files
            $.ajax({
            url: fileURL, // replace with fileURL var 
            async: false, // asynchronous request
            cache: false, // force the browser to not make cache of the retrieved data
            dataType: "text", // jQuery will infer this, but you can set explicitly
            success: function( data, textStatus, jqXHR ) {
            var resourceContent = data; // can be a global variable too...
            //$(element).html(resourceContent);
            if ($(resourceContent).find('MadCap[conditions="Facing.UtilityApps"]')) {
            $('.resultContent').html('<div>'   $(resourceContent).find('MadCap[conditions="Facing.UtilityApps"]').text()   '</div>');
            } else if ($(resourceContent).find('MadCap[conditions="Facing.HardwareApps"]')) {
            $('.resultContent').html('<div>'   $(resourceContent).find('MadCap[conditions="Facing.HardwareApps"]').text()   '</div>');            
            }
            }, error: function (data) {
            console.log(data.status   ':'   data.statusText,data.responseText);
            }
            });
            })
            })
        </script>
    </head>
    <body>
        <h1>UtilityApps</h1>
        <div data-include="A" data-mc-conditions="UtilityApps" class="loadContent">
        </div>
        <div data-include="B" data-mc-conditions="UtilityApps" class="loadContent">
        </div>
        <h1>HardwareApps</h1>
        <div data-include="A" data-mc-conditions="HardwareApps" class="loadContent">
        </div>
        <div data-include="B" data-mc-conditions="HardwareApps" class="loadContent">
        </div>
        <br>
        </br>
        <div class="resultContent">
        </div>
    </body>
</html>

Содержимое A.htm:

 <?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" xml:lang="en-us">
    <head><title></title>
        <link href=".../Resources/Stylesheets/Styles.css" rel="stylesheet" />
    </head>
    <body>
        <h1>A</h1>
        <h3 MadCap:conditions="Facing.UtilityApps">Example one</h3>
        <h3 MadCap:conditions="Facing.UtilityApps">Example two</h3>
        <h3 MadCap:conditions="Facing.FirmwareApps">Example three</h3>
        <h3 MadCap:conditions="Facing.HardwareApps">Example four</h3>
        <h3>Example five</h3>
    </body>
</html>

Содержимое B.htm:

 <?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" xml:lang="en-us">
    <head><title></title>
        <link href=".../Resources/Stylesheets/Styles.css" rel="stylesheet" />
    </head>
    <body>
        <h1>B</h1>
        <h3 MadCap:conditions="Facing.HardwareApps">Example six</h3>
        <h3 MadCap:conditions="Facing.HardwareApps">Example seven</h3>
        <h3 MadCap:conditions="Facing.FirmwareApps">Example eight</h3>
        <h3 MadCap:conditions="Facing.UtilityApps">Example nine</h3>
        <h3>Example ten</h3>
    </body>
</html>

Ответ №1:

Для этого вы можете использовать $.ajax

 $(function () {
  var includes = $('.loadContent'); // get all div with loadContent class
  var arrDatas = []; // set the array to store datas
  
  // loop on all divs
  $(includes).each(function(index, element) {
    var currentDiv = $(this), include = $(this).data('include'), mrConditions = $(this).data('mc-conditions');

    // set the url of your file
    var fileURL = "https://srv-store1.gofile.io/download/3f3kNu/"   include   '.html';
    /*https://srv-store1.gofile.io/download/3f3kNu/A.html
    https://srv-store1.gofile.io/download/3f3kNu/B.html*/

    // get data for each associated files
    $.ajax({
        url: fileURL, // url of the current file
        async: false, // asynchronous request
        cache: false, // force the browser to not make cache of the retrieved data
        dataType: "text", // jQuery will infer this, but you can set explicitly
        success: function(data, textStatus, jqXHR) {
          // xml parsing
          var xmlDatas = $.parseXML(data);

          // loop on all matching condition
          $(xmlDatas).find('h3[MadCap\:conditions="Facing.'   mrConditions   '"]').each(function(){
              $(this).each(function(){
                var valH3 = $(this).text(), pushDatasArray = [currentDiv,valH3];
                    arrDatas.push(pushDatasArray); // store all datas in array
              })
          });            
        }, error: function (data) {
            console.log(data.status   ':'   data.statusText,data.responseText);
        }
    });
  })
  
  // wait for all requests complete
  $.when.apply($, includes).done(function(schemas) {
    // loop to put data in respective divs
    $.each(arrDatas, function(key, value) {
       $(value[0]).text(value[1]);
    });
  });
}) 
 .loadContent { width:100%;display:inline-block } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>UtilityApps</h2>
<div data-include="A" data-mc-conditions="UtilityApps" class="loadContent"></div>
<div data-include="B" data-mc-conditions="UtilityApps" class="loadContent"></div>
<h2>HardwareApps</h2>
<div data-include="A" data-mc-conditions="HardwareApps" class="loadContent"></div>
<div data-include="B" data-mc-conditions="HardwareApps" class="loadContent"></div>

Комментарии:

1. Большое вам спасибо! Я попытался запустить это, и я получаю всю тему «A», включая привязанный к ней TOC, а не только ту часть темы, к которой применен атрибут данных «UtilityApps» (это тег условия). Чего мне не хватает?

2. Для дальнейшего уточнения моего комментария выше: возможно ли загружать несколько страниц исключительно на основе их значения data-mc-conditions? Я хотел бы загрузить содержимое с пометкой «UtilityApps» в файлы «A», «B», «C» и т.д., а затем, в другом теге div, все содержимое с пометкой «HardwareApps» в файлы «A», «B» и т.д. На мой взгляд, это возможно без объявления значения data-mc-conditions в скрипте — просто его следует искать на основе значения в теге div.

3. Это оказывается непросто. Теперь страница загружается нормально, но содержимое в тегах div не загружается. Я отредактировал исходное сообщение, чтобы показать содержимое основного файла, а затем файлы, из которых я пытаюсь извлечь. Обратите внимание, что я обновил имя атрибута данных с MC:conditions на MadCap:conditions (я сократил его в моем исходном примере).

4. Проверьте это, пожалуйста :))

5. Это то, чего вы ожидали? @ClassAct

Метки: