tips (en)‎ > ‎

jqm

loops and asynchronous functions
When working with asynchronous functions, the next sentence is incorrect.
for (var i = 0; i < result.length; i++) AsynchronousFunction(result[i].value);

It is incorrect because the for loop may execute faster than AsynchronousFunction and, thus, result[i].value may not be evaluated for some values of i. That is, AsynchronousFunction is not executed sequentially after each for iteration.

To solve this issue and guarantee AsynchronousFunction is executed once for each i, you can use the next structure. 

for (var i = 0; i < result.length; i++) {
(function (param) {
AsynchronousFunction(param);
})(result[i].value);
}

event handlers det/attachment
$("btn").on("click", function(){
    ...code #1...
});

...more code ...

$("btn").on("click", function(){
    ...code #2...
});

With the afore code, what happens when the user clicks the button btn? Since the button has two handlers attached, then code #1 and code #2 are executed. If these two handlers are exclusive, you need to detach one handler to use the other. To detach a handler use "off".

$("btn").on("click", function(){
    ...code #1...
});

...more code ...

$("btn").off(); //detaches the previous handler

$("btn").on("click", function(){
    ...code #2...
});

sequential, chained or simultaneous popups
jquery does not allow for simultaneous popups. If you want to show two or more popups sequentially, then, as suggested by jquery, you have to open each subsequent popup some milliseconds later than the predecesor popup was closed.

The next work around is taken from http://api.jquerymobile.com/popup/
$( document ).on( "pageinit", function() {
    $( '.popupParent' ).on({
        popupafterclose: function() {
            setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
        }
    });
});

anatomy of a jqm page
Respect the  JQM page structure more than your mother and your father, since not doing that can make your html5 app become naughty in certain devices. The Mobile page structure is described here http://demos.jquerymobile.com/1.4.1/pages/

I have an app which worked nicely in a Sony Xperia M with Android 4.2.2 and was already being used for some months. Then, I installed the same app in a Galaxy SIII with Android 4.3 and some functions such as popups did not work anymore. At the end, I discovered that the problem relied in the page structure. Within the <body> section I had the usual html <form> section. This <form> section caused the disturbance and, after removing it, my app works great also in Galaxy S3.
Comments