brianSeagraves.comall things brian seagraves...

I am in the process of completing a web based application that I will be marketing soon. One of the last features to be added is an iPhone interface. The ubiquity of the mobile platform - most outstandingly, the iPhone - has necessitated this.

There are 2 main ways in which to build any application: hand code everything or use a framework. A framework's job is to take the mundane tasks that need to be done for EVERY application you write and make them simple. Some frameworks also help with code organization.

The mobile web platform also has frameworks, though not as many as server side languages do. Two notable ones are iUI and jqTouch. iUi seems to be the more popular one. And, hence, I started out using it.

It handles the creation of the native iPhone look and feel: menu bars, sliding transitions, navigating back and forth in the history, etc. It does these things quite well, and makes it easy for a developer to make simple list based applications. However, more complicated design makes one feel like Saul kicking against the goads. I have cause to present graphical data to the user of my application. For this, I use javascript and the HTML 5 canvas element to draw the graphs. The iPhone's mobile version of Safari also supports this. However, iUI does NOT parse and evaluate script that is in content returned from an AJAX call. So, no graphing, no 'a lot of things'.

This caused me to be more critical of other areas in which it would fall short. Its lack of documentation, and poor automatic handling of form submission caused me to look else where. I started playing with jqTouch - a Jquery base iPhone framwork that also takes care of look and feel, transitions, history management, form submission by AJAX, etc. Little documentation once again, BUT, at least it has a demo app from the developers (iUI has a couple demo apps on the web - not impressed). The method by which jqtouch functions is similar to iUI, and hence I did not need to code much.  Then, I ran into a big problem. After a point, new pages stopped getting fetched by AJAX. In other words, instead of the text in a body being replaced with new text, after clicking a link, all one saw was text on a white screen.  This only happened one pages that had already been fetched from the server. Navigation looked like this:  local page 1 > local page 2 > server page 1 > BLANK server page 2. This was consistent across my application. There is an outstanding issue on this same problem in the jqtouch issue queue. Here is how to fix it:

In the init function add a new selector to this slideSelector. The default is: slideSelector: 'body > * > ul li a',  AND sense my links were not in an list they were not getting identified and loaded into the page. Adding a selector to the list like 'table a' will cause all links in tables to get identified and the expected functionality will occur. So, my completed selector is: slideSelector: 'body > * > ul li a, table a',

Hope this helps someone.