I'm setting up a
mobile app with jQuery
Mobile and PhoneGap. What I want to do is that when I click link with id "news_link" I want jQuery to fetch data from database and put it to jQm's collapsible set. In my solution, I've wanted to use $.
mobile.changePage inside callback functions because I want to wait until the data has been fetched and put inside the container before the
code changes page.
Here's the code:
$(function() {
$('#news_link').click(function(){
loadNewsFromDB(function(){
$.
mobile.changePage( $("#news"), { transition: "slideup"} );
});
});
loadNewsFromDB is PhoneGap's SQLite database function which would fetch the data with more callback functions from database. The contents would be put to desired container with .html-function
function loadNewsFromDB(){
//some
code here
theDB.transaction(function(tx) {
tx.executeSql(sqlStr, [], onLoadNewsSuccess, onLoadNewsError);
},onTxError, onTxSuccess);
function onLoadNewsSuccess(tx, results){
//some
code here
$("#newsSet").html(htmlCodeAndContentToPut);
Html is jQm's basic ui-modules:
<!-- some html
code here --!>
<div data-role="page" id="news">
<div data-role="content">
<div id="newsSet" data-role="collapsible-set" data-mini="true">
With debugging I know that the
code work up until it works very well unti it arrives to $.
mobile.changePage-function. Somehow it doesn't change the page. I've checked the function it works well in other occasions, but not inside callback-functions.
I would be very grateful if someone would give me a hand am I not seeing something obviously wrong or is something more specific? What other workarounds there is for fetching the data from SQLite, waiting for data to be fetched, putting the data to container and then changing the pages?
