CODEWITHSUNDEEP
jqueryhtml
loyal osterhoudt
loyal osterhoudt

Reputation: 21

Load external HTML in multiple divs

I've looked at a few pages addressing multiple divs to load files but they use php. Is it possible to load from the NAV section external html pages into a multiple divs on the same page using jquery? I have seen and worked out where I can load one div but not seen how to load into multiple div on same page. Is this possible?

I am converting from a frame based system that uses 8 windows - 3 windows for viewing docs that are opened via - 1 main-menu that opens the sub-topic-menu - 1 subtopic menu that opens into the index windows.
- 3 index windows that sends the files into the viewing windows

Heres the flexbox page

.row1 {
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flexbox;
     display: -ms-flex;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: nowrap;
     min-height: calc(70vh); /* set min container height to viewport height */
}

.row2 {
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flexbox;
     display: -ms-flex;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: nowrap;
     min-height: calc(30vh); 
     /* set min container height to viewport height */
}


.col-1 {
    flex: 0 1 28%;
    background: beige;
    border: 1px solid black;
    font-size: 2em;
    padding: 4px;
    overflow: hidden;
    overflow: scroll;
    box-sizing: border-box;
    min-height: calc(70vh); /* set min container height to viewport height */
}

.col-2 {
     display: flex;
     flex: 0 1 16%;
     margin-left: auto;
     background: ;
     border: 1px solid black;
     padding: 4px;  
     text-overflow: ellipsis;
     max-height: 70%;
     overflow: hidden;
     box-sizing: border-box;
     min-height: calc(70vh); /* set min container height to viewport height */   
}

.col-3 {
    flex: 0 1 28%;
    background: beige;
    border: 1px solid black;
    padding: 4px;
    overflow: hidden;
    overflow: scroll;
    box-sizing: border-box;
     min-height: calc(30vh); /* set min container height to viewport height */
}


.col-5 {
    flex: 0 1 16%;  
    margin-left: auto;
    background: #eee;
    border: 1px solid black;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
    min-height: calc(30vh); /* set min container height to viewport height */
    min-width: calc(10vw);
}

body {width: 100%; height: 100%; margin: 0; padding: 0}

li.en24-N {  
    color: black;
	font-family: arial, Sans-serif;
	font-size: 24pt;
}

p {
    color: black;
	font-family: arial, Sans-serif;
	font-size: 12pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
     <title>frame_scren_lang</title>
    
     <!--Make sure your page contains a valid doctype at the very top-->

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <section class="row1">
      <div class="col-1" id="file-A">view file A</div>
      <div class="col-1" id="file-B">view file B</div>
      <div class="col-1" id="file-C">view file c</div>
      <div class="col-2" id="subtopic-menu">sub-topic-menu</div>
    </section>

    <section class="row2">
      <div class="col-3" id="index-A"> index to view A files</div>
      <div class="col-3" id="index-B"> index to view B files</div>
      <div class="col-3" id="index-C"> index to view C files</div>
      <div class="col-5" id="main-menutoc">main-menu</div>
    </section>
  </body>
</html>

Upvotes: 2

Views: 317

Answers (1)

jla
jla

Reputation: 4761

If the files you are loading are from the same domain as the current page this is pretty simple. You can use the get function in Jquery to get the contents as a string and add them as innerHTML to the div.

<script>
function fillElementFromFile( element, file ) {
    $.get( file ).success( function( data ) {
        // Once the file is fetched the element is filled with it:
        element.innerHTML = data;
    });
}

$(document).ready(function() {
    // array of the files to fetch
    var files = [ "url-1", "url-2", "url-3" ];
    // array corresponding to the one above, of the divs to fill
    var elementIds = [ "#file-A", "#file-B", "#file-C" ];

    $.each( files, function ( index, file ) {
        // Iterates through each file and element
        // Calls the function above to fill each div with its file
        fillElementFromFile( $( elementIds[ index ] ), file );
    });
});
</script>

If they aren't from the same domain then you'll get an error caused by your browser's implementation of the Same Origin Policy, a security measure designed to make phishing attacks less likely. Since you don't want to use PHP yourself, you can circumvent the Same Origin Policy with any one of a number of web apps out there that already do this. https://multiverso.me/AllOrigins/ is as good as any, and it's free so I'll use that in this example. You'll replace the fillElementFromFile( element, file ) function with this:

function fillElementFromFile( element, file ) {
    var jsonUrl = 'http://allorigins.me/get?url=' + encodeURIComponent(file) + '&callback=?';
    $.getJSON( jsonUrl, function( data ) {
        element.innerHTML = data.contents;
    });
}

Upvotes: 1

Related Questions