How Not To Debug A JQuery Mobile App

Here I was thinking I had got a good grasp of JQuery Mobile enough to go ahead and integrate it with CakePHP.

I admit it was a fun thing to see a desktop version automatically scale into a mobile version with only a few lines of code from my previous post.

My mobile development had taken a bold leap forward in terms I couldn’t be less than happy for.

So after getting my hands and head wrapped up around the structure of JQuery mobile, I felt I was in the “common yeah, let’s do this” moment – speaking in the Tony Robins tone here :)…

I loaded up the site in my mobile emulator and straight up it was looking sharp and tidy :).

But then I wanted to be sure it was alright so I loaded in my Samsung Galaxy phone. Okay it still was looking cool and I was about super excited about this.

Finally, I remembered my old Blackberry phone exists. And knowing that most young people around here have the older Blackberry OS5 phones, I decided to give it a shot.

The result was nerve-rending. My wonderful new mobile site loaded alright. Yes, up to only the preloader gif image!

I tweaked headers and disabled all custom scripts. Once it would work and at another try it would just hang up at the preloader.gif image.

 

After almost 6 combined hours of nerve-wrecking pondering, hair-pulling, and knocking my head against the wall I finally decided to try offloading some content from the page.

I removed a bit of this and a bit of that. Each time uploading the new changes, and refreshing my Blackberry phone’s browser. (Yes, I was a bit too lazy to set up a local DNS server that would allow me access my local site from my Blackberry phone…)

Finally, I found it. A simple search form. Eureka!

After removing the form and returning I discovered that without the form the site loaded up pretty good.

To cut the chase, I reduced the size of the form and transferred it to another page. The original form still won’t load properly so I’m yet to find out what part of that form is responsible for giving JQuery mobile  such terrible hiccups.

 

Javascript JQuery var $varname is not a PHP variable!

JQuery

JQuery (Photo credit: Wikipedia)

Recently, I came across some JQuery code with a variable declaration having a $ sign before the variable name.

Below is an excerpt of the code.

var markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
$header = $page.children( ":jqmData(role=header)" ),
markup += "</ul>";

After doing a brief search I found the following explanation very useful and this might take out the confusion that may have you screaming to yourself “Is JQuery now running PHP?”

“ It just seems to be common practice by a lot of jQuery people smarter than us to signify it’s a jQuery object stored in that variable, it has zero to do with jQuery itself per se”.

via [jQuery] var $varname – jQuery Forum.

CakePHP Validation Nightmare

So I had this form with radio buttons and some database fields that do not allow NULLS which was working before I started tinkering with some fancy features.

After a few minutes of modifying the code to use a JQuery star rating plugin for the radio buttons, I was stuck with a form that wouldn’t save even though the validates $this->ModelName->validates(array('fieldList'=>array())) method returned true.

Printing out the posted data in $this->data showed me that my radio buttons which were created individually were sending empty strings with no data.

I was almost knocking my head against the wall and pulling out my hair when I decided to turn off the validation for the radio button fields just to see if that would make the form save. But no joy!

Eventually, by using Firefox‘s webdeveloper plugin I examined the form and noticed there was one hidden input with the name of the radio button field for each of the radio buttons.

How do I remove these hidden input fields? According to the CakePHP manual, a hidden field is usually attached to form elements such as radio buttons, and check boxes, so that even when none of the options get selected, there will be an entry for that field in the return $this->data array.

Then I found out from the manual that you can remove the hidden fields by specifying an option for ‘hiddenField’=>false as part of added parameters for the form input method.

I removed all the hidden fields from all but the very first radio button just to keep things normal. That means I specified ‘hiddenField’=>false for each radio button excluding the first one in the group.

This meant that my form now submitted data normally in each of the radio button groups.

But despite fixing this there was still a problem as my database only saved some fields and ignored the other form fields. I quickly realised that I had whitelisted several fields and forgot to add the news fields I had added when I modified the database structure.

That solved the problem of the partial saving altogether.

Finally, I decided to allow NULLS for the fields that were allowed to be empty in order to ensure that it saves even when none of the radio button options are selected which was what I needed.

Goodness gracious!