How can I load multiples html files into a Div

user_13078440 0
Viewed 231

here's my case, I've been working on online manual for the company that I work and recently I decide to make it look better by changing some visual elements, so I thought, why not use bootstrap, and So I did. Here's the thing, I have a tree-view where I have each part (titles) of the manual, and those titles load an HTML file where I have the information and links to CSS file. I used to load the content into an Iframe, but that seems to be a terrible idea for all the problems I've deal with it trying to apply CSS, So I decided I'll use DIV'S instead of the Iframe.

Here goes the question:

IS THERE ANY WAY TO LOAD ALL MULTIPLE HTML FILES INTO A SINGLE DIV BY CLICKING EACH TIME A TITLE?

Because All the titles are contained in a "a" tag, and then I use to target it into the Iframe, but now it's not that easy with DIV'S

I've try a little bit of JavaScript and nothing, with Jquery the only thing I've done it's making a function and that function load a specific html file, and by trying adding some parameters to it and it doesn't recognized the path for those HTML files, and it happens the same with InnerHTML.

PD: Those files are locally hosted in a server where they are displayed

Here's a little bit of what I got...

JS:

     <script type="text/javascript">
        $(document).ready(function(){
          $('#content').load('intro.html')
        });
     </script>

HTML:

<div class="bg-light border-right" id="sidebar-wrapper">
      <div class="list-group list-group-flush">
        <ul id="tree3" class="list-group-item list-group-item-action bg-light">          
            <li><a href="PATHFILE_1">TITLE 1</a>
                <ul>
                    <li><a href="PATHFILE_2">TITLE 2</a></li>
                    <li><a href="PATHFILE_3">TITLE 3</a>
                </ul>
            </li>
       </div>
</div>

And a want to display all the FILES into this div:

<div id="page-content-wrapper">
  <div class="container-fluid">
    <div id="content">
      HERE THE HTML FILES
    </div>
  </div>
</div>
css html jquery javascript
2 Answers

I recommend you add a class to the a elements you want to load on the div, for instance class='dynamic'. Set a click handler to all those a.dynamic elements, get the link by using the href attribute of the target, and use preventDefault so the default behaviour (navigating) is not triggered:

$(body).on("click", "a.dynamic", function(event) {
  $('#content').load(event.target.href);
  event.preventDefault();
}

Remember to add the class on the links:

<a class="dynamic" href="PATHFILE_2">TITLE 2</a>

Note that your dynamically loaded HTML should have only the partial content, no html or body tags. That being said, it's better to not use a elements to trigger the load:

<div class="dynamic" data-href="PATHFILE_2">TITLE 2</div>

And retrieve the url with this:

$('#content').load(event.target.dataset.href);
user_2420760

As far as I know, you cannot load multiple HTML files in one div container.

But why don't you just use multiple div elements inside your #content? You can generate those divs dynamically when one of the hyperlinks is clicked. Each div will then load up one of your HTML files.

The HTML structure stays the same as you have posted it above. In JavaScript / jQuery it would look something like this: 

$('#tree3').on('click', 'a', function (e) {
  e.preventDefault(); 
  e.stopImmediatePropagation(); 

  // clear the entire content div
  $('#content').empty(); 

  let parentLi = $(this).closest("li"); 

  // load the HTML content for the hyperlink that has been clicked.
  let dynamicDiv = $('<div></div>'); 
  $('#content').append(dynamicDiv); 
  dynamicDiv.load($(this).attr('href'), function(){
    // done loading the main HTML content 
  });

  // check if there is a list inside the li element
  let subList = parentLi.children("ul");
  if(subList.length && subList.length > 0){
    $.each(subList.children("li"), function(k, v){
      let subLi = $(v); 
      let hyperlink = $('a', subLi).attr('href'); 

      // load the HTML content for each of the sub entries
      let dynamicDiv = $('<div></div>'); 
      $('#content').append(dynamicDiv); 
      dynamicDiv.load(hyperlink, function(){
        // done loading...
      });
    });
  }
});

If you want to have more than two levels in your list, you can modify the code and make it recursive. So instead of iterating through the li elements of the subList once, you would have to check whether those li elements contain other subLists recursively. The overall logic for generating the divs and loading up the HTML content would stay the same.

For styling purposes I recommend giving the main #content container an overflow-y: auto. This way you only have a single scrollbar for the entire content. The divs that are generated dynamically will adjust their height according to the HTML content.

user_130793220
Related