Month: July 2012

Posted on

Phonegap for Android JSCallback error meaning OnDeviceReady not called

Struggled for hours last night while trying to migrate this great example app Sample App using the PhoneGap Database API to work on Android using Eclipse and an Android emulator. Everything was going well until I tried to link to a second page using a query string parameter to pass through the id of the the employee. This resulted in:

JSCallback Error: Request failed. at file:///android_asset/www/js/cordova.js:3698

Eventually stumbled across PhoneGap – migrating iOS applications to Android (Part 1) which pointed out that this is a documented Android issue and proposed the following workaround:

function loadEmployeeDetail(id) {
localStorage.setItem( “employeeId”, id );
navigator.app.loadUrl(“file:///android_asset/www/employeedirectory/employeedetails.html”);
}

And then reading this  in employeedetails.html using:

id = localStorage.getItem( “employeeId”);

However, I was still having problems calling OnDeviceReady() until I stumbled across deviceReady not working in PhoneGap application, how to? which suggested that adding brackets into the function name in the eventListener method might be the problem, giving:

 document.addEventListener(“deviceready”, onDeviceReady(), false);

Problem solved.

 

 

Posted on

Preventing IE from caching Ajax requests

We are increasingly using AJAX (Asynchronous JavaScript and XML) to deliver content on our pages, but often have problems due to Internet Explorer, every web developers favourite browser, caching AJAX requests. This means that the results presented are not updated when a new request is made to the same URL, even if the data has changed.

This is annoying, but does not go against the HTTP specification, which states that GET requests are cacheable, whereas POST results are not. AJAX requests seem to generally default to GET (JQuery certainly does), so IE caches them.

Therefore, the solution is to make sure that AJAX requests use POST rather than GET. In jQuery, you can do this by setting:

type: 'POST'

For Prototype, you can set:

method: 'get'

In the jQuery.ajax() method, there is also a ‘cache’ setting, which is true by default, but can be set to false, which prevents caching. It does this by appending a TIMESTAMP to the URL, so that each request is made to a different URL, so a cached result cannot be returned. If not using jQuery, an alternative to ensuring that your request is a POST request rather a GET request is to add a ‘cache-busting’ parameter, e.g. a timestamp, to the end of the request URL, e.g.:

var cacheBuster = new Date().getTime();  //Get timestamp
var url  = 'http://www.example.com/getdata?cb=' + cacheBuster;  //Add timestamp to URL