Question

我正在使用Phonegap（Cordova）做一个应用程序，我正在使用jquery mobile。我已经创建了一个带有一些数据库的动态jqplot，问题是：我的页面上没有显示该图，但是如果我重新加载页面（在Chrome中使用F5）它会出现但是我想自动重新加载它或其他解决方案为了看情节。（我尝试过使用window.location.reload，但是它将我重定向到第一页，我的情节在另一个页面中）谢谢！

<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 data-role =“page”']

<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>

Answer 1

我终于得到了解决方案！在显示页面时使用.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"
    }
  }

});

}）;

Answer 2

对于我的情况，我使用

$(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项目中。

在jquery页面中显示jqplot

2 个答案: