jquery mobile expanding form listview + mobiscroll (for time picker)

I want that a user will be able to add more and more days of the week and time to workout.

For example, there is a combo-box (select) with a day of the week and a time of the day (for a reminder) and a time to workout. After it chooses it, a button will apear with an “add” label and it will be able to choose another time to workout (in addition to the previous ones). The workout times should be sorted.

I think that I will create a listview. That every LI contains an onClick to a javascript function with its id. When li clicked it will open a dialog/popup with options: edit, delete, alert x minutes before. Now it sounds like a scalable solution. will be able to add/remove features easily and the user is able to view its workout planning very nicely.

I can actually use my old code from this post.

i’m going to use the jquery mobile dialogs.

now i also need a jqm time picker, so i found this (10 JQUERY TIME PICKER PLUGINS) post with 10 different plugins links and reviews but its not jquery MOBILE… its for jquery…. 😦

so i encounter this post –

Awesome Date-Time Picker For Mobile: Mobiscroll

so i get to mobiscroll website, specifically to the 5-minutes guide. lets see if it truly takes 5 minutes.

ok, i download the mobiscroll.datetime-2.4 and extracted.

i added the sample code from this post and everything worked g8! great job mobiscroll! 🙂

i converted the code to show time only ($(“#i”).mobiscroll().time();). and i’m ready!!

it’s working on pc with chrome, but not on my phonegap app…  😦 shit….

now its working, the reason was that the page with the mobiscroll code was loaded via a link that needed the data-ajax=false to work. so now everything is ok (according to this post on phonegap, you need this to reload completely the linked page which is what i want). mobiscroll works on phonegap under android! 🙂 happy happy

It’s important to note if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.

For example, a link to a page containing multiple internal pages would look like this:

<a href="multipage.html" rel="external">Multi-page link</a>

The time picker worked so well with mobi so i decide to use its SELECT code as well (instead of the boring select of jqm). So I read this post

Hassle-free 5 minute guide to awesome Select

it looks good. lets try that.

this worked quite well. I just had to replace the names of the files given in the js code in the post.

The only thing is to add  data-role=”none” to the html select. otherwise the view gets messed up – both mobi view and jqm view at the same time – not pretty.

ok. now i’m going to put it in a pop dialog.