CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-bbq
seesoe
seesoe

Reputation: 402

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';
        }
    }
});​

Upvotes: 1

Views: 2610

Answers (2)

Marrt
Marrt

Reputation: 105

I got a way easier approach, no plugins needed:

Copy over current hashparameters to a dummy URL AS searchParameters. Now you can treat the hash parameters like search-parameters, edit them with all the functionality of searchparameters (developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) and copy them back afterwards AS hasparameters,

E.g Simple function that set and updates parameters, you could also use '.delete()' instead of '.set' to delete the parameter:

function setOrUpdateHashParameter( hashParameterName, hashParameterValue ) {
	let theURL				= new URL('https://dummy.com');				// create dummy url
	theURL.search			= window.location.hash.substring(1);		// copy current hash-parameters without the '#' AS search-parameters
	theURL.searchParams.set( hashParameterName, hashParameterValue );	// set or update value with the searchParams-API
	window.location.hash	= theURL.searchParams;						// Write back as hashparameters
}

If anyone knows how to format these post properly, feel free to edit it, thanks!

Upvotes: 0

puzzfuzz
puzzfuzz

Reputation: 106

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

Upvotes: 5

Related Questions