JavaScript/HTML - Set selected tab based on url variable

Question

I have a search page, and I found a script for a tab component which seperates the TV-Show search page and Movie search page. When a user clicks on lets say the "Movie" tab, and perform a search from there, I make the form add ?type=movie&... to the url. But, when they perform the search, the tab that's selected is the the "TV-Show" tab, and the have to click over to get to the other tab which has the results they want.

Here is the code, and in it is some of what I tried:

the HTML looks like this:

<article class="first">
     <h2>Search</h2>

    <hr/>
    <div id="tabWrapper">
        <div id="tabContainer">
            <div class="tabs">
                <ul>
                    <li id="tabHeader_1">TV Shows</li>
                    <li id="tabHeader_2">Movies</li>
                </ul>
            </div>
            <div class="tabContent">
                <div class="tabpage" id="tabpage_1">
                    <?php
                        if (isset($sortFilt['year']))
                            unset($sortFilt['year']);
                        if ($sortField=="year")
                            $sortField==" ";
                        DisplaySearchPage("shows", $terms, $sortField, $sortDir, $sortFilt, $page, $perPage);
                    ?>
                </div>
                <div class="tabpage" id="tabpage_2">
                    <?php
                        DisplaySearchPage("movies", $terms, $sortField, $sortDir, $sortFilt, $page, $perPage);
                    ?>
                </div>
            </div>
        </div>
    </div>
</article>
<script src="tabs.js"></script>

And this is the the tabs.js script:

window.onload=function() {

  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }

    // This below is is what I tried.
    var selTab = (getUrlVars()["type"] == "movies") ? 2 : 1;
    var selTab = (getUrlVars()["type"] == "movies") ? 1 : 0; // Tried this too.
    tabs[selTab].click();

    // its seems like it should have worked, what am I doing wrong.
}

// on click of one of tabs
function displayPage() {

  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}

How can I adapt this script to let me decide which tab is displayed when the page is loaded based on what the type variable is in the URL parameters?

Answer 1

I found the answer. My problem was with getUrlVars["type"] , it failed to give me the value of the 'type' url variable, so I created my own function for it. Here is the working code if anyone else is wondering how to get variables from the url.

function getURLParameter(name)
{
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

window.onload = function()
{
    // Get tab container
    var container = document.getElementById("tabContainer");

    // Set the current tab.
    var navitem = container.querySelector(".tabs ul li");

    // Store which tab is selected.
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current", ident);

    // Set the current tab with a class of 'activetabheader'.
    navitem.setAttribute("class", "tabActiveHeader");

    // Hide the tab contents we don't need.
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
        pages[i].style.display = "none";
    }

    // This adds the click event handler to the tabs.
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = displayPage;
    }

    // Selects tab based on 'type' url variable.
    if (getURLParameter("type") == "movies") {
        tabs[1].click();
    }
}

// OnClick() event handler for tabs.
function displayPage()
{
    var current = this.parentNode.getAttribute("data-current");

    // Remove class of 'activetabheader' and hide the old contents.
    document.getElementById("tabHeader_" + current).removeAttribute("class");
    document.getElementById("tabpage_" + current).style.display = "none";

    var ident = this.id.split("_")[1];

    // Add a class of 'activetabheader' to new active tab and show contents.
    this.setAttribute("class", "tabActiveHeader");
    document.getElementById("tabpage_" + ident).style.display = "block";
    this.parentNode.setAttribute("data-current", ident);
}