Skip to main content

AJAXify site



I have legitimate reasons to do what I am trying to explain. I have an existing site say abc.com which has regular pages etc. everything written in php. Now I would like to AJAXify the site i.e. when a user clicks on a link, it should fetch the link using AJAX and replace the page contents. This is the easy part and I can achieve it using jQuery get function.





Now the problem comes when the user bookmarks the page. I can use hash tags to specify if the user is on another page, but instead of using javascript to fetch the new page again, is it possible to fetch it directly using PHP when the page is called.





Can you please give me an outline on how to achieve the above. This functionality is similar to what Facebook has.





Thankyou for your time.



Source: Tips4all

Comments

  1. It's a fairly simply process of (1) Parsing the hash tag, and (2) Loading the content via Ajax as you normally would.

    If you load more content when the user clicks on the page, just be sure to always correctly modify the hash tag to reflect what's on the page.

    Here's a quick example to play around with. Click on a name and note the hash tag. The relevant Javascript looks like this :

    // Go straight to content if it's in the hash.
    $(document).ready(function(){
    load_story_from_hash();
    });

    // Call this function whenever user clicks on a hash link
    function set_hash(hash){
    window.location.hash = hash;
    load_story_from_hash()
    }

    // Actually load content based on the hash in the URL
    function load_story_from_hash(){

    var hash = window.location.hash;
    hash = hash.replace(/^#/, '');

    if (hash) {

    $('#post_container').load(hash+'.html', {}, function(){
    $.scrollTo('#post_container', 1000);
    });

    }

    }

    ReplyDelete
  2. The answer is no, you can't get the value of the URL hash server side. See How to get Url Hash (#) from server side.

    You'll have to get the hash value client-side and make an extra request.

    ReplyDelete
  3. Well you can use one of these tools or roll your own. Uses window.location.hash along with other tricks.


    YUI - Browser History Manager
    Really Simple History (RSH)

    ReplyDelete
  4. The best way to do this is to have one index.php that loads all other pages based on the URL parts after it. For instance:

    http://www.example.com/index.php/reports/employees/hoursWorked

    In this case index.php will run, it can see what's being requested is is the hours worked report, and load that content. The problem is, if index.php then loads all other content after that using AJAX, the URL in the browser will never change.

    One way around that problem would be to put a "Link to this page" link on every page that contains that form of URL for users to bookmark.

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex