JQUERY UI - Tabs - select a tab on page load
Hi
i need to select a at page load here my page
- <!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
- $( "#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