Bootstrap dropdown : How change the icon class on page refresh/reload?

Envato Customers Web and Code
, ,
1

I’m using the Bootstrap framework dropdown as a sort of select. Please see the image bellow:

image

When the user clicks on each of the dropdown links, a js function is fired to set a cookie defining the user’s city/region. -> This is working!

The same function adds a new class to the icon of the clicked link within the dropdown to indicate the selected item/city (see the “green dot icon” in the image above). -> This works as soon as the click is triggered!

BUT

The function fails to keep the icon new css class after the page reloads, and both links are displayed with the grey dot icon. -> Fail!

Here’s the html:

<a href="#" id="city_1'" class="define-city-1" data-city="city1" role="menuitem">
<i class="icon large-point grey-300" aria-hidden="true"></i>
    Betim
</a>

And the js

function reload_city() {
	setTimeout(function() {	
		window.location = '/?city=' + jQuery.cookie('city');
	}, 1000);
}

jQuery("#city_1").click(function(e){
	e.preventDefault();

	jQuery.cookie('city', jQuery(this).attr('data-city'));

	if(jQuery(this).attr('data-city') == jQuery.cookie('city')){
		jQuery(this).children('i').removeClass('grey-300');
		jQuery(this).children('i').addClass('green-600'); 
	}

	reload_city();

});

I was wondering what causes this behavior on page reload, and I’d really appreciate any inputs regarding this issue. Thanks in advance!

2

Better to try stackoverflow.com