Updating URL bar

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?

If you simply want to change the "#" to "#AdminUsers" you need to change the href attribute to "#AdminUsers". The second part of your problem is a little less clear. — Asad Saeeduddin, Oct 22 '12 at 15:39
As in.. on my site I have a topbar area that doesn't move and then a div underneath called "Content" that everything is loaded in to. If a user was to visit for example index.php#AdminUsers it loads just the index file. How can I make it so that visiting #AdminUsers loads the users.php file contents back in to the div #content? — Tenatious, Oct 22 '12 at 15:42
visiting index.php#AdminUsers has the effect of loading the page index.php then scrolling to whatever element has ID "AdminUsers". If you additionally want to load something using ajax, you need to bind a click handler that makes an ajax request and does something with the response. — Asad Saeeduddin, Oct 22 '12 at 15:45

tobspr · Answer 1 · 2012-10-22T15:47:44.983

1

You can use:

<a href="#AdminUsers" [...]>

Hope that helps.

Edit: You can load the site in hash on load:

window.onload = function() {
  var l_hash = location.hash;
  if(l_hash.length>1) {
   var pagename = location.hash.substr(1);
   //do something with the pagename, e.g.:
    if(pagename=="AdminPage") {
      $('div#content').load('Admin/users.php');
    }
  }
}

edited Oct 22 '12 at 15:47

answered Oct 22 '12 at 15:40

tobspr

8,200
5
33
46

This solution seems to work I guess. Still not sure I'm utilising AJAX correctly though. Ideally I'd rather not use the hashcodes and for users just be able to visit /Admin/users.php. – Tenatious Oct 22 '12 at 15:51
Yes. This is of course an other question. – tobspr Oct 22 '12 at 15:52
But with your current solution, every user can call Admin/users.php directly too .. – tobspr Oct 22 '12 at 15:52
You should do Authentication with a server-side script like php or perl – tobspr Oct 22 '12 at 15:53
But if a user visits /Admin/users.php, they will get only what is shown on that page and not the header section of index.php that should always be there. – Tenatious Oct 22 '12 at 15:59
Yes, but if you have a * ***secret*** * button at your admin page wich e.g deletes all users, every user, not only admin, could use it. – tobspr Oct 22 '12 at 16:00
The page is already protected etc. That's not the issue. – Tenatious Oct 22 '12 at 16:06
Basically, lets say index.php contains a div called #header and then there is the div #content. The header div should be on every page, hence loading content in to #content when a link is pressed. But if a user visits /Admin/users.php directly they only get the content that would be display in #content and they don't get the header that should be there because that is in index.php. Does that make any sense in terms of what I'm trying to achieve? – Tenatious Oct 22 '12 at 16:09
This makes sense. And whats your issue? – tobspr Oct 22 '12 at 16:11
I want it so that when a user visits /Admin/users.php it will load basically users.php in to the index.php div called #content rather than it just loading up the users.php page. And I'd need it to do this for every page on the site. – Tenatious Oct 22 '12 at 16:12
So you could apply a GET parameter isLoadedAjax in ajax requests. If that is NOT set, redirect e.g in Admin/users.php to index.php#AdminUser is that what you are looking for? – tobspr Oct 22 '12 at 16:13
Let me show you with an example of another site. http://dev.evaske.com/HXWP/ If you visit that site you will see the main content gets loaded in the ajax towards the bottom and the header section remains on every page. If you then click a link in the nav menu, for example go to Habbox>About it loads this content in the ajax div and also gives you /about/ in the URL. If you then visit /about/ ie. refresh the page, you get the about content and the stationary header file where as if you do that on my site at the moment, visited /Admin/users.php then you would only get the users.php content. – Tenatious Oct 22 '12 at 16:15
Yes, you have to load the pages via ajax from the main page .. – tobspr Oct 22 '12 at 16:20

Matheus Azevedo · Accepted Answer · 2012-10-22T20:03:14.253

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; ?>

I do want direct access but then there is an issue: Basically, lets say index.php contains a div called #header and then there is the div #content. The header div should be on every page, hence loading content in to #content when a link is pressed. But if a user visits /Admin/users.php directly they only get the content that would be display in #content and they don't get the header that should be there because that is in index.php. Does that make any sense in terms of what I'm trying to achieve? — Tenatious, Oct 22 '12 at 16:08
It does make sense. I've edited the answer with what you want. ;) — Matheus Azevedo, Oct 22 '12 at 16:17

score 0 · Answer 3 · answered Oct 22 '12 at 15:42

0

You can use the jQuery hashchange plugin take a look here http://benalman.com/projects/jquery-hashchange-plugin/

answered Oct 22 '12 at 15:42

Stefan P.

9,489
6
29
43

Updating URL bar

3 Answers3