How to refresh partial content with new URLs?

Question 1

Actually the webpage you give does not only refresh its content. It may look that way, but you can see that header is still flickering aka refreshing(also if you change the content live it will change when you click a link)

There is actually a whole new page. But they use templates to create the content.

One page is a template website that calls different fractions of the webpage(ie footer, header and content). Where the content can just have an other content based on the given input.

This can just be done with php.

Template.php

include "header.php";

include $contentpage;

include "footer.php";

Where you give differnt content file names that you want to load.

Header.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
</head>
<body>
BLALBLA CONTENT

content.php

echo $content;

footer.php

</body>
</html>

This together will create one page wtih a dynamic content and a static header and footer( where you can also add static scripting).

This is just a basic idea on how you can achieve this.

The static content(header and footer) might as well be cashed to load it faster.

Additional info why i think this

Also when you open the link into a tab, you will see that every of that link will contain the header. As with, for example, an iFrame only the dynamic content will be shown in the link.

Question 2

You can do this with pushState and ajax. Take a look at pjax.

Question 3

You can do this with the jQuery load function.

Question 4

I tested the specified website using Firefox with Firebug.In Firebug under Net -> Images we can see all the downloaded images for the particular webpage.

When ever i click on the left menu it's not downloading all the images from the server.For example "123 Contact Form image" in the top left and the cute "Sign Up Goat image" were not downloaded from the server while browsing through different web pages.

But when i click on Ctrl + F5 ,then all the images were getting downloaded from the server.I think they were using Caching mechanism to achieve this functionality.

When in goggled i am able to see that Zend framework provides special API for caching the webpage date and you can find more information in the following link

http://framework.zend.com/manual/1.12/en/zend.cache.html Cache only part of a page in PHP

as per my testing i can conclude that this functionality is achieved by using caching mechanism.

Question 5

There are a lot of ways to do this.

Using jQuery you have $.load

$( "#result" ).load( "ajax/test.html", function() {
    alert( "Load was performed." );
});

