Response title
This is preview!
- Screen name: ugo1973
ugo1973's Profile
6 Posts
10 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- Hi
I have this
script- $('.modifica').click(function(){
var oTBL = document.getElementById('example')
var row_number = $(this).closest("tr")[0].rowIndex;
alert("row number: "+row_number);
var value = oTBL.rows[row_number].cells[0].firstChild.data
alert(oTBL.rows[row_number].cells[0].firstChild.data);
alert(value);
$.post('dati/testuali/test.php',{title: value} , function(resp){
$('<div>').dialog({
modal: true,
open: function () {
????);
},
close: function(event, ui) {
$(this).remove();
},
height: 400,
width: 600,
title: 'Ajax Page'
});
});
Ugo- Hi
from here
http://ugom.comuf.com/meteo/stazione_meteo/dati_storici/ (sorry for slow site but find i fast one in not easy)
select "dati giornalieri"
pick a day
shuold appaer a tab ui the problem is
if I pass from "dati testuali" to "performance gfs" is all fine
If I pass from "dati testuali to "grafici" is ok but after i click on "performance gfs", performance gfs I obtain a blank page. If after I click on "dati testuali", "Dati testuali" is correcly showed
substantially each time I pass from "grafici" the "performance gfs" is not showed
Where is the error?
Ugo- 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- Hi,
I'm trying to use jquery ui effects but i'm not able to show the page once it is load with an jquery ui
here sample page: (clickable buttons are grafici and strumenti)
http://ugom.comuf.com/
I suppose I need to make an callback function but i'm not able make it
Regards
Ugo- <!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"/>
<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/css/pagina_stazione_meteo_dati_in_diretta.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>
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<script>
$(document).ready(function() {
$('a.button').button ({ });
});
</script>
<script type="text/javascript">
$(function() {
$("#bouncebutton").click(function() {
$("#iframe_dati_in_diretta").effect("slide", { direction: "right" }, 4000, callback);
});
function callback() {
setTimeout(function() {
$( "#iframe_dati_in_diretta" ).show();
}, 1 );
};
});
$(function() {
$("#bouncebutton1").click(function() {
$("#iframe_dati_in_diretta").effect("slide", { direction: "right" }, 1000, callback);
});
function callback() {
setTimeout(function() {
$( "#iframe_dati_in_diretta" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
});
</script>
</head>
<body>
<div id="box_dati_in_diretta">
<nav id="nav_dati_in_diretta">
<ul id="menu" class="ui-widget-header">
<li><a href="strumenti/index.html" target="iframe_b">????</a></li>
<li><a href="grafici/grafici.php" target="iframe_b">???</a></li>
</ul>
<ul id="toolbar" class="ui-widget-header ui-corner-all">
<a href="strumenti/index.html" class="button" target="iframe_b" id="bouncebutton1">Strumenti</a>
<a href="grafici/grafici.php" class="button" target="iframe_b" id="bouncebutton">Grafici</a>
</ul>
</nav>
<section id="section_dati_in_diretta">
<iframe name="iframe_b" id="iframe_dati_in_diretta"></iframe>
</section>
</div>
</body>
</html>
- 21-Oct-2012 05:39 PM
- Forum: Using jQuery UI
Hi
Here in my html page I have some javascript (heavy) that are loaded in tab1 and tab2. Is possibile to load the tabs content only when the tab label is clicked? In this way I'll can speed up the process
regards
Ugo- <!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</title>
<meta name="description" content="Sito internet di Ugo Merlini"/>
<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"/>
<!-- 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.0.js"></script>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
<!-- Highcharts javascript -->
<script type="text/javascript" src="../../../file_comuni/javascript/highcharts/js/highcharts.js"></script>
<script type="text/javascript">
/** Richista dei dati dal server e aggiunta ai grafici **/
var temperatura;
var pioggia;
var pioggia_accumulata;
var chart =[[[1],[2],[3]]];
$.getJSON('grafici/temperatura_live_data.php', function(temperatura){
for (var t = 0; t <temperatura.length ;t++){
chart[1].addSeries({
data:temperatura[t],
name:"Temperatura"
});
}
});
$.getJSON('grafici/pioggia_live_data.php', function(pioggia){
for (var p = 0; p <pioggia.length ;p++){
chart[2].addSeries({
data:pioggia[p],
name:"Pioggia"
});
}
});
$.getJSON('grafici/pioggia_live_data_accumulo_giornaliero.php', function(pioggia_accumulata){
for (var pa = 0; pa <pioggia_accumulata.length ;pa++){
chart[3].addSeries({
data:pioggia_accumulata[pa],
name:"Pioggia accumulata"
});
}
});
/** Creazione grafici **/
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart[1] = new Highcharts.Chart({
chart: {
renderTo: 'container_temperatura',
defaultSeriesType: 'spline',
zoomType: 'x'
},
credits: {
enabled: false
},
title: {
text: 'Temperatura'
},
xAxis: {
type: 'datetime'
},
yAxis: {
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperatura',
style: {
color: '#89A54E'
}
}
},
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
pointInterval: 24 * 3600000, // one hour
pointStart: Date.UTC(2012, 9, 6, 0, 0, 0)
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d-%m-%Y %H:%M', this.x)+'<br/>'+
this.y;
}
},
series: []
});
chart[2] = new Highcharts.Chart({
chart: {
renderTo: 'container_pioggia',
defaultSeriesType: 'spline',
zoomType: 'x'
},
credits: {
enabled: false
},
title: {
text: 'Pioggia'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min:0,
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},
title: {
text: 'Pioggia',
style: {
color: '#4572A7'
}
}
},
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
pointInterval: 24 * 3600000, // one hour
pointStart: Date.UTC(2012, 9, 6, 0, 0, 0)
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d-%m-%Y %H:%M', this.x)+'<br/>'+
this.y;
}
},
series: []
});
chart[3] = new Highcharts.Chart({
chart: {
renderTo: 'container_pioggia_accumulata',
defaultSeriesType: 'spline',
zoomType: 'x'
},
credits: {
enabled: false
},
title: {
text: 'Pioggia accumulata'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min:0,
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},
title: {
text: 'Pioggia accumulata',
style: {
color: '#4572A7'
}
}
},
plotOptions: {
line: {
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
pointInterval: 24 * 3600000, // one hour
pointStart: Date.UTC(2012, 9, 6, 0, 0, 0)
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d-%m-%Y %H:%M', this.x)+'<br/>'+
this.y;
}
},
series: []
});
});
</script>
<!-- Stessseries javascript -->
<script type='text/javascript' src='../../../file_comuni/javascript/steelseries/tween.js'></script>
<script type='text/javascript' src='../../../file_comuni/javascript/steelseries/steelseries.js'></script>
<script type='text/javascript' >
function init() {
// Define some sections
var sections = Array(steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)'));
// Define one area
var areas = Array(steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)'));
// Create one radial gauge
var radial1 = new steelseries.Radial(
'canvas1', {
section: sections,
area: areas,
titleString: 'Test',
unitString: 'Unit',
pointerType: steelseries.PointerType.TYPE8
});
// Create a second radial gauge
var radial2 = new steelseries.Radial(
'canvas2', {
gaugeType: steelseries.GaugeType.TYPE2,
maxValue: 40,
threshold: 30,
section: Array(steelseries.Section(0,40,'rgba(0,255,0,0.3)')),
area: Array(steelseries.Section(30,40,'rgba(255,0,0,0.5)')),
titleString: 'Test',
unitString: 'Unit',
frameDesign: steelseries.FrameDesign.ANTHRACITE,
backgroundColor: steelseries.BackgroundColor.ANTHRACITE,
pointerType: steelseries.PointerType.TYPE11,
pointerColor: steelseries.ColorDef.WHITE,
lcdColor: steelseries.LcdColor.WHITE,
ledColor: steelseries.LedColor.GREEN_LED,
});
// Create a radial bargraph gauge
var radial3 = new steelseries.RadialBargraph(
'canvas3', {
gaugeType: steelseries.GaugeType.TYPE3,
titleString: "Title",
unitString: "Unit",
frameDesign: steelseries.FrameDesign.BLACK_METAL,
backgroundColor: steelseries.BackgroundColor.LIGHT_GRAY,
valueColor: steelseries.ColorDef.YELLOW,
lcdColor: steelseries.LcdColor.YELLOW,
ledColor: steelseries.LedColor.YELLOW_LED,
});
// Let's set some values...
// Start the random update
setInterval(function(){ setRandomValue(radial2) }, 2000);
}
function setRandomValue(gauge)
{
$.get('strumenti/realtime.txt', function(data) {
gauge.setValueAnimated(data.split(' ')[11]);
//process text file line by line
});
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab1">Grafici</a></li>
<li><a href="#tab2">Strumenti</a></li>
</ul>
<div id="tab1">
<div id="container_temperatura" style="width: 1125px; height: 295px; margin: 0 auto">
</div>
<div id="container_pioggia" style="width: 1125px; height: 295px; margin: 0 auto">
</div>
<div id="container_pioggia_accumulata" style="width: 1125px; height: 295px; margin: 0 auto">
</div>
</div>
<div id="tab2">
<body onload="init()">
<canvas id='canvas1' width='200' height='200'>
No canvas in your browser...sorry...
</canvas>
<canvas id='canvas2' width='200' height='200'></canvas>
<canvas id='canvas3' width='200' height='200'></canvas>
</div>
</div>
- Hi,
I'm trying to use jquery datepicker and the result I want is to select a date from it and display the data take from a mysql database referred to the datapicker date .
I don't have a precise idea if is better an iframe or a div content load (which I think is preferred). Unlikely my javascript (ajax) skill in very low
regards
if needed i will try to explain better what I want to do
I'm sorry for my bad english
Ugo- <!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 storici</title>
<meta name="description" content="Sito internet di Ugo Merlini - dati storici"/>
<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"/>
<!-- 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.0.js"></script>
<script type="text/javascript">
$(function() {
$( "#tab_dati_storici_principale" ).tabs();
});
</script>
<script>
$(function() {
var opzioni_calendario_giornaliero = ({
dateFormat: 'dd/mm/yy',
maxDate: "+10",
showOn: "button",
buttonImage: "../../../file_comuni/javascript/jquery_ui/css/images/calendar.gif",
buttonImageOnly: true,
prevText: "Ieri",
currentText: "Oggi",
monthNames: ["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio",'Agosto',"Settembre","Ottobre","Novembre","Dicembre"],
monthNamesShort: ["Gen","Feb","Mar","Apr","Mag","Giu","Lug","Ago","Set","Ott","Nov","Dic"],
dayNames: ["Domenica","Lunedí","Martedí","Mercoledí","Giovedí","Venerdí","Sabato"],
dayNamesShort: ['Dom','Lun','Mar','Mer;','Gio','Ven','Sab'],
dayNamesMin: ["Do","Lu","Ma","Me","Gi","Ve","Sa"],
altField : "#calendario_giornaliero_alternativo",
altFormat : "@",
});
$("#calendario_giornaliero").datepicker(opzioni_calendario_giornaliero);
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#box_dati_storici_giornalieri").hide();
});
</script>
<script type="text/javascript">
function showDiv() {
div = document.getElementById('box_dati_storici_giornalieri');
div.style.display = "block";
}
</script>
</head>
<body>
<section>
<div id="tab_dati_storici_principale">
<ul>
<li><a href="#tab-1">Dati giornalieri</a></li>
<li><a href="#tab-2">Dati mensili</a></li>
<li><a href="#tab-3">Dati ammuali</a></li>
<li><a href="#tab-4">Eventi significativi</a></li>
</ul>
<div id="tab-1">
<input type="text" name="datepicker" id="calendario_giornaliero">
<input type="text" name="alt-datepicker" id="calendario_giornaliero_alternativo">
<button onclick="javascript:showDiv();">Click to show div</button>
<div id="box_dati_storici_giornalieri">
<p>Provae</p>
</div>
</div>
<div id="tab-2">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Done</p>
</div>
</div>
</section>
</body>
</html>
- «Prev
- Next »
- <!DOCTYPE html>
- <!DOCTYPE html>
- <!DOCTYPE html>
- $('.modifica').click(function(){
Moderate user : ugo1973
© 2012 jQuery Foundation
Sponsored by 
and others.
