Dani Mateo Dani Mateo - 4 months ago 48
jQuery Question

Jquery make tab active from another page

So i have a button on another page, and when a user clicks on it, it should redirect to another page and add the active class to the tab that the window.location.hash takes.. but it doesn't work. It just redirects to that page. What am i doing wrong?


/* JQUERY */

$("#butonmesaj").on('click', function(){
window.location.href = "{% url 'userena_profile_detail' user%}#messages";
var id = window.location.hash;

<div role="tabpanel" class="tab-pane" id="messages">
<div class="embed-responsive embed-responsive-16by9" style="height: 500px;">
<iframe class="embed-responsive-item" src="{% url 'userena_umessages_list' %}"></iframe>


You are setting the hash correctly on the url, But you need to run a hashChange function when you load the page to actually set the class on load. This is because when you change the url you are re initializing your application and losing any state that you are not passing back to the server with your request.

// callback to set active class based on hash
function hashChange() {
  var id = window.location.hash
// bind the callback to hashchange and window.onload
$(window).on('hashchange', hashChange)

// your standard click listener
$("#butonmesaj").on('click', function() {
  window.location.href = "{% url 'userena_profile_detail' user%}#messages"