CODEWITHSUNDEEP
javascriptjqueryhtmlajaxweb
Alin Popa
Alin Popa

Reputation: 211

Replace <div> with another HTML page

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:

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

Thanks!

Upvotes: 1

Views: 4350

Answers (2)

Anto king
Anto king

Reputation: 1222

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

Upvotes: 0

Jai
Jai

Reputation: 74738

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.

Upvotes: 3

Related Questions