Question

I am creating an ajax website and I am using jquery’s .load() to load the pages. When you click on the link in the navigation bar, it works fine and loads the new page but when you reload, you loose the page you were just on. So if I am viewing my account, and I reload the page, it will send me back to the homepage. This is easy to fix but the real issue is when I search or I am loading a profile. My search URL is http://mysite.com/#!/search/option1/query here/. I made a simple regex here but when I try to use that regex with my code I am using, they don’t mix. My profile url is like this http://mysite.com/#!/profile/person here/. How do I make a regex to accommodate all of this? I need to filter out the first options(/account/, /search/, /newsfeed/), load the page based on that then load content based on the second and third options. Heres the code I am using:

---

var oldLoc = window.location.hash.replace(/^#\!/,"");
var m = /(\/search\/)([^\/]+\/)([^\/]+)/.exec(oldLoc);

if (oldLoc == '/newsfeed/') {
    $('#reload_section').load('newsfeed.php');
    $('.nav_itm.home').removeClass('active');
    $('.nav_itm.account').removeClass('active');
    $('.nav_itm.newsfeed').addClass('active');
    _currentScreen = 4;
} else if (oldLoc == '/account/') {
    $('#reload_section').load('account.php');
    $('.nav_itm.home').removeClass('active');
    $('.nav_itm.account').removeClass('active');
    $('.nav_itm.newsfeed').removeClass('active');
    _currentScreen = 5;
}/*else if (m[1]) {
    $('#reload_section').load('search.php');
    $('.nav_itm.home').removeClass('active');
    $('.nav_itm.account').removeClass('active');
    $('.nav_itm.newsfeed').removeClass('active');
    _currentScreen = 6;
    if (m[2] == 'option1/') { // Option1 Search
        searchMenuId = 1;
        $('.cquery .option1').addClass('active');
        $('.cquery .option2').removeClass('active');
        $('div.live h1 b').text(m[2]);
    } else if (m[2] == 'option2/') { // Option2 Search
        searchMenuId = 2;
        $('.cquery .option1').removeClass('active');
        $('.cquery .option2').addClass('active');
        $('div.live h1 b').text(m[2]);
    }
} */else {
    $('#reload_section').load('main.php');
    $('.nav_itm.home').addClass('active');
    $('.nav_itm.account').removeClass('active');
    $('.nav_itm.newsfeed').removeClass('active');
    _currentScreen = 1;
}

---

That code works perfect on fixed page urls like http://mysite.com/#!/newsfeed/ because there are no options. How do I modify that to work off a regex if that is even possible. I am not sure but am I asking too much? I would prefer to not use php url routing, but if javascript is unable to do what I want, I may have to. Thank you so much for any/all help. I know I am asking a lot here.

Answer 1

If what you’re trying to do is to parse your URL to get all the various options after the #!, you can use code like this:

var str = "http://mysite.com/#!/search/option1/query here/";
var options;
var pos = str.indexOf("#!");
if (pos != -1) {
    options = str.substr(pos + 2).replace(/^\/|\/$/g, "").split("/");
    console.log(options);   // ["search", "option1", "query here"]
}

You can see it work here: http://jsfiddle.net/jfriend00/e9a5V/

You can then process the options array appropriately.

switch(options[0]) {
    case "search":
        // code to handle search here
        // additional options are in options[1], options[2] ... 
        // up to options[options.length - 1]
        break;

    case "profile":
        // code to handle profile here
        // additional options are in options[1], options[2] ...
        break;

    case "newsfeed":
        // code to handle newsfeed and options here
        // additional options are in options[1], options[2] ...
        break;

    default:
        // code to handle unexpected URL form here
}