Dependent Origination

HTML5 app cannot navigate on iOS simulator (xcode)

Posted on: January 16, 2013

This is an epic bug that needs to go to some history of sorts 😀 We have this HTML5 app I wrote and launched two years ago (March 2011 to be exact). That was for fast iteration and getting user feedback quickly, which was the most important thing for a company of five people (at the time). We have since hired a contractor company to rewrite the app in native Objective C and launched it too. The contractor company put four people on the project, and we had one product manger and one engineer and it took four (? or five? or six?) months to launch it. The complexity of the app increased a lot (which i actually am not sure whether it is a good thing or not since i hardly used it after the upgrade, i felt overwhelmed every time i opened the app :). But you can still see the difference (the first version was me and only me).

Anyway, here we are again to explore our mobile strategy. Namely, hiring contractors isn’t working out that great, mind you. There is a difference in working attitude (that is whether you would put in efforts in making something better, or you just do what you are told, in the minimum way). There is also management involved. Lots of teleconferencing, Lots of back and forth etc. So we are again revisiting the problem if we do it in-house or out-source.

Before answering that question, also because good mobile developers are hard to come by, boss wants me to re-incarnate my old app and see how it is working out with the new jqtouch, phonegap, jquery libraries. See how good they are doing now, especially with the problems we used to have with these free libraries, for example, scrolling speed.

Hence I have been spending the past week and a half trying to make the app work again. Mind you I finally reached the third screen, with the third screen fully working on both Chrome and iOS simulator. It is tremendous amount of torture: everyday time was spent from morning to evening in frustration (about things that should work but didn’t) and haze (why?). So I will write about this epic bug I figured out using a day and a half. I am feeling better in fact after this bug: finally this feeling that I can do this. So that is happy ending, sort of 🙂

The bug is like this, we have these lists on the app. You tap (click) on one of the list items and then it goes to the next page. Just like hyperlink. However, nothing happened on the iOS simulator. Well at first nothing happened on Chrome either. But I figured out that if you include a <a href=’#’></a> inside a <li></li> the clicking will work on Chrome.

It took hours (and lots of console.log, and lots of simplifying code to have a minimum case to work with) to figure out the reason why navigation doesn’t work is because the touchStartHandler inside the jqtouch-jquery bridge file isn’t fired. The jqtouch.js registers a handler for touchstart which practically does nothing. The clickHandler gets called but in the end it concludes the current device supports touch so it doesn’t need to fire ‘tap’ event.

Upon further inspection, it turns out the jqtouch-jquery.js file registers the touchStartHandler this way:

$(document).bind(‘ready’, function () { $(‘#jqt’).bind(‘touchstart’, touchStartHandler())});

If you change it to

$(document).ready(function () {….});

Everything will work. I am feeling great now 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

January 2013
« Dec   Feb »


Flickr Photos

%d bloggers like this: