Making a tab active

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    5 posts
    Member since:
    Jul 2012

    Posted 07 Aug 2012 Link to this post

    I have a tabstrip that works for hash urls, but one of the tabs does a refresh but should stay on the same view.

    <div data-role="tabstrip" id="tabstripMainApp">
       <a href="#viewJobs" data-icon="home">Current</a>
       <a href="#viewJobsCompleted" data-icon="more">Completed</a>
       <a href="#viewSettings" data-icon="about">Settings</a>
       <a class="btnRefreshView" data-icon="refresh">Refresh</a>
    </div>

    The said tab fires this event successfully:

    $('.btnRefreshView').bind('click', function () {
    console.log('Refresh view :', window.location.hash)
    if (window.location.hash == '#viewJobsCompleted') {
    dsviewJobsCompleted.read();
    } else {
    dsviewJobs.read();
    }
    })

    But then the btnRefreshView tab shows as active when I want the prior tab that was active to be active.

    How do I make a different tab active please?
  2. Kevin
    Kevin avatar
    5 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2012 Link to this post

    I resolved this using the following, where the '#btn...' ID's refer to the tabstrip <a> tags: 

    if (window.location.hash == '#viewJobsCompleted') {
    dsJobsCompleted.read();
    $('#btnRefreshView').removeClass('km-state-active');
    $('#btnViewJobsCompleted').addClass('km-state-active');
    } else {
    dsJobs.read();
    $('#btnRefreshView').removeClass('km-state-active');
    $('#btnViewJobs').addClass('km-state-active');
    }
  3. Kendo UI is VS 2017 Ready
Back to Top