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?
