Question

I am creating a website where I want to load dynamically the pages through AJAX. I am using History.js but I think that I am not doing it very right.

Basically I have an index.php page and some other pages: portfolio.php, contact.php and so on. What those additional php files contain is a simple HTML/PHP code that has to dynamically replace the content of a DIV in the index page, called #post-content.

When I click on a menu link in the index page, with a onClick event the JS function showPage(), taking only the page name without “.php” as argument, is called. The function is declared as the following:

function showPage(page) {
    var History = window.History;
    History.pushState(null, page, "index.php?page=" +page);

    $("#post-content").load(page + ".php");
}

In the above function there are also other visual effects implemented, like the fadeIn or fadeOut, but I removed them to make the code more readable here.

The function gives me everything I need, or almost. Testing my website with Google Chrome, if I click a specific link in the menu, for example “portfolio“, I get to ?page=portfolio.php correctly. This does NOT happens if I type manually the URL in the browser (for example, if someone else gives me the direct link to that page). This is because the function showPage() is not called.

So I included an external code above the index.php page:

<?php
if(isset($_GET['page'])) { // Checks if the url contains the "page" parameter.
?>

<script>
$(function() {
    showPage('<? echo htmlentities($_GET['page']); ?>');
});
</script>

<?
}
?>

This gives me the result I want.

At this point I need an expert advice. Am I doing it right? Is this the right way to implement jQuery AJAX inside of a website? I think I’m doing it wrong, very wrong. Coes on the web are very different than mine, however everything looks like working well. What should I do?

Any help in this discussion will be greatly appreciated 🙂 Thank you!

Answer 1

First thing i want to say – i said that better load do all this stuff at client side – so you support only one code (on client side).

But this would lead to multiple ajax calls after page load. You can prevent this by including data into php code/template as in your example, but in this case you need to support also server side code/changes (if you want to generate page from scratch)

Another way to generate not page but only data that will be fetched via ajax, and include it into page and then use that data with js, instead of doing unnecessary ajax calls.

So next to code:

So you can check this fork: https://github.com/llamerr/history.js/commits/master

As you can see, i simply added frame loading right in init

//simple function to load iframe (may be done with div and ajax)
function loadiframe() {
    $('#iframe').load('../index.php');
}

and

// Log Initial State
History.log('initial:', State.data, State.title, State.url);
//check for state and load what we need
if (State.data.state == 666) {
    loadiframe();
}                    

and

// Bind to State Change
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    // Log the State
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    if (State.data.state == 666) {
        loadiframe();
    }                    
    History.log('statechange:', State.data, State.title, State.url);
});

and

History.Adapter.onDomLoad(function(){
    console.log('loaded');
    $('#loadiframe').click(function(){
        History.pushState({state:666,rand:Math.random()}, "State 666", "?state=666");
    });
});

I haven’t looked and Backbone yet, but seems routes(or something like this) is what you need

http://backbonejs.org/#Router

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

I think it’s doing it’s magic, and automatically detects what state must be loaded (upon load or history change etc) and execute needed functions

Or maybe you can look at this solution – http://haithembelhaj.github.com/RouterJs/

RouterJs is a simple router for your ajax web apps. It's build upon History.js

So using RouterJs you will have same History.js, but with few more features.