Question

Possible Duplicate:
How AJAX is done in github source browse?

At the moment I have a div and the following code on a link:

<a href="#" onclick="$('div#content').load('Admin/users.php');" id="admin-panel-icon"></a>

Basically, that just loads the file users.php in to the div content that is on the index.php page. In the URL bar, a # just gets added after index.php taken from the href=”#”.

So I have made it now so that the link looks like the following:

<a href="#AdminUsers" onclick="$('div#content').load('Admin/users.php');" id="admin-panel-icon">

But now there is the problem of bookmarking and page refreshing. How would I go about making it so that when a user visits index.php#AdminUsers it loads the users.php file contents in to the div #Contents?

I imagine there is maybe a better solution to what I’m doing. I mean ideally I would like people to be able to visit /Admin/users.php and not have any hash tags but I’m not sure how I’d go about doing this whilst at the same time only loading the users.php content?

Answer 1

You’ll need to check onLoad ($(document).ready()) if your URL has hashes.
If it does, jQuery should load the specified content. But you’ll have to link somehow ‘#AdminUsers’ to ‘Admin/users.php’. I’d recomend using hidden inputs for that.

First of all, create a function to load ajax content (instead of doing that directly on links)

function loadContent(page){
    $('div#content').load(page);
}

and in your link:

<a href="#AdminUsers" onclick="loadContent('Admin/users.php');" id="admin-panel-icon" ></a>

and somewhere, in every page:

<input type="hidden" name="AdminUsers" id="AdminUsers" value="Admin/users.php" />

Note that I’ve put a custom hash (AdminUsers) in the href. So, when the user clicks on it, it’ll put the desired hash on the url.

And finally, the function to check the hash on load:

$(document).ready(function(){
    if(window.location.hash){
        var hash = window.location.hash;
        $target = $('#'+hash.slice(1));
        if ($target.length) {//found the hidden input field with your URL
            loadContent($target.val());
        }
    }
});

If you want to display the full page when directly accessed, do: (in PHP):

<?php if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) ||
 strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest'): //not ajax -> display header ?>
<div id="header">
   <!-- header content -->
</div>
<?php endif; ?>