CODEWITHSUNDEEP
javascriptjqueryjquery-mobiletabs
user3210416
user3210416

Reputation: 804

Jquery mobile tabs not active

I have a dynamic list which goes to a new page and one out of two tabs are active without being pressed (this is what I'm trying to do.) but when I go back to the dynamic list and select any other list it goes to a new page but none of the tabs are activate both appears plain.

Here is my code (function) for dynamic new pages

function goToMatchDetailPage(matchHome, matchAway){
    first_part_id = matchHome.substring(0,2);
    sec_part_id = matchAway.substring(0,2);
    var id = first_part_id.concat(sec_part_id);
    //create the html template
    var matchPage = $("<div data-role='page' id='index' data-url=dummyUrl><div data-role='header'><a data-rel='back' data-direction='reverse' href='#mainPage'>Back</a><h1>"
      + matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>"
  + "<div data-role='navbar'>"
  +  "<ul>"
  +    "<li><a href='#fragment-1' id='tabId1'>" + matchHome + "</a></li>"
  +   "<li><a href='#fragment-2' id='tabId2'>" + matchAway + "</a></li>"
  +  "</ul>"
  + "</div>"
  + "<div id='fragment-1'>"
  +  "<p>This is the content of the tab 'One', with the id fragment-1.</p>"
  + "</div>"
  + "<div id='fragment-2'>"
  +  "<p>This is the content of the tab 'Two', with the id fragment-2.</p>"
  + "</div></div></div>");


    //append the new page to the page contanier
    matchPage.appendTo($.mobile.pageContainer);


    //go to the newly created page
    $.mobile.changePage(matchPage);

 }


 $(document).on('pageinit', function() {

     $(this).parents("div [data-role=tabs]").tabs( "option", "active", 0 );    

       $('#tabId2').addClass('ui-btn-up-b').removeClass('ui-btn-active');
       $('#tabId1').addClass('ui-btn-active'); 

    });

Here I try to re-activate the a tab when a new page is created

$(document).on('pageshow', function() {

     $.mobile.activePage.find("div [data-role=tabs]").tabs( "option", "active", 0 );    

       $('#tabId2').addClass('ui-btn-up-b').removeClass('ui-btn-active');
       $('#tabId1').addClass('ui-btn-active'); 

    });

It appears with no tabs active

This is what I don't want

Upvotes: 1

Views: 1275

Answers (1)

ezanker
ezanker

Reputation: 24738

I think this is the easy way. Just trigger a click on the tab button:

$(document).on('pageshow', function() {    
   $('#tabId1').click();     
});

DEMO

To make it even more generic, find the first tab button on the page instead of using an ID:

$(document).on('pageshow', function() {    
    $.mobile.activePage.find("div [data-role=tabs] ul li:first-child a").click();
});

DEMO

Upvotes: 1

Related Questions