if you data is more complex you can use $.ajax

    $.ajax({
        type: 'GET',
        url: "http://www.somewhere.com/json",
        data:bcData,
        error: function(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
        success: function(data){
            var ul = $("<ul/>:);
            for (var i=0;i < data.items.length;i++){
                var li = $("<li/>",{"html":data[i].html});
                ul.append(li);
            }
            $("#someConainer").append(ul);

        }
    });

If you application is complex I would look into using a framework.

I like http://angularjs.org/ but there are many others.

Question 6

the webpage that you referred us to is just a normal site. As you can notice, the links in the left bar takes you to another page. The main content is in a wrapper, but the header, footer and everything else is the same (mostly). This could be achieved by having your content dynamically created (using PHP or other web development languages). Basically you have one big page which contains more blocks or pages inside of it. One of them is the main column and it creates it's content base on the link you give it. Also you could use a .htaccess file to create your redirect so that your link is better formated. Also nkmol's answer pretty much answers your question.

Try looking into web developing frameworks as they could shed more light on your question.

Take a look at this: http://en.wikipedia.org/wiki/Web_template_system

Question 7

In the site you've pointed out they actually refresh the entire page (you can verify this via fiddler or other tools to monitor network traffic.)

As to your question, you could simply use ajax and include in your callback the url you want to set, then you can manually set it with javascript like this:

window.history.replaceState(null, <name to appear in history>, <url>);

Read more about manipulating history here

Question 8

try something like this

header , footer and nav is constant.only content keep changing like this.

header.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        //css goes here

        <script  src="jquery.js"></script>
        ...
    </head>
    <body>
        <div style="float:left;width:40%;">
            <?php include 'left_nav.php';?>
        </div>
        <div style="float:right;width:60%;">

footer.php

        </div>
    </body>
</html>

left_nav.php

  <ul>
    <li><a href="sample1.php">A</a></li>
    <li><a href="sample2.php">B</a></li>
  </ul>

sample1.php

<?php include 'header.php';?>
    First page  Content A
<?php include 'footer.php';?>

sample2.php

<?php include 'header.php';?>
    Second page  Content B
<?php include 'footer.php';?>

Question 9

The example you have provided is simple:

Each of the left menu is an anchor to a new htm file hence the url change. Example:

<div id="left" class="leftmenu">
                    <div class="menuitem"></div>

                    <div id="tour_tab_1" class="menuitem active" onclick="tour_show_tab(1);"><a href="/tour.html"><span class="sprite-left-menu sprite-left-menu-edit"></span>Build web forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>  

                    <div id="tour_tab_2" class="menuitem " onclick="tour_show_tab(2);"><a href="/styling-forms.htm"><span class="sprite-left-menu sprite-left-menu-themes"></span>Add branding</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>      

                    <div id="tour_tab_3" class="menuitem " onclick="tour_show_tab(3);"><a href="/mobile-web-forms.htm"><span class="sprite-left-menu sprite-left-menu-code"></span>Publish anywhere</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_4" class="menuitem " onclick="tour_show_tab(4);"><a href="/form-to-email-submissions.htm"><span class="sprite-left-menu sprite-left-menu-notif"></span>Get notifications</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_5" class="menuitem " onclick="tour_show_tab(5);"><a href="/online-database-forms.htm"><span class="sprite-left-menu sprite-left-menu-submissions"></span>Manage data</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>  
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_6" class="menuitem " onclick="tour_show_tab(8);"><a href="/apps-integrations.htm"><span class="sprite-left-menu sprite-left-menu-apps"></span>Add 3<sup>rd</sup> party apps</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>                      

                    <div id="tour_tab_7" class="menuitem " onclick="tour_show_tab(7);"><a href="/purchase-order-forms.htm"><span class="sprite-left-menu sprite-left-menu-payments"></span>Accept payments</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_8" class="menuitem " onclick="tour_show_tab(6);"><a href="/conditional-logic-forms.htm"><span class="sprite-left-menu sprite-left-menu-rules"></span>Branch forms</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>     
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_9" class="menuitem " onclick="tour_show_tab(10);"><a href="/translate-forms.htm"><span class="sprite-left-menu sprite-left-menu-translations"></span>Go multilingual</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>
                    <div class="menuitem separator"></div>                      

                    <div id="tour_tab_10" class="menuitem " onclick="tour_show_tab(9);"><a href="/sub-users.htm"><span class="sprite-left-menu sprite-left-menu-users-pink"></span>Create subusers</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div>  
                    <div class="menuitem separator"></div>

                    <div id="tour_tab_11" class="menuitem " onclick="tour_show_tab(11);"><a href="/captcha-form-validation.htm"><span class="sprite-left-menu sprite-left-menu-security"></span>Stay secure</a><img class="active_menu_arrow" src="http://dflzqrzibliy5.cloudfront.net/images3/left_menu_active_arrow.gif"></img></div> 
                    <div class="menuitem separator"></div>

                </div>

Each linked page would however include common files like header, left menu and footer. The clicked menu would be made active.

Hope it helps! :)

Question 10

So the issue is you want to load this content, but you don't want to refresh the page.

You don't want to use Ajax, (which honestly is probably the best way you should do this.) And you don't want the page to load again.

If you're using an MVC to build this out, Then the suggested route would be to go the way of the Answer above. Adding PHP includes to keep your header and footer.

But if you really insist on not using any of those.

You could put ALL of your content on the same page and hide them from the start. And using the menu items on the left, show or hide the right one with javascript based on your selection.

That is the only way you're going to be any of this without an MVC, or AJAX, or page Reload.
Highly NOT recommended. But, will do the job...

Question 11

Ignoring the example given this is 2 fold. Getting content and updating the url bar

1) Getting content without a page refresh

Using jQuery you can load content in to a main area of the page as many other answers have stated.

Simplest being

$( "#result" ).load(url);

2) Changing the url.

NOTE: using anything other than a hash (#) means the page reloaded.

Using the hashchange jQuery plugin (https://github.com/cowboy/jquery-hashchange) or jQuery Address plugin (http://www.asual.com/jquery/address/) allows you to use that hash to detect when it changes and perform actions easily.

For more debate on history plugins see: The best Ajax History and Bookmark plugin currently available

Putting it all together

There is jQuery BBQ(http://benalman.com/projects/jquery-bbq-plugin/)

In this example (http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/) you can see the content is loaded from small html files that have only the image and text associated with the tab tab example area