在jquery頁面顯示jqplot

我正在做一個使用Phonegap（科爾多瓦）的應用程序，我正在使用jQuery的手機。我用一些數據庫創建了一個動態的jqplot，問題是這樣的：我的頁面沒有顯示該圖，但是如果我重新加載頁面（在Chrome中使用F5），它會出現但我想自動重新加載它或另一個解決方案爲了看到情節。（我試過用window.location.reload，但它將我重定向到第一頁，我的情節在另一個）謝謝！在jquery頁面顯示jqplot

<script class="code" type="text/javascript"> 
var dia = 2; 
var plot2; 
var line1=[[]]; 
var ultimopeso; 
var dia_registro_global=0; 
// PhoneGap code 
x$(document).on("deviceready", function() { 

}); 

var listElement = x$('#devuelvepeso'); 
var messageElement = x$('#devuelvefecha'); 
var db; 

x$('#saveItems').on('click', function(e) { 
    insertItem(); 
}); 

// Create a reference to the database 
function getDatabase() { 
return window.openDatabase("Seguimiento","1.0", "Seguimiento Database", 200000); 
} 


onDeviceReady(); 
// PhoneGap is ready 
function onDeviceReady() { 
     db = getDatabase(); 
     db.transaction(function(tx) { 
     tx.executeSql('CREATE TABLE IF NOT EXISTS SEGUIMIENTO(id INTEGER PRIMARY KEY AUTOINCREMENT, reportPeso)'); 
}, databaseError, getItems); 
} 




// Insert a record into the database 
function insertItem() { 
var insertValue = document.getElementById('reportPeso').value; 
db.transaction(function(tx) {tx.executeSql('INSERT INTO SEGUIMIENTO(reportPeso) VALUES ("' + insertValue + '")'); 
}, databaseError, getItems); 

} 

// Database error handler 
function databaseError(error) { 
messageElement.html("SQL Error: " + error.code); 
} 

// consulta bbdd 
function getItems() { 
    db.transaction(function(tx){ 
    tx.executeSql('SELECT * FROM SEGUIMIENTO', [], querySuccess, databaseError); 
}, databaseError); 

} 


function querySuccess(tx, result) { 

    for (var i = 0; i < result.rows.length; i++) { 
     var row = result.rows.item(i); 
     line1.push([row.id, parseInt(row.reportPeso)]); 
     ultimopeso = row.reportPeso; 
    } 
} 
$(window).load(function(){ 

reset_dia(); 
var len; 

plot2 = $.jqplot ('chart1', [line1], { 
    title: 'Seguimiento del peso', 
    axesDefaults: { 
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
    }, 
    axes: { 
    xaxis: { 
     label: "Semana", 
     pad: 0 
    }, 
    yaxis: { 
     label: "Peso" 
    } 
    } 

}); 
})

[這裏有另一個 'DIV數據角色= 「頁面」']

<div data-role="page" id="seguimiento" > 
<div data-role="navbar" > 
     <ul> 
    <li><a href="#midieta"><img src="images/menu/lista_dietas_logo-01-01.png"></a></li> 
    <li><a href="#lista" ><img src="images/menu/mi_dieta_logo-01.png"></a></li> 
    <li><a href="#perfil" onClick="cargar_datos_perfil();"><img src="images/menu/perfil_logo-01.png"></a></li> 
    <li><a href="#pro"><img src="images/menu/lista_dietas_logo-01-01.png"></a></li> 
    <li><a href="#seguimiento" class="ui-btn-active ui-state-persist" onClick="recargagrafico()"><img src="images/menu/seguimiento_logo-01.png"></a></li> 
    <li><a href="#preguntas"><img src="images/menu/preguntas_logo-01.png"></a></li> 
    </ul> 
</div> 
<div data-role="header" > 
<h1>Seguimiento</h1> 
</div> 
<div data-role="content" > 



<div id="chart1" style="height:50%; width:100%;"> 

</div> 
<!--<pre class="code prettyprint brush: js"></pre>--> 
</div> 
<div data-role="footer" > 
    <h4>x</h4> 
    </div> 
    </div>

來源

2013-02-25 litaa89

看看這裏：http://stackoverflow.com/questions/13761878/jquery-mobile-load-jqplot-graph-through-ajax-request – sdespont 2013-02-25 15:44:08

我終於得到了解決！當頁面顯示時使用.live（）我創建我的情節。謝謝！

$('#seguimiento').live('pageshow', function() { 

    plot2 = $.jqplot ('chart1', [line1], { 
    title: 'Seguimiento del peso', 
    axesDefaults: { 
     labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
    }, 
    axes: { 
    xaxis: { 
     label: "Semana", 
     pad: 0 
    }, 
    yaxis: { 
     label: "Peso" 
    } 
    } 

});

}）;

來源

2013-02-25 23:51:49 litaa89

對於我來說，我使用

$(document).on('pageshow','#seguimiento',function(){

能夠顯示jqplot，我使用：

<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>

在我的PhoneGap項目。

來源

2013-11-13 03:45:58

在jquery頁面顯示jqplot

回答

相關問題