Wednesday, December 28, 2011

JQueryMobile SplitView Plugin - Force Reload on Different Panel

In paging, jQueryMobile will load your page into the DOM after your first load. So, if you try to access the same page with different parameters (ie, different web storage value), it will not reload even if you show the page again.

This is a common scenario for a common page that display different information when tapping at different list view items. It is especially true when Android 3.0 and above does not support html query string for passing value.

In general, you can use $.mobile.changePage with reloadPage: true option to force a reload.

But for its split view plugin, it requires more steps to force reload a different panel.

You can try the following code to force reload a page at different panel from your menu. My assumptions is you had already install jQueryMobile with its SplitView plugin. Also, you display panel is called main

Android - HTML Query String Issue

It seems that from Android 3.0, passing value from query string from HTML is broken.

HTML query string is in the form of index.html?name=someone

http://code.google.com/p/android/issues/detail?id=17327
http://code.google.com/p/android/issues/detail?id=17535

Personally, I had tested it and I could not get it work for Android 3.0 and above platform. In the past, Android 2.XX work well. It seems that the issue persist on Android 4.0

To workaround this issue, you could use HTML5 Web Storage. There are plenty of information regarding how to use HTML5 web storage.

http://www.w3schools.com/html5/html5_webstorage.asp

But, using web storage only solve part of the problem. When we use HTML query string, what we want to achieve is load dynamic information on the same html page that have common code.

Web storage does solve our passing of information issue, now, we have to solve the displaying issue.

Why would I say displaying is an issue?

1. The html page is cached
2. HTML DOM object is loaded and does not refresh. (jQueryMobile does have this issue)

For HTML page is cached, you can use window.location.reload() to force a refresh

For inner HTML DOM reloading with jQueryMobile, you can use $.mobile.changePage with reloadPage: true as option.

Thursday, December 22, 2011

Javascript - Parsing Form

In some case, you may want to parse your Form information via javascript.

Below is an example script that help to parse your form when you onclick your submit button.

It is using jQuery to access the DOM object.

It will be called when your submit button is clicked. Then, parse the form value to variable and redirect to another page.



JQueryMobile - Header with Image

To put a image, using img tag, in JQueryMobile header toolbar, you need to following to prevent misalignment.



There is a few trick to make it work

1. style="float:left;display:inline" make the image display inline at the left alignment to the header toolbar
2. h1 tag create an empty placeholder to tell jQueryMobile to create a header toolbar with visible height.

Default height for your image should be with 30 pixel.

Wednesday, December 21, 2011

JQueryMobile - SplitView for Android phoneGap

In jQueryMobile, they provide a SplitView resource plugin which is rather cool. You can see it yourself at the link below.

Here, I provide some tip on using SplitView with phoneGap and Android 3.1 tablet

1. You have to use the jQuery mobile js and css file given in the build. It seems that latest 1.0 stable version has alignment issue.

2. You can use jQuery 1.7.1 for this library

3. The order of css and js files is important. It is advised to include them in the following order

jquery.mobile.css
jquery.mobile.splitview.css
jquery.mobile.grids.collapsible.css
jquery-1.7.1.js
jquery.mobile.splitview.js
jquery.mobile.js
iscroll-wrapper.js
iscroll.js
4. Add the following at your main activity java class after super.loadUrl("file:///android_asset/www/index.html");

this.appView.getSettings().setUseWideViewPort(true);

setUseWideViewPort(true) make the WebView to have a normal desktop viewport. If false, it will use it own dimension and SplitView is unable to detect the layout correctly.

Reference:
http://jquerymobile.com/resources/

Javascript - $ Symbol

This is a question for me when I am working with JQuery. What is a $.XXX function? Is $ a variables or object?

In Javascript, $ is commonly use as a short hand for variable definition and function declaration. In layman term, it is just a name.

Javascript variables must start with a letter, underscore or dollar sign.

Thus, we can have a function variable like

var $ = function(){
          alert("$ function");
}

Then, you can call this function as $()

 onclick="$()"

Now, back to jQuery, by default, jQuery uses $ as a shortcut for "jQuery"

That means

jQuery('div.foo'); === $('div.foo');

More readings:

http://www.authenticsociety.com/blog/JavaScript_DollarSign
http://docs.jquery.com/Using_jQuery_with_Other_Libraries