javascriptjqueryjquery-uijquery-bbq

jquery bbq remove hash b from url


im new to jquery bbq, i've figured out most of the setup so far but i have a little issue. heres the setup.

one page with main nav links on the right each nav link click will change the body content of the page to its corresponding data (showing and hiding divs) (with bbq) one of the links shows a div with another set of links that when clicked will set hash B in the url

so first link click domain.com/dir/#A=page1

second link click domain.com/dir/#A=page1&B=set1

if i press the back button it goes back to the previous A hash, however the B hash remains in the url.

is there a way to remove the B peram when not on the specific page?

$(window).bind('hashchange', function(e) {
    var state = $.bbq.getState('p');
    var graphState = $.bbq.getState('n');

    var base_title = '{/literal}{$smarty.const.SITE_TITLE}{literal} | Dashboard | ';
    $('.profile-nav a').each(function() {
        if (!state) {
            $('.profile-nav a').each(function() {
                $('#' + this.id).removeClass('live active');
                document.title = base_title + 'Message Center';
            });
            $('#m').addClass('live active');
        } else if (state == this.id) {
            $('#' + this.id).addClass('live active');
            document.title = base_title + $(this).text();
        } else {
            $('#' + this.id).removeClass('live active');
        }
    });

    if (!state) {
        $('.tab-content').fadeOut('fast');
        $('.message-content').fadeIn('slow');
    } else {
        $('.tab-content').fadeOut('fast');
        clicked = $('#' + state).attr('rel').split(' ')[0];
        $('.' + clicked).fadeIn('slow');
    }

    if (state == 'r') {
        if (graphState) {
            $('.nick-breakdown').fadeOut('fast');
            $('#' + graphState).fadeIn('slow');
            document.title = base_title + 'Reports | ' + $('#' + graphState).attr('rel');
        } else {
            $('.item-breakdown').fadeOut('fast');
            $('.nick-breakdown').fadeIn('slow');
            document.title = base_title + 'Reports';
        }
    }
});​

Solution

  • I've accomplished the same thing using jsbbq.pushState with merge_mode = 2 instead of just setting the # on the anchor.

    Check out the docs here: http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState

    merge_mode(Number) : Merge behavior defaults to 0 if merge_mode is not specified (unless a hash string beginning with # is specified, in which case merge behavior defaults to 2), and is as-follows:

    • 0: params in the params argument will override any params in the current state.
    • 1: any params in the current state will override params in the params argument.
    • 2: params argument will completely replace current state.

    So if your link looks like:

    mysite.com#A=page1&B=page2 you could call

    $.bbq.pushState({'A' : 'pageXYZ'}, 2);

    And your doc location would then be:

    mysite.com#A=pageXYZ