Replace <div> with another HTML page

Question

I'm working on an HTML page ( a template ) using jQuery , CSS , HTML without server-side and I have a problem when I want to do to replace a <div> with another HTML page from my computer.

On the main page i have this code:

<nav>
    <h2 class="hidden">Our navigation</h2>
    <ul>
        <li><a onclick="nextpage(1);">Home</a></li>
        <li><a onclick="nextpage(2);>Contact</a></li>
    </ul>
</nav>
<div id="pageContent">
        Hello motto
        </div>

and JavaScript block is this:

function nextpage(idd){
$.get( "pages/page1.html", function( data ) {
  $("pageContent").html(data);
});

}

When I push "Home" button then must replace content of pageContent with the HTML code from my website-s root address: ../../pages/page1.html .

I tried to implement these examples and withour any good result:

• Replace current html page with ajax response
• How to get source code of html page using jquery
• jQuery.get()

I want to replace a DIV without using Server-Side API's.

Thanks!

Answer 1

You misssed the # for id selector:

$("#pageContent").html(data);

---

Other than this you can use .load() method for it, because you can target specific div to load in your page you can do this:

$("#pageContent").load('pages/page1.html #divid2load');
// will load the #divid2load div from the html page.

Answer 2

The file needs to be placed on a web server then executed. For security reasons normally browsers don't allow file:/// protocol for AJAX calls. See here for your error error:XMLHttpRequest cannot load file

As you asked server less i don't have experience on my own, but read about it, run your chrome instance with chrome.exe --allow-file-access-from-files More Explanation Here

Hope this Helps..........