Question

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?

Answer 1

• I never had problems with $.mobile.changePage on callback-function
  from Ajax, so it is possible to change page from a
  callback-function
• You call the loadNewsFromDB function with a function as a
  parameter.
  But I can’t see where/how you are using this parameter
  on the loadNewsFromDB function itself. Don’t you have to define the
  parameter on the loadNewsFromDB function?
  After defining the callback-function, you should call it when your data is ready.
• I would try to use the $.mobile.changePage directly in your onLoadNewsSuccess function.

I believe that the code should look like this:

function loadNewsFromDB(callback){
//some code here
theDB.transaction(function(tx) {
    tx.executeSql(sqlStr, [], function(tx, result) {
            ...some code here...;
            if (callback) {
                callback();
            }    
        },onLoadNewsError);
},onTxError, onTxSuccess);

---

Edit:
To answer the question in the comments:

• In your $(function() code, you are adding listener for the
  $('#news_link').click event.
• In this listener, you tell Jquery to call loadNewsFromDB function and
  to send it the following callback-function as a parameter: function(){ $.mobile.changePage( $("#news"), { transition: "slideup"}.

Sending the callback function is not enough, you should use it (call it) in your code.
To use it, I did the following:

• Changed the function definition function loadNewsFromDB(callback)
  now, it does have a new paramter: callback (which is the name you can use to call back your callback-function).

• In your loadNewsFromDB function, you are calling the
  transaction function, and send it 3 parameters: inline function, onTxError, onTxSuccess.
  your inline function just call the tx.executeSql function and send it 4 parameters: sqlStr, [], onLoadNewsSuccess, onLoadNewsError.
  I changed the third parameter.
  Instead of calling the onLoadNewsSuccess function, I wrote the needed function inline

• In the inline function, I checked if the callback function exist if (callback)
  If it exist, I called it! callback();
  calling the callback function, should change the page…