CODEWITHSUNDEEP
javascriptjqueryhtml
JoseLuke
JoseLuke

Reputation: 439

how to move across tabs programmatically

I have this code for my tabs... 

    <!-- Start first page -->
        <div data-role="page" id="homePage" data-dom-cache="true" data-rel="dialog">    
            <div data-role="header" data-position="fixed" data-id="header">
        </div>

        <div data-role="navbar">
            <ul>
            <li><a href="#homePage" class="ui-btn-active ui-state-persist"  >Enter data</a></li>
            <li><a href="#syncData" >Sync data</a></li>
                <li><a href="#manageData">Manage data</a></li>
            </ul>
        </div><!-- /navbar -->
     </div> <!-- /header -->

  </div><!-- /page -->

  <!-- Start second page -->
     <div data-role="page" id="syncData" data-rel="dialog" data-dom-cache="true">
         <div data-role="header" data-id="header1" data-position="fixed">
     </div>
     <div data-role="navbar">
        <ul>
            <li><a href="#homePage">Enter data</a></li>
            <li><a href="#syncData"  class="ui-btn-active ui-state-persist" >Sync data</a></li>
            <li><a href="#manageData">Manage data</a></li>
        </ul>
     </div><!-- /navbar -->
   </div><!-- /header -->
 </div><!-- /page -->

   <!-- Start third page -->
      <div data-role="page" id="manageData" data-rel="dialog" data-dom-cache="true">
          <div data-role="header" data-id="header2" data-position="fixed">
      </div>
      <div data-role="navbar">
          <ul>
             <li><a href="#homePage">Enter data</a></li>
             <li><a href="#syncData" >Sync data</a></li>
             <li><a href="#manageData" class="ui-btn-active ui-state-persist" >Manage data</a></li>
          </ul>
      </div><!-- /navbar -->
   </div> <!-- /header -->
   <div data-role="popup" id="dialog-confirm" style="display: none" data-overlay-theme="b" data-theme="b">
      <div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
     <h3 class="ui-title">Low storage space!!</h3>
     <p>You must perform one of the actions below before you proceed!.</p>
        <a href="#" data-role="button" data-inline="true" id="syncDataId" data-theme="c">Sync data</a>    
        <a href="#" data-role="button" data-inline="true" id="backupDataId" data-theme="c">Backup data</a>  
            <a href="#" data-role="button" data-inline="true" id="increaseStorageSpaceId" data-theme="c">Increase storage space</a>  
            <a href="#" data-role="button" data-inline="true" id="cancelId" data-theme="c">Cancel</a>  
     </div>
      </div>
   </div><!-- /page -->

I want to change to sync data wen i click on the sync data button on the popup dialog which is on manage data tab. it should happen on a click button event e.g

 $('#syncDataId').click(function () {       
    //change to the sync data tab page
 }

am new to jquery.any help willl be appreciated.thanks

Upvotes: 1

Views: 298

Answers (2)

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

 jQuery('.next-product').click(function() {
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1);
    });

    jQuery('.previous-product').click(function() {
        debugger;
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1);
    });

live demo, this may be what you are looking for

Upvotes: 2

closure
closure

Reputation: 7452

Use $.mobile.changePage(hashedPage) where hashedPage is '#' + 'id of the div that has data-role page'.

Upvotes: 0

Related Questions