Question

I am developing an iPhone application using Phonegap & jQuery mobile. The application is using WebSQL for local storage via the Phonegap storage API.

I have been developing and testing in Chrome, and everything is working fine, but when testing in Safari I am getting the following error:

ReferenceError: Can't find variable: loadBookingItems

This happens in my pageinit function:

  $(document).on('pageinit', '#booking_page',  function(){              
     db.transaction(loadBookingItems);
  });

The loadBookingItems function is located in a .js file:

function loadBookingItems(tx){
    tx.executeSql("SELECT * FROM booking", [], loadBookingItemsSuccess, loadBookingItemsFail);
}

The file is getting loaded, and like I said, it is working in Chrome. jQuery is definitely getting loaded.

db is being defined as a global variable:

var db = window.openDatabase("mydb", "1.0", "mydb", 200000);

Any ideas as to what the problem is, and why it is only happening in safari?

Answer 1

As discussed in the comments, pageshow or pagebeforeshow are more suitable events than pageinitif you want to update the loaded items everytime the page is being shown — and apparently it’s working fine there.