Load HTML Page Dynamically into Div with Jquery

Load HTML page dynamically into div with jQuery

There's a jQuery plugin out there called pjax it states: "It's ajax with real permalinks, page titles, and a working back button that fully degrades."

The plugin uses HTML5 pushState and AJAX to dynamically change pages without a full load. If pushState isn't supported, PJAX performs a full page load, ensuring backwards compatibility.

What pjax does is that it listens on specified page elements such as <a>. Then when the <a href=""></a> element is invoked, the target page is fetched with either the X-PJAX header, or a specified fragment.

Example:

<script type="text/javascript">
  $(document).pjax('a', '#pjax-container');
</script>

Putting this code in the page header will listen on all links in the document and set the element that you are both fetching from the new page and replacing on the current page.

(meaning you want to replace #pjax-container on the current page with #pjax-container from the remote page)

When <a> is invoked, it will fetch the link with the request header X-PJAX and will look for the contents of #pjax-container in the result. If the result is #pjax-container, the container on the current page will be replaced with the new result.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.pjax.js"></script> 
  <script type="text/javascript">
    $(document).pjax('a', '#pjax-container');
  </script> 
</head>
<body>
  <h1>My Site</h1>
  <div class="container" id="pjax-container">
    Go to <a href="/page2">next page</a>.
  </div>
</body>
</html>

If #pjax-container is not the first element found in the response, PJAX will not recognize the content and perform a full page load on the requested link. To fix this, the server backend code would need to be set to only send #pjax-container.

Example server side code of page2:

//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
  Go to <a href="/page1">next page</a>.
</div>
//else send full page

If you can't change server-side code, then the fragment option is an alternative.

$(document).pjax('a', '#pjax-container', { 
  fragment: '#pjax-container' 
});

Note that fragment is an older pjax option and appears to fetch the child element of requested element.

How to dynamically load content into DIV using Javascript

What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.

For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.

Content of your main page index.html could look like this (I removed those images in nav bar)

<div class="mainwrapper">  <div class="navbox" id="js-navigation">    <a href="./about.html">About</a>    <a href="./location.html">Location</a>    <a href="./contact.html">Contact</a>    <a href="./inquiries.html">Inquiries</a>    <a href="./employees.html">Employees</a>  </div>
  <div id="header"></div>
  <div id="js-content">    <!-- content will be loaded here -->  </div></div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script><script>  $(document).ready(function() {    $('#js-content').load('/about.html');
    $('#js-navigation a').click(function(e) {      e.preventDefault();      $("#js-content").load(e.target.href);    })  });</script>

How to load content dynamically into a div from other divs

Without jQuery:

function show(cid){var content = document.getElementById(cid).innerHTML;document.getElementById("box-load").innerHTML = content;}

<!-- CONTENT SOURCE --><div class="box"><div id="1">1a</div><button onclick="show('1')"></button></div><div class="box"><div id="2">2b</div><button onclick="show('2')"></button></div><div class="box"><div id="3">3c</div><button onclick="show('3')"></button></div><div class="box"><div id="4">4d</div><button onclick="show('4')"></button></div>
<!-- CONTENT UPDATE CONTAINER --><div id="box-load">  <!-- LOAD CONTENT FROM THE BOXES HERE, RESPECTIVE OF THEIR BUTTONS --></div>

Dynamically load new html page into another DIV (jQuery)

Use your element ids (namely navigation, content and header) in place of "#result".

load html page into div with jquery

.load only pulls the HTML - not CSS, JS, etc. I suggest you import the styles and scripts, or -- less preferably -- use an <iframe>.

Load HTML Page Dynamically into Div with Jquery