0

I am trying to develop a website and do a pretty standard thing that I see in common webpages. I have an index.html page where I have the menu bar through which the user can navigate to other pages. Now, instead of opening separate pages, I am loading the contents of other pages in the <div id="content-wrapper"></div> of the same index.html page.

The script that allows me to do this is as shows below:

<script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
 function getPage(url) {
    $("#content-wrapper").load(url);
 }
 </script>'

and the navigation link looks like:

<a href="#" title="" class="active" onclick="getPage(&#39;./web/contact/contact.html&#39;);">Contact</a>

This is working fine, except since the contents are loaded in the index.html site, the URL in the address bar of the browser did not change. Hence, if I refresh the page, I am taken to the home page. So, the user will not be able to share any specific page using the URL.

I tried to find ways people do it and found that mostly they use a form element with post method, but couldnt find a good tutorial to do this. (Possible duplicate question without satisfactory answer). Other answer I found is the use of jQuery Address plugin, but wasn't sure which one is better.

Any solution or guidance for this is much appreciated.

Community
  • 1
  • 1
Amitava
  • 431
  • 2
  • 6
  • 21
  • Well not many people load pages inside divs for navigation, but what you want to do is essentially spoof the address bar and for obvious security reasons this is impossible. You should use a template driven PHP design to share elements such as navigations bars, side bars, footers between pages, because along with you refresh issues, you are also going to run into issues with users that try to navigate back, bookmark, share etc any of your pages. – Wobbles Oct 18 '15 at 23:16
  • Try using `$.holdReady()` , `history` , setting `location` to `index.html#id` of content loaded , if `index.html#id` reloaded , call `.load("#id")` before `.ready()` event ; see http://stackoverflow.com/q/29986657/ – guest271314 Oct 18 '15 at 23:19
  • @wobbles, it is not impossible, please look at https://developer.mozilla.org/en-US/docs/Web/API/History_API – Cameron Oct 19 '15 at 00:01
  • That's a pretty ugly way to go about page navigation, might as well just use an iframe at that point and save the headache. – Wobbles Oct 19 '15 at 00:04

2 Answers2

2

You can change the url in the address bar by adding the following to your getPage function. 

if('pushState' in history)
     history.pushState(null,'',url);

However, if you now hit reload you will just get the contents of your div, not index.html. So you will need to implement server code to return index.html with the correct content for each url.

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70
1

Consider using some basic PHP and learning to do templates that way.

Very basic example:

index.php:

<?PHP
if (isset($_GET['page'])
{
    $pageURL = 'pages/'.$myPage.'.php';
    if (!file_exists ($pageURL))
        die("invalid page");
} else {
    $pageURL = 'pages/home.php';
}
$myPage = $_GET['page'];
?>
<html>
<body>
<div id="header">
    <?PHP include('header.php');?>
</div>
<div id="body">
    <?PHP include($pageURL);?>
</div>
<div id="footer">
    <?PHP include('footer.php');?>
</div>
</body>
</html>

header.php:

<a href="index.php?page=home">home</a>
<a href="index.php?page=info">info</a>

pages/home.php

<b>This is my home page</b>

etc etc etc, you can probably figure out the rest.

Wobbles
  • 3,033
  • 1
  • 25
  • 51
  • I understand PHP is the way to go and I used it before, need to freshen up. But I was wondering is something like this webpage can be done, where # character is used after index.html to load different pages. http://www.tamu.edu/research/index.html#overview – Amitava Oct 19 '15 at 00:38
  • That's not loading a different page, it merely loading that anchor within the index page index.html and index.html#overview are the same, just scroll up and down. Now you CAN catch the entire query string and check for #somePage in PHP, but just passing a parameter is usually a little safer and easier. – Wobbles Oct 19 '15 at 00:49
  • Thank you. Sorry, my mistake, it was just the anchor. Since everyone is suggesting the professional way is to go with PHP, I will work on that method. Thanks everyone. – Amitava Oct 19 '15 at 01:02