1

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!

Community
  • 1
  • 1
Alin Popa
  • 211
  • 2
  • 4
  • 14
  • 1
    Why not simple `$("#pageContent").load("pages/page1.html");`? – Satpal Jul 09 '14 at 12:50
  • You should check out the jQuery [`load()` function](http://api.jquery.com/load/)... it'll let you target elements within the loaded content as well, e.g. `$( "#result" ).load( "ajax/test.html #container" );` – Mottie Jul 09 '14 at 12:50
  • Satpal, because doesn't work both .load() and $.get() – Alin Popa Jul 09 '14 at 12:59

2 Answers2

3

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.
Jai
  • 74,255
  • 12
  • 74
  • 103
0

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

Community
  • 1
  • 1
Anto king
  • 1,222
  • 1
  • 13
  • 26
  • Without Server-Side if possible – Alin Popa Jul 09 '14 at 13:02
  • Not tried in my own but read about this $.ajaxPrefilter( "json script", function( options ) { options.crossDomain = true; }); See Here for more info http://stackoverflow.com/questions/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-access-allow-for-file – Anto king Jul 09 '14 at 13:13
  • @Alynuzzu - You don't need server-side code, but you do need a *web server* to go about it using AJAX. The web server will be able to take requests and return responses in a way that the AJAX understands and can work with. If you're ever going to put there somewhere where other people can access it, file protocol isn't going to work, anyway, so you might as well do it the way that's going to work from the get-go. – Shauna Jul 09 '14 at 13:50