在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

回答

相关问题