Really Simple AJAX Permalinks

Really Simple AJAX Permalinks

In the midst of coding a website (www.recombine.com), I realized that using my combination of jQuery DOM manipulations with AJAX for the content rendered me without the ability to send people permalinks. I googled a bit, but had trouble discovering solutions that didn’t look like this. FYI, I didn’t and don’t care about the back button. That seems to be way more browser specific.

My solution is very quick:

var urlitems=window.location.href.split("#");
var curpage=urlitems[1];
if(curpage==null){}
else{
var urltoload='/includes/'+curpage+'.php';
$('div#ajaxcontent').load(urltoload);
}

A quick explanation:

  1. “window.location.href” gets the current url.
  2. split(“#”) splits the url into an array at the hash tag junction.
  3. The second item in the array is collected as the page.
  4. If there was no hashtag, no action is taken.
  5. If the hashtag was found, then we load the page with that name (NOTE: the hashtags are equivalent to the filenames in my filesystem).

I’m not certain this is the best, but it was quick, and it seems to work. Like I said, it does not fix the back button, but it allows you to bookmark pages that are loaded via AJAX.

3 Comments

  1. Thanks for the explanation i was looking for this information, but can you tell where i need to put this modification? i mean wich file i need to modify? im using a wordpress template and i want to modify the permalinks in the same way you did it, thanks.

  2. Hi Jack,

    With wordpress, things might be a bit more complicated. Whereas I was using free-form php and had complete control of the file-structure, you have to work within the wordpress framework. I would recommend using the hashtag method as I did, but do everything clientside. That means:

    1. Load all the data you want at the beginning of the page.
    2. For data you don’t want displayed right away, place it within a div with the class “hidden”
    3. Create CSS within the post/page you are working with which specifies that div.hidden {display:none;}
    4. Use jQuery to dynamically make divs you want displayed hidden/unhidden based on whatever buttons you need.
    5. Also have jQuery modify the url hash.
    6. Use the script from this post such that if the url already has a hashtag it will dynamically change what is displayed automatically.

    I’m sorry if this is not very clear, but I’m less confident about recommending good ajax in wordpress, and would instead resort to this sort of DHTML.

    Thanks for reading!

  3. Nice post. I was checking constantly this blog and I am inspired!
    Very helpful info specifically the remaining phase :) I
    care for such information much. I was seeking this certain information for a long time.
    Thank you and good luck.

Leave a Reply

Spam Protection by WP-SpamFree