[jQuery Mobile] Avoiding multiple pageinit executions for separate pages

One of the common problems in jQuery mobile when navigating to a separate page in a separate HTML file is that he “pageinit” event will be triggered each time page is visited. The problem becomes severe when you find that each time you visit the separate page, your “pageinit” event handler is registered +1 more time which makes a great hassle because of the multiple event binding.

Let’s see an example to understand the problem, assume that we have a separate page called “pageA” which includes a JavaScript file that defines “pageinit” event handler as follows:

$(document).on("pageinit", "#pageA", function(e) {
    e.preventDefault();
	
    //Initialization can be done here ...
});

If you navigate from any page to “pageA”, you will find that in everytime you visit this page, your “pageinit” event handler will be registered and executed, which means that if you visit the page for the second time, you will find “pageinit” event handler executed twice and for the third time, you will find it executed 3 times and so on.

In order to resolve this issue, you will need to un-register the “pageinit” event as follows using $(document).off().

$(document).on("pageinit", "#subscriptionView", function(e) {
    e.preventDefault();
	
    //Initialization can be done here ...
	
    $(document).off("pageinit", "#subscriptionView");
});

Doing this workaround makes “pageinit” event handler executing only once each time the page is loaded.

P.S. This behavior does not happen in jQuery mobile when you follow the single HTML file approach which includes all the application pages.

Resolving the z-index problem in Android 2.x Browser

One of the alarming issues of the Android 2.x Browser is that it does not respect the z-index of input elements, this issue is described here in details:
http://code.google.com/p/android/issues/detail?id=6721.

This issue can actually be very blocker to you if your mobile web application contains many openers that utilize the z-index CSS property in order to appear on the top of the active mobile view. This is because when the application’s opener is active and due to this bug, you can find the underlying mobile view input elements highlighted (focused) on the top of the opener as shown in the figure below.
BUG

In order to resolve this issue, I applied the following solution that works with me:
1. When a new opener is opened:
All of the *relevant* underlying input elements inside the view must be disabled. Doing this fix will disable the keyboard interaction with the underlying input elements and in the same time will not allow these input elements to be *focused*.

2. When the opener is closed:
All of the disabled input elements in the first step can be re-enabled again.

The solution looks complex, however, it can help if you have a similar situation.

Error 500: java.lang.NoClassDefFoundError: org.apache.commons.io.output.DeferredFileOutputStream

You may face this error when you are working with Apache commons file upload.

Error 500: java.lang.NoClassDefFoundError: org.apache.commons.io.output.DeferredFileOutputStream

In order to solve this error, you need to include the Apache commons IO jar in the lib folder of your web application. You can download this jar from: http://commons.apache.org/io/download_io.cgi.