jQWidgets Forums

Tagged: jQuery Tabs, jqwidgets tabs, Tabs

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

tabs select event Posts

January 21, 2014 at 11:30 am tabs select event #48161

Participant

Hi,
this is my code:

<!DOCTYPE html>
<html lang="it">
<head>
    <title id='Description'>Periodici Sapienza.
    </title>
    <link rel="stylesheet" href="../../jquery/script/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jquery/script/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
  
    <script type="text/javascript" src="../../jquery/script/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.filter.js"></script>
   
  
    
  <style>
        html, body {
              
        background-color: #CEECF5
      }
      
   
 </style>
    
    
    
 <script type="text/javascript">
   
    
    
    $(document).ready(function () {
            var theme = "ui-redmond";

            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({ 
            		    
               position:"top",
               theme: theme,
           
            });

            
        var loadPage = function (url, tabIndex) {
                $.get(url, function (data) {
                    $('#content' + tabIndex).html(data);
                			  });
            }

            loadPage('rivista/masterdetails.php', 1);
         
            
            $('#jqxTabs').on('tabclick', function (event) {
               var pageIndex = event.args.item + 1;
               
                switch(pageIndex)
                       	   {
                       	     case 1:
                       		      loadPage('rivista/masterdetails.php', pageIndex);
                       	      break;
                             case 2:
                             	     loadPage('centri/masterdetails.php', pageIndex);
                             break;
                               case 3:
                               	      
                               	       
                             	   loadPage('editori/masterdetails.php', pageIndex);
                             break;
                               case 4:
                                  loadPage('fornitori/masterdetails.php', pageIndex);
                             
                             	     
                             break;
                     	    default:
                     		
                     	   }
                
              });
    
        $('#jqxButton').click(function () {
        		$('#jqxTabs').jqxTabs('select', 2);
        	});    
            
            
        });
    
  
  </script>

</head>
<body class='default'>
    <div id='jqxTabs' style="min-height: 880px;">
        <ul>
            <li style="margin-left: 30px;">Titoli</li>
            <li>Centri</li>
            <li>Editore</li>
            <li>Fornitori</li>
        </ul>
        <div id="content1" style="margin-left: 5px;">
             Loading...
        </div>
        <div id="content2" style="margin-left: 5px;">
             Loading...
        </div>
        <div id="content3" style="margin-left: 5px;">
             Loading...
        </div>
        <div id="content4" style="margin-left: 5px;">
             Loading...
        </div>
    </div>
    
         <div style='margin-top: 10px;'>
    <input type="button" id='jqxButton' value="Select tab 2" />
</div>
    
</body>
</html>

When I push the button I don’t get the tab #2,
Any idea?

Many thanks,
Mario

January 21, 2014 at 11:56 am tabs select event #48162

Peter Stoev

Keymaster

Hi Mario,

The ‘select’ method selects a tab. As far as I see, you load the content when a Tab is Clicked with the Mouse. May be you need to use the ‘selected’ event instead of ‘tabclick’.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 21, 2014 at 1:57 pm tabs select event #48168

mario santanche

Participant

Dear Peter,
I fixed my code but the button doesn’t work…

<!DOCTYPE html>
<html lang="it">
<head>
    <title id='Description'>Periodici Sapienza.
    </title>
    <link rel="stylesheet" href="../../jquery/script/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jquery/script/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
  
    <script type="text/javascript" src="../../jquery/script/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jquery/script/jqwidgets/jqxgrid.filter.js"></script>
   
  
    
  <style>
        html, body {
              
        background-color: #CEECF5
      }
      
   
 </style>
    
    
    
 <script type="text/javascript">
   
    
    
    $(document).ready(function () {
            var theme = "ui-redmond";

            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({ 
            		    
               position:"top",
               theme: theme,
           
            });

            
        var loadPage = function (url, tabIndex) {
                $.get(url, function (data) {
                    $('#content' + tabIndex).html(data);
                			  });
            }

            loadPage('rivista/masterdetails.php', 1);
         
            
            $('#jqxTabs').on('selected', function (event) {
               var pageIndex = event.args.item + 1;
               
                switch(pageIndex)
                       	   {
                       	     case 1:
                       		      loadPage('rivista/masterdetails1.php', pageIndex);
                       	      break;
                             case 2:
                             	     loadPage('centri/masterdetails1.php', pageIndex);
                             break;
                               case 3:
                               	      
                               	       
                             	   loadPage('editori/masterdetails1.php', pageIndex);
                             break;
                               case 4:
                                  loadPage('fornitori/masterdetails1.php', pageIndex);
                             
                             	     
                             break;
                     	    default:
                     		
                     	   }
                
              });
    
        $('#jqxButton').click(function () {
        		$('#jqxTabs').jqxTabs('select', 2);
        	});    
            
            
        });
    
  
  </script>

</head>
<body class='default'>
    <div id='jqxTabs' style="min-height: 880px;">
        <ul>
            <li style="margin-left: 30px;">Titoli</li>
            <li>Centri</li>
            <li>Editore</li>
            <li>Fornitori</li>
        </ul>
        <div id="content1" style="margin-left: 5px;">
             Loading...
        </div>
        <div id="content2" style="margin-left: 5px;">
             Loading...
        </div>
        <div id="content3" style="margin-left: 5px;">
             Loading...
        </div>
        <div id="content4" style="margin-left: 5px;">
             Loading...
        </div>
    </div>
    
         <div style='margin-top: 10px;'>
    <input type="button" id='jqxButton' value="Select tab 2" />
</div>
    
</body>
</html>

Again, thank you for your interest.
Mario

January 21, 2014 at 2:14 pm tabs select event #48170

Peter Stoev

Keymaster

Hi Mario,

I suggest you to check your Script for Syntax errors. I have also prepared for you a demo which selects a Tab when a Button is clicked: http://jsfiddle.net/pJdsa/2/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.