JQUERY UI - Tabs - select a tab on page load

JQUERY UI - Tabs - select a tab on page load

Hi

i need to select a at page load here my page

  1. <!DOCTYPE html>
    <html lang="it">
     
      <head>
       
        <meta charset="utf-8" />
       
        <!-- Html 5 e CSS3 -->
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
       
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

        <title>Ugo Internet server - dati in diretta</title>
        <meta name="description" content="Sito internet di Ugo Merlini - dati storici - database"/>
        <meta name="author" content="Ugo Merlini"/>

        <meta name="viewport" content="width=device-width; initial-scale=1.0"/>

        <!-- Styles -->
       
        <link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/jquery_ui/css/jquery-ui.css"/>
        <link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/datatables/media/css/jquery.dataTables_themeroller.css"/>
       
           
        <!-- Styles -->
       
        <link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/jquery_ui/css/jquery-ui.css"/>
       
       
           
        <!-- Jquery javascript -->
     
        <script type="text/javascript" src="../../../file_comuni/javascript/jquery/jquery-1.8.2.js"></script>
       
         
        <!-- Jquery-ui javascript -->
       
        <script type="text/javascript" src="../../../file_comuni/javascript/jquery_ui/jquery-ui-1.9.1.js"></script>
       
       
        <!-- Datatables javascript -->
       
        <script type="text/javascript" src="../../../file_comuni/javascript/datatables/media/js/jquery.dataTables.js"></script>
     
        <script type="text/javascript">
        
         $(document).ready(function () {
            $.getJSON('galbiate_tab.html', function(giorni){
               $('#tabs ul:first li:eq(0) a').text(giorni[0]);
               $('#tabs ul:first li:eq(1) a').text(giorni[1]);
               $('#tabs ul:first li:eq(2) a').text(giorni[2]);
               $('#tabs ul:first li:eq(3) a').text(giorni[3]);
               $('#tabs ul:first li:eq(4) a').text(giorni[4]);
               $('#tabs ul:first li:eq(5) a').text(giorni[5]);
               $('#tabs ul:first li:eq(6) a').text(giorni[6]);
               $('#tabs ul:first li:eq(7) a').text(giorni[7]);
               $('#tabs ul:first li:eq(8) a').text(giorni[8]);
            });
           
          
         });
        
          $(document).ready(function() {
     
     
    $( "#tabs" ).tabs({

        select: function(event, ui) {
            oTable.fnFilter(ui.tab.innerHTML,0,false); // apply the table filter based on tab name
            $('#dataTable').appendTo(ui.panel); // move the table into the selected tab panel
        }
           
    });




    oTable = $('#dataTable').dataTable({
            "fnDrawCallback": function ( oSettings ) {
                if ( oSettings.aiDisplay.length == 0 )
                {
                    return;
                }
               
                var nTrs = $('#dataTable tbody tr');
                var iColspan = nTrs[0].getElementsByTagName('td').length;
                var sLastGroup = "";
                for ( var i=0 ; i<nTrs.length ; i++ )
                {
                    var iDisplayIndex = oSettings._iDisplayStart + i;
                    var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
                    if ( sGroup != sLastGroup )
                    {
                        var nGroup = document.createElement( 'tr' );
                        var nCell = document.createElement( 'td' );
                        nCell.colSpan = iColspan;
                        nCell.className = "group";
                       
                        nGroup.appendChild( nCell );
                        nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
                        sLastGroup = sGroup;
                    }
                }
            },
             "bProcessing": true,
              "bSort": false,
              "iDisplayLength": 27,
              "sAjaxSource": "realtime_datatables1.html",
             
              "sPaginationType":"full_numbers",
              "bAutoWidth": false,
              "aoColumns": [null ,{"sWidth": "155px"},{"sWidth": "155px"}],
              "bJQueryUI":true
        });

    });
     
       


        </script>
           
      </head>
      

    <body>
       


       
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1"> </a></li>
            <li><a href="#tabs-2"> </a></li>
            <li><a href="#tabs-3"> </a></li>
            <li><a href="#tabs-4"> </a></li>
            <li><a href="#tabs-5"> </a></li>
            <li><a href="#tabs-6"> </a></li>
            <li><a href="#tabs-7"> </a></li>
            <li><a href="#tabs-8"> </a></li>
            <li><a href="#tabs-9"> </a></li>
        </ul>
                <table id="dataTable" class="display" style="background-color: white">
            <thead>
              <tr>
                <th>Descrizione</th>
                <th>Valore</th>
                <th>Valore 1</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>   
    </div>

    </body>
    </html>





























































































































































what I need to execute on load is

  1. $( "#tabs" ).tabs({

        select: function(event, ui) {
            oTable.fnFilter(ui.tab.innerHTML,0,false); // apply the table filter based on tab name
            $('#dataTable').appendTo(ui.panel); // move the table into the selected tab panel
        }
           
    });








here the to demo page

http://ugom.comuf.com/meteo/previsioni_sintetiche/galbiate/testuale/galbiate.html

regards

Ugo