Dynamically change page content between divs?

Question

I am looking for a way to change a single pages content instead of redirecting a user to a new page using jQuery or anything similar. I am quite new to scripting, so help would be greatly appreciated.

I've gone ahead and created a quick mock up in jsFiddle that demonstrates the basic layout of the site and the content that I'd like to change when a user requests a different page:

http://jsfiddle.net/Syrne/8pMnR/

CODE:

HTML:

<div class="container">
    <div class="navbar">
        <div id="navWrap" class="container">
            <div class="nav-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>

                    </li>
                    <li><a href="#">Link 1</a>

                    </li>
                    <li><a href="#">Link 2</a>

                    </li>
                    <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li>
                                <!-- DoW -->
                                <li class="dropdown-submenu">   <a tabindex="-1" href="#">Menu</a>

                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">Option 1</a>

                                        </li>
                                        <li><a tabindex="-1" href="#">Option 2</a>

                                        </li>
                                        <li><a tabindex="-1" href="#">Option 3</a>

                                        </li>
                                    </ul>
                                </li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <hr></hr>
    <div id="main_page">
        <p><b>MAIN CONTENT</b></p>
        <p>This content should change dynamically when a user follows a page link.</p>
        <hr></hr>
    </div>
    <div class="footer">
        <p>&copy; 2013</p>
    </div>
</div>

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
#main_page {
    text-align: center;
}

.footer {
    text-align: center;
}

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;

  vertical-align: top;
}

#navWrap {
    text-align: center;
}
}

As you can see, the middle area of the site is where the action should be happening. the rest (nav bar and footer) should stay fixed.

For reference, I've pulled up this guide that utilizes jQuery, "Modernizr" and HTML5's history API in order to preserve unique URL's for each change of content; this is exactly what I want to do, but I cannot seem to wrap my head around how to make it work for my current design. Any help is greatly appreciated, even a light hint to help me on my way. I am very new to web design/development and have a LOT to learn.

Answer 1

All you need is AJAX. The basic procedure may be:

1. Attach a click event on navigation links.
2. When user clicks the link, prevent default action and get what is in href.
3. Use AJAX to get contents from that link.
4. Update your main content div with new content.

EG:

$('nav li').on('click', 'a', function(e){ //step 1
  e.preventDefault(); //prevent default action, step2
  var url = $(this).attr('href'); //get the url, step 2

  $.ajax({ //step 3
    url: url,
    //your other options
    success: function(response){ //on success
      $('YOUR MAIN DIV').html(response); //update your div, step 4
    }
  });
});

Edit Based on Comment

There is a problem with your implementation. You are targeting $('#link1') which doesn't exists. Change the links of your navigations like this:

<ul class="nav navbar-nav">
   <li><a href="#">Home</a></li>
   <!-- The script below will get the data from href attribute of anchor tag -->
   <!-- So your href attribute should target file you want to load your content from -->
   <li><a href="external.html">Link 1</a></li> 
   <li><a href="external2.html">Link 2</a>
   ...
</ul>

Then use the following code.

$(document).ready(function(){
    $("ul.nav li a").click(function(e){ 
        e.preventDefault();
        var url = $(this).attr('href'); //get the link you want to load data from
        $.ajax({ 
         type: 'GET',
         url: url,
         success: function(data) { 
            $("#main_page").html(data); 
        } 
       }); 
     });
  });

Or, if you want your current implementation to work provide id to your anchor tag like this

<a href="#" id="link1">

Also be sure to wrap your script inside $(document).ready(function(){})

Answer 2

I believe you should check jQuery Mobile,it will handle AJAX loaded pages and preserving the URL

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html