How do I load results into div with specific data attributes using jquery?

user_15127398 0
Viewed 262

I want to load content from multiple other pages into one page, and organize the content based on their data attributes. I am able to load the content but am struggling to get the data to load in specified parts of the page (based on the data attribute within a div tag).

I'm totally new to jquery so any help would be appreciated.

Script:

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

Contents of 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>

Contents of 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>
html jquery javascript
1 Answers

You can use $.ajax to do this

$(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>

user_4012780
Related