Geek Answers Handbook

JQuery + Ajax Hash / History and more

I am trying to get an idea of ​​using URL hashes in jQuery to manage history in Ajax and create links to pages / pages. I tried almost all the plugins there, and I can not get them to work properly, so in fact I have no code examples. But I am open to any suggestions, information, textbooks, etc.

The difference on one of the pages that I am trying to include in this is that I have a page with fill / load jQuery animation, which is also the same page that will load all the content.

.. and from this link I want to go around the entire splash / load animation and directly download the content based on the hash values ​​/ string (in this case #home).

I tried to figure this out for a while, any help is much appreciated, thanks!

+5
source share
2 answers

So what are you facing? Setting a hash tag or handling a hash change?

Of course, setting up hashes is just a matter of putting hashes in links, for example <a href="www.voidsync.com/2010/#page">Link</a>, but I assume this is not your problem.

In order to actually do something with a hash, you must have a listener function that checks, for example, changes the hash every 100 ms and acts accordingly. A simple function might look like this:

$(function() {
    var current_hash = false;
    setInterval(function() {
        if(window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("content.php?page="+current_hash);
        }        
    }, 100);    
});

This (unchecked) function checks every 100 ms if the hash has changed, and if there is one, it refreshes the page via Ajax.

, , , www.voidsync.com/2010/#images, . .

, , , - .

+12

, , . , . ,

$(function() {
var current_hash = false;
setInterval(function() {
    if(window.location.hash != current_hash) {
        current_hash = window.location.hash;
            if(current_hash=='#home'){
                var month = '9';
                var year ='2011';       
                $.ajax({
                    type: "POST",
                    url: "/home.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });                     
            }
            else if(current_hash=='#edit'){
                $.ajax({
                    type: "POST",
                    url: "/edit.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });             
            }
    }        
}, 100);

href;

                    <li><a href="#home">Home Page</a></li>
                <li><a href="#edit">Edit Page</a></li>

, if , - .

+1

More articles:


All Articles