JQuery Mobile: Bad to worse!

Over the last few months, I’ve been battling with jQuery mobile. Here are the two biggest issues I have with this “framework”.

 

1. It creates additional mark-up

Checkboxes, radio buttons and dropdowns have become a new world of hurt.

Dynamic markup is a pain when using the jQuery validation framework. Normally you can easily specify a class to attach to the field that is in error. Now, you will need to write extra code (per field!) to place the error messages in the correct place, as well as extra code to add classes to a wrapper element when validation errors occur, simply because you can’t target the input field itself. Also, the CSS must target the generated markup. This was really painful for me because I am using an ajaxed wizard style form testing something 5 steps deep!

Another pain point, I wanted to insert a link in a label for a checkbox. This is a standard “I agree to the terms and conditions” checkbox with a link to the “terms and conditions” page. jQuery mobile will actually prevent that link from firing its default behaviour. Come on! This is standard HTML. Leave it alone!

The last thing about generated markup is its incompatibility with Knockout. The Knockout data bound variables just do not work as you expect them to and I am blaming jQuery mobile! The normal events when are not firing when jQuery mobile changes the backing field. I had to manually fire events to get the Knockout code working.

 

2. It chganges default webpage behaviour

I just want standard viewport behaviour. The page should start scaled with 100% width visibility. The user can zoom in or out. If they zoom out too far, the page will resize again to 100% width. They can zoom in as far as the device allows. A simple viewport meta tag will do the trick here.

That wasn’t the behaviour I got though. On iOS, the user was locked at 100% zoom regardless of the viewport setting.  I struggled with this for a few days simply because I didn’t have a console to the mobile browser.  I eventually stepped through the jQuery mobile code and found that it was trying to prevent some default iOS zoom on focus behaviour. In doing so, it changes the viewport meta tag so that Safari mobile can’t zoom to the input field with focus. This also means that if the user was zoomed in to view that text, they are now zoomed out and cannot zoom back in.

Another thing it does is try to ajax in the next page before transitioning to it. I don’t even know where to begin with this. I just turned it off. At least there was a setting for this.

In conclusion, mobile web is supposed to the “easy one”, there is no IE6, 7 or 8 on mobile! So with all the support for HTML5 and CSS3  on the mobile platform, I’m not sure what possessed anyone to use the “framework” in the first place. Taking web page behaviour away from the expected or standard behaviour is one way to give the next developer a massive headache. With all the extra work around code and hacks I had to put in, the jQuery motto of “write less, do more” does not apply to jQuery mobile.