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?
