selectBoxIt with jQuery Mobile Themeroller

[chopperbilly]

Hi Greg,
If I do the following:

newMenu = $("select#menuSelect1").selectBoxIt({theme:"jquerymobile"}).data("selectBoxIt");

the select box appears to have some theming, but it is not the theme I set in the HTML select box code, e.g.:

var selectMenu1 = '' + 'Select action' .... etc In the (index.html) page, I have: <link rel="stylesheet" href="MadcapMobileThemes3.min.css" type="text/css" /> <link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" type="text/css" /> I would like to be able to use a selected theme from that, e.g. "c" as above; (I actually have a variable there so the user can select a theme.. Any thoughts?

[chopperbilly]

the above seems to have truncated my text it should be var selectMenu1 = '<select name="menuSelect1" id="menuSelect1" data-theme="'c" ... etc

[gfranko]

I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues!

[chopperbilly]

Hi Greg,

Where do I get the new selectboxit.js code from, or do I have to edit the existing file?

Thanks,
Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Saturday, December 15, 2012 3:03 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues!

—
Reply to this email directly or view it on GitHub.

[gfranko]

JavaScript:https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/javascripts/jquery.selectBoxIt.min.js

CSS: https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

You can also download a custom build of SelectBoxIt here

[chopperbilly]

Thanks Greg, works fine now.
However, I'm still trying to figure out how to cause disabled items to show e.g. "greyed out".

Any thoughts?

Regards, Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, December 17, 2012 10:28 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

JavaScript:https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/javascripts/jquery.selectBoxIt.min.js

CSS: https://raw.github.com/gfranko/jquery.selectBoxIt.js/master/src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

You can also download a custom build of SelectBoxIt here

—
Reply to this email directly or view it on GitHub.

[gfranko]

@chopperbilly I just added support for the disableOption() method. This allows you to disable single drop down options. Here is how you would use it:

var selectBox = $("select").selectBoxIt().data("selectBoxIt");

// This will disable the 4th drop down option
selectBox.disableOption(3);

Let me know if you have any questions.

[chopperbilly]

Hi Greg,
(1) that works nicely, but I need to include jquery-ui-1.9.2.custom.min.css to get the class "ui-state-disabled". That seems to cause some menu scrolling overwrite/option positioning undesirable effects, but is livable with.

(2) Could you please advise the best way to re-enable disabled options?

Many thanks,
Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, December 17, 2012 5:48 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly I just added support for the disableOption() method. Here is how you would use it:

var selectBox = $("select").selectBoxIt().data("selectBoxIt");

// This will disable the 4th drop down option
selectBox.disableOption(3);
Let me know if you have any questions.

—
Reply to this email directly or view it on GitHub.

[gfranko]

I will see if there is a solution for disabling options with the jquery mobile theme (the ui-state-disabled class name should not be applied for every theme, so I will have to fix this), and I will also create an enableOption() method tonight. I will respond here when it is added.

[gfranko]

@chopperbilly I just added the enableOption(), which works almost exactly like disableOption(). I also added support for different theme disabled states, which means that you will no longer need to include jQueryUI. Let me know if this fixes your issues!

[chopperbilly]

Hi Greg,

Wonderful! It works like a charm.

I have tested on Android, and will now test on iPhone and iPad, but generally if it works on Android it will work on the others (at least as far as selectBoxIt goes).

I will keep you posted if anything else. Thank you so much for your prompt work.

Next for you for selectBoxIt??? --- (!!!) - Multiple select facility???? (Currently I'm using the dreadful jQuery mobile multiple select box, which has shine-through problems if there are sufficient options that it creates a psuedo new page, is slow, and not at all up to the standard of the rest of jQuery mobile).

Kind regards,
Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Wednesday, December 19, 2012 6:55 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly I just added the enableOption(), which works almost exactly like disableOption(). I also added support for different theme disabled states, which means that you will no longer need to include jQueryUI. Let me know if you this fixes your issues!

—
Reply to this email directly or view it on GitHub.

[gfranko]

Awesome! I'm glad I could help out.

In regards to multi-select select boxes, I don't think SelectBoxIt will support them. Adding multi-select support would add considerable complexity, and SelectBoxIt wasn't built for it. If enough people reach out to me asking for multi-select support, then I will consider it, but until then it will not be supported.

[chopperbilly]

Hi Greg,

I'm now trying to "selectBoxIt" a number of other select boxes, but I need to be able to add options sometimes, after the select box is 'selectBoxIt-ed".

My code looks like e.g.:

for (var i = 0; i < allNameNumsArrayKeys.length; i++)
{
if (!farmLoginBool)
$('#nameNumberSelect1').append('' + allNameNumsArrayDescs[i] + '');
else if (allNameNumsArrayKeys[i] == username)
{
$('#nameNumberSelect1').append('' + allNameNumsArrayDescs[i] + '');
break;
}
}
$('#nameNumberSelect1').append('');
//////// $('#nameNumberSelect1').selectmenu('refresh');
nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"}).data("selectBoxIt");
nameNumSelect.data("selectBoxit").refresh();

What am I doing wrong?

Thanks, Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Wednesday, December 19, 2012 9:46 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Awesome! I'm glad I could help out.

In regards to multi-select select boxes, I don't think SelectBoxIt will support them. Adding multi-select support would add considerable complexity, and SelectBoxIt wasn't built for it. If enough people reach out to me asking for multi-select support, then I will consider it, but until then it will not be supported.

—
Reply to this email directly or view it on GitHub.

[gfranko]

Here is a jsfiddle that shows how to dynamically create a select box with options, and then how to add an additional option(s) to the select box after it is created. Let me know if you have any questions!

[chopperbilly]

Hi Greg,

unfortunately I get the message "Uncaught type error: Object [object object] has no method 'append' ... at ... line 623 --- see bold test code below below:

Early on in the page:
nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"}).data("selectBoxIt");

then later when required:
.
.
.
setTimeout(function() {
nameNumSelect.append($("", {
"text" : " hullo from Bill",
"value" : " Bill"
})).data("selectBoxIt").refresh();
}, 3000);

I would not need to use the set Timeout in the final code, but just thought I'd do exctly what you show in the jsFiddle.

Your example works OK in Chrome, but I can't get it to work on jQuery Mobile. Remember I am not using the jQuery UI stuff, as your earlier mods to use jQuery Mobile Themeroller obviated that..

Thanks in anticipation,
Bill.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Thursday, December 20, 2012 4:44 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Here is a jsfiddle that shows how to dynamically create a select box with options, and then how to add additional an additional option(s) to the select box after it is created. Let me know if you have any questions!

—
Reply to this email directly or view it on GitHub.

[gfranko]

Hey Billy,

Early on in the page, you should not be adding the data("selectBoxIt") method when you are first calling the selectBoxIt plugin. Instead, do this:

nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"});

Your code should no longer complain about the append() method not being there. Let me know if you have any more questions and Merry Christmas =)

Greg

[chopperbilly]

Hi Greg,
and Merry Christmas to you also.

I'm off work until the 7th January, so will get back to you (if necessary)
when I've done what you say to do.

All the best,

Bill.

On 26 December 2012 14:14, Greg Franko notifications@github.com wrote:

Hey Billy,

Early on in the page, you should not be adding the data("selectBoxIt")method when you are first calling the
selectBoxIt plugin. Instead, do this:

nameNumSelect =
$("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"})

Your code should no longer complain about the append() method not being
there. Let me know if you have any more questions and Merry Christmas =)

Greg

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/68#issuecomment-11679419.

[chopperbilly]

Hi Greg,
hope you had a merry and safe Christmas and new Year.

Back at work now, not sure if you are though - hope so ....

The fix you gave me to stop the message about the append() method not being there fixed that one.
BUT - as soon as i do a refresh, the select box disappears completely - bummer!
(Note - if I don't do the refresh, the select box ix still there. but does not have the added options)

Here's my code: (changed variable name from nameNumSelect to nameNumSelectBoxIt for diagnostic purposes)

nameNumSelectBoxIt = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"})

.
.
.

// selectBoxIt approach

  for (var i = 0; i < allNameNumsArrayKeys.length; i++)
    {
    if (!farmLoginBool)
      {
      nameNumSelectBoxIt.append($("<option >", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i]}));
      }
    else if (allNameNumsArrayKeys[i] == username)
      {
      nameNumSelectBoxIt.append($("<option selected />", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i]}));
      break;
      }
    }
nameNumSelectBoxIt.data("selectBoxIt").refresh(); //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! <<<<<<<< This kills the select box.

Do I need to do something else to re-display the select box??

Regards,
Bill.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Wednesday, December 26, 2012 2:14 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Billy,

Early on in the page, you should not be adding the data("selectBoxIt") method when you are first calling the selectBoxIt plugin. Instead, do this:

nameNumSelect = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"})

Your code should no longer complain about the append() method not being there. Let me know if you have any more questions and Merry Christmas =)

Greg

—
Reply to this email directly or view it on GitHub.

[gfranko]

It looks like you are incorrectly adding a dynamic selected option. Below is how you would append a dynamic select box option that is selected

nameNumSelectBoxIt.append($("<option />", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i], "selected": "selected"}));

Let me know if that works!

[chopperbilly]

Hi Greg,

Well - definately my error in that line - thank you! But - the refresh() still causes the select box to disappear, and not re-appear.
(I am using Phonegap, Eclipse and testing on a Samsung Galaxy SIII (Android) )

Just by the way, that error line was not being run as I was running as an admin person and the "else" bit was being used. However, either way, it still fails.

Code is now:

for (var i = 0; i < allNameNumsArrayKeys.length; i++)
{
if (!farmLoginBool)
{
nameNumSelectBoxIt.append($("", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i]}));
}
else if (allNameNumsArrayKeys[i] == username)
{
nameNumSelectBoxIt.append($("", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i], "selected": "selected"}));
break;
}
}
//setTimeout(function() { nameNumSelectBoxIt.data("selectBoxIt").refresh();}, 2000); //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Tried this just in case, but no good...
nameNumSelectBoxIt.data("selectBoxIt").refresh();

Your jsFiddle works on Chrome, but not on my smartphone test system.

Thanks in anticipation!

Regards, Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, January 07, 2013 7:37 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

It looks like you are incorrectly adding a dynamic selected option. Below is how you would append a dynamic select box option that is selected

nameNumSelectBoxIt.append($("", {"text" : allNameNumsArrayDescs[i], "value" : allNameNumsArrayKeys[i], "selected": "selected"}));
Let me know if that works!

—
Reply to this email directly or view it on GitHub.

[gfranko]

Hey Bill, it looks like there was a refresh() method bug for mobile devices only. That bug should now be fixed in SelectBoxIt v2.6.0. You can get the new code here. Let me know if that fixes your issues! Thanks!

[chopperbilly]

No good Greg, still the same - refresh kills the select box and doesn't re-display it.

is there any diagnostic code that I could insert into your selectBoxIt.js that might help somehow?

(I tried inserting an alert into the refresh:function ........ code, but it didn't show - but this could be lack of knowledge on my part as to how to do this into a minified file.)

the following is the correct way to call the refresh function as follows, isn't it?

nameNumSelectBoxIt.data("selectBoxIt").refresh();

Regards Bill.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Tuesday, January 08, 2013 9:15 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill, it looks like there was a refresh() method bug for mobile devices only. That bug should now be fixed in SelectBoxIt v2.6.0. You can get the new code here. Let me know if that fixes your issues! Thanks!

—
Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,

my humblemost apoplexies - your latest selectBoxIt.js DOES fix the problem - I had not changed the name of the .js file to be included, and it was using the earlier one.

Once again, I am sorry for my blunder.

But I'll keep on truckin', who knows, there may yet be something else to discover!

Many thanks,
Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Tuesday, January 08, 2013 9:15 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill, it looks like there was a refresh() method bug for mobile devices only. That bug should now be fixed in SelectBoxIt v2.6.0. You can get the new code here. Let me know if that fixes your issues! Thanks!

—
Reply to this email directly or view it on GitHub.

[gfranko]

Awesome, I'm glad it works for you now! And please continue to report any bugs/new features, because you are only making the project better =)

[chopperbilly]

Hi Greg,

apropos your wish for more work to keep you up even more at night ;=) here's a thought:

Our testers have mentioned that when a (selectBoxIt) select box is used as a menu, and there are more items than will show in the allocated height, it would be useful to have some sort of a scroll bar indication that more items are available - perhaps like the iScroll scroll bar (thin line on the right-hand-side of the box) or a little down-arrow attached to the right of the last option.

I will leave you with this humbly offered thought ...

All the best, Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Thursday, January 10, 2013 6:53 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Awesome, I'm glad it works for you now! And please continue to report any bugs/new features, because you are only making the project better =)

—
Reply to this email directly or view it on GitHub.

[gfranko]

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

Could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags

You will be able to find the SelectBoxIt JavaScript file by going to src/javascripts/jquery.selectBoxIt.min.js

You will be able to find the SelectBoxIt CSS file by going to src/stylesheets/SelectBoxIt/jquery.selectBoxIt.css

[chopperbilly]

Greg,

I'm not familiar with how to create a jsFiddle or jsBin - I would need instruction on that from somewhere - and it would have to be able to use jQuery Mobile.

Could you tell me how the selectboxit code knows to display the selectboxit type dropdown? Maybe I can edit the code and put in some alerts etc if you tell me what to do. Would that be an option??

Regards, Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Thursday, January 31, 2013 10:21 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

—
Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,
also, on the iPhone, a multiple select box (using the jQuery version) can be opened but not closed. It works and can be closed on the Android device (Samsung Galaxy SIII) I thought that might help you???

Are you working late- what is the time over there???

Rgds Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Thursday, January 31, 2013 10:21 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hmm, it's really hard to debug what is going on. Do you think you could "mock" what you are doing and make it public? Maybe even create a jsbin or jsfiddle?

—
Reply to this email directly or view it on GitHub.

[gfranko]

I'm just leaving work now. It's 5:29pm here.

[chopperbilly]

Hi Greg,

well, I've given up trying to find out why version 2.9.9 will only "selectBoxIt" one select box on Android etc. If anyone else comes up with this problem, could you let me know if you fix it. I have reverted back to 2.6.

However on 2.6. I do have a problem on Android only (Samsung Galaxy III) (iPhone OK!) wherin on one screen if a select box is triggered and an option is selected that has another select box below that option, the option touched is in fact correctly selected but it triggers the dropdown of the select box below.

Do you have any thoughts on this??

Any help appreciated -and I'm well prepared to insert any alerts or whatever into selectboxit.js you may want me to do in order to help debug.

Regards, Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Thursday, January 31, 2013 11:30 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

I'm just leaving work now. It's 5:29pm here.

—
Reply to this email directly or view it on GitHub.

[gfranko]

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website (which uses v2.9.9) on my phone, everything works for me. Could you test the SelectBoxIt website on your phone as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

[chopperbilly]

OK, will do. I'll let you know what happens.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Tuesday, February 05, 2013 2:26 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website on my phone, everything works for me. Could you test the SelectBoxIt website as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

—
Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,

Here is the news:

2.7 works OK.

2.8 comes up with the following error: 02-05 15:32:47.349: E/Web Console(22729): Uncaught TypeError: Cannot call method 'find' of undefined at file:///android_asset/www/jquery.selectBoxIt28.js:2667

2.9 won't selectboxit more than one select box (and that is one of two on my "menu" page, and none of the several others on other pages..

The selectboxit website shows exactly the same symptoms on both an Android (Samsung Galaxy III and an iPhone 4s with iOS 6) - that is the very first slectboxit example shows the native select box on both machines..

The thot plickens!!

Over to you.
Regards, Bill.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Tuesday, February 05, 2013 2:26 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

Regarding your issue with version 2.9.9, could you also try versions 2.7, 2.8, and 2.9? Here is a link to all of the tagged releases: https://github.com/gfranko/jquery.selectBoxIt.js/tags.

Also, if I try the SelectBoxIt website on my phone, everything works for me. Could you test the SelectBoxIt website as well?

Regarding the bug you mentioned... I believe that Android 2.3 may have a z-index bug, which causes elements beneath other elements to get clicked.

—
Reply to this email directly or view it on GitHub.

[gfranko]

Hey Bill,

I'm not sure if this will fix your issue, but I upgraded the code again, so if you could please try the new code that would be great!

[chopperbilly]

Hi Greg,

Well, some bad news, some good news:

(1) The bad: The latest version still will not convert the selectboxes (except for the very first one, which when touched displays the list downwards, instead of upwards as previous versions did.) All others on all other pages display the native menu on the Android device, which is what I do most of the testing/development on.
Further: If I try to use the 2.9 .css file, all pages are really screwed up - select boxes partially created, in the wrong places, won't scroll, basically unuseable.
Sorry about that!!!
Further: When returning to the startup menu page, I get an error "...has no method 'data'. The code lines, with the one used for 2.6, are below:

// newMenu.data("selectBoxIt").selectOption(0); // No - already created, so go direct
newMenu.selectOption(0); <<<<<<<<<<<<<!!!!!!!!!!!!!!!!<<<<<<<<<<<< This is what works for 2.6.

(2) The good: The problem I had with version 2.6 on the Android device (Samsung Galaxy III) running Android 4.04, where select box options over another select box would click the box below, is fixed (albeit with sometimes erratic operation) by converting the creation of the select boxes to be entirely jQuery-ised, as follows:

.

(ORIGINAL, and un-modified, code:
var detailsGrid4 = $('

', {'class':"ui-grid-c", 'data-role':"fieldcontain" }).appendTo(historyItemContainer);
$('', {'class':"ui-block-a", 'width':"22%", 'align':"right", 'html':" Staff:  ", 'for':"staffField"}).appendTo(detailsGrid4);
staffText = $('', {'class':"ui-block-b", 'width':"20%", 'type':"text", 'name':"staffField", 'value' : "" + username }).appendTo(detailsGrid4);

// Products
$('<label>', {'class':"ui-block-c", 'width':"27%", 'align':"right", 'html':"Product:&nbsp;&nbsp;"}).appendTo(detailsGrid4);
var productTypeContainer = $('<div>', {'class':"ui-block-d", 'width':"30%", 'data-role':"controlgroup", 'data-mini':"true", 'display':"inline", 'id':"ProductTypeContainer" }).appendTo(detailsGrid4);

)

NEXT LINE and following changed to that shown in bold - i.e. addition of $( ...:
////productTypeSelect = '' productTypeSelect = $('<select name="ProductTypeSelect1" id="ProductTypeSelect1" class="ui-block-d" data-role="none" data-theme="' + themeID + '" data-mini="true" onChange="setSelectedProductType(this)">'); productTypeSelect.append($('<option value="Select product" disabled="disabled" data-placeholder="true">Select</option>')); for (var productTypeKeyIndex = 0; productTypeKeyIndex < fpProductsArrayKeys.length; productTypeKeyIndex ++) { productTypeSelect.append($('<option value="' + fpProductsArrayKeys[productTypeKeyIndex] + '">' + fpProductsArrayDescs[productTypeKeyIndex] + '</option>')); } productTypeSelect.append($('</select>')); $('#ProductTypeContainer').append(productTypeSelect); $('<br><br>').appendTo(detailsGrid4); (Code later to selectBoxIt-ise the select boxes.) The code before changes as above worked correctly on the iPhone. My knowledge of the inticacies of jQuery, HTML5 is obviously nowhere near that of yours, so if you see me doing something undesirable or just plain wrong, please let me know. PS - do you have an Android devie that you could try stuff on? Regards, Bill. ----- Original Message ----- From: Greg Franko To: gfranko/jquery.selectBoxIt.js Cc: chopperbilly Sent: Sunday, February 10, 2013 8:51 AM Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68) Hey Bill, I'm not sure if this will fix your issue, but I upgraded the code again, so if you could please try the new code that would be great! — Reply to this email directly or view it on GitHub..

[gfranko]

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.

[chopperbilly]

Hi Greg,

What I'll do is create a .apk file for the app that you can load onto whatever device you wish to use, and it will have the 2.9.9 selectboxit js file being used.
You can then run the app (which will connect to one of our dev PCs here for the logon and data etc) and see what happens. I will atach a "How to use" file to help you get the app under way.
You could then let me know if you can see the problem.

Then, if necessary, I will zip all the files for some of the pages concerned and you can look at them and say (hopefully) - " Bill - you are a twit and here's what's wrong!"

Back to you soon with the apk file and doc.

Rgds Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, February 11, 2013 10:16 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.

—
Reply to this email directly or view it on GitHub..

[chopperbilly]

OK, attached is the .apk file and the doc to help get going.

Please let me know how you get on. If you want to see the code for some pages after that just let me know.

(By the way, Madcap stands for "Milk Analysis Data Collection And Processing". We do a lot of work for the Dairy Industry here and overseas.)

Many thanks, Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, February 11, 2013 10:16 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.

—
Reply to this email directly or view it on GitHub..

[chopperbilly]

Hi Greg,
should have told you, apropos of my 2 previous emails, to log on as admin (default) and select the page Add contact history item.

You will see several select boxes there, and the associated problems ..... I hope.

Rgds Bill.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, February 11, 2013 10:16 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.

—
Reply to this email directly or view it on GitHub..

[chopperbilly]

Hi Greg,

Not sure if you've had time to check out what I sent, but here's some more info with regard to use on Android (4.x)

It seems that if I have a page with more than two select boxes below each other as per the attached screen shot, then the problems start;

if two select boxes, all is perfect operationally and visually.

if three select boxes, operation becomes erratic, in that the third select box may interact with one of the previous two when clicked.

if more than three, operation is almost unuseable, and wrong options get displayed (i.e. from another select box) and most often won't work at all.

A snippet of the code I am using for each select box (I'm using grids) is as follows:

(historyItemContainer is a div attached to the page)

var detailsGrid5 = $('<div>', {'class':"ui-grid-c", 'data-role':"fieldcontain" }).appendTo(historyItemContainer);
$('<label>', {'class':"ui-block-a", 'width':"22%", 'align':"right", 'html':" Staff sec.:&nbsp;&nbsp;"}).appendTo(detailsGrid5);
staffTextSecondary = $('<input>', {'class':"ui-block-b", 'width':"20%", 'type':"text", 'name':"staffFieldSecy", 'value':"" }).appendTo(detailsGrid5);

// Competitors
$('<label>', {'class':"ui-block-c", 'width':"27%", 'align':"right", 'html':"Competitors:&nbsp;&nbsp;"}).appendTo(detailsGrid5);
var competitorsContainer = $('<div>', {'class':"ui-block-d", 'width':"30%", 'data-mini':"true", 'display':"inline", 'id':"CompetitorsContainer" }).appendTo(detailsGrid5);
competitorsSelect = $('<select name="CompetitorsSelect1" id="CompetitorsSelect1" class="ui-block-d" data-role="none" data-theme="' + themeID + '" data-mini="true" onChange="setSelectedCompetitors(this)">');
competitorsSelect.append($("<option />", {"text" : "Select", "value" : "Select competitor", "disabled": "disabled", "data-placeholder":"true"}));
for (var competitorsKeyIndex = 0; competitorsKeyIndex < fpCompetitorsArrayKeys.length; competitorsKeyIndex ++)
  {
  competitorsSelect.append($("<option />", {"text" : fpCompetitorsArrayKeys[competitorsKeyIndex], "value" : fpCompetitorsArrayDescs[competitorsKeyIndex]}));
  //competitorsSelect.append($('<option value="' + fpCompetitorsArrayKeys[competitorsKeyIndex] + '">' +  fpCompetitorsArrayDescs[competitorsKeyIndex] + '</option>'));
  }

//competitorsSelect.append($('</select>'));

$('#CompetitorsContainer').append(competitorsSelect);

$('<br><br>').appendTo(detailsGrid5);

.... and then the next one etc.

(Note that the Competitors select box should be Multiple select, but you don't have one yet, so just doing single for now.

All the above works perfectly fine on an iPhone and iPad.

Regards, Bill.

[chopperbilly]

Hi Greg,

I have finally ACTUALLY fixed the problem with more than two select boxes on a page, on an Android device.
We noticed that even though it worked correctly 90 % of the time on an iPhone, it would occasionally select the wrong select box, or just show the native version; then try again, and all OK! But Android was almost unuseable with more than two select boxes on a page.

This is what I was doing:

..... Code to create all 5 select boxes....

Then, call the following function:

function doSelectBoxitControls()
{
contactTypeSelectBoxIt = $("select#ContactTypeSelect1").selectBoxIt({theme:"jquerymobile"});
contactStatusSelectBoxIt = $("select#ContactStatusSelect1").selectBoxIt({theme:"jquerymobile"});
productTypeSelect1SelectBoxIt = $("select#ProductTypeSelect1").selectBoxIt({theme:"jquerymobile"});
competitorsSelect1SelectBoxIt = $("select#CompetitorsSelect1").selectBoxIt({theme:"jquerymobile"});
contactNoteTypeSelectBoxIt = $("select#ContactNoteTypeSelect1").selectBoxIt({theme:"jquerymobile"});

... and some other stuff ...

}

HOWEVER - when I changed the code to selectBoxIt each select box as they were created, all works perfectly - see following code example for one of the 5 boxes:

...
...
...
$('', {'class':"ui-block-c", 'width':"27%", 'align':"right", 'html':"Note type:  "}).appendTo(detailsGrid6);
var contactNoteTypeContainer = $('

', {'class':"ui-block-d", 'width':"30%", 'data-mini':"true", 'display':"inline", 'id':"ContactNoteTypeContainer" }).appendTo(detailsGrid6);
contactNoteTypeSelect = $(''); contactNoteTypeSelect.append($("<option />", {"text" : "Select", "value" : "Select note type", "disabled": "disabled", "data-placeholder":"true"})); for (var contactNoteTypeKeyIndex = 0; contactNoteTypeKeyIndex < fpContactNoteTypesArrayKeys.length; contactNoteTypeKeyIndex ++) { contactNoteTypeSelect.append($("<option />", {"text" : fpContactNoteTypesArrayKeys[contactNoteTypeKeyIndex], "value" : fpContactNoteTypesArrayDescs[contactNoteTypeKeyIndex]})); //contactNoteTypeSelect.append($('<option value="' + fpContactNoteTypesArrayKeys[contactNoteTypeKeyIndex] + '">' + fpContactNoteTypesArrayDescs[contactNoteTypeKeyIndex] + '</option>')); } contactNoteTypeSelect.append($(''));
$('#ContactNoteTypeContainer').append(contactNoteTypeSelect);
contactNoteTypeSelectBoxIt = $("select#ContactNoteTypeSelect1").selectBoxIt({theme:"jquerymobile"}); ////!!!!!! putting this here for each individual select box fixed the problem totally, on iPhone as well as Android.

...
...
...

I am very sorry if I wasted your time, but maybe this may help somebody else who may try doing what I did.

What a great way to end a Friday's work.....

I will wait until your next version comes out with multiple select box facility, and then try it.

Kind regards,
Bill.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, February 11, 2013 10:16 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.

—
Reply to this email directly or view it on GitHub..

[chopperbilly]

Hi Greg,
selectBoxIt 2.9.9 is now working fine, since I made the changes to selectBoxIt each select box at the time of creation rather than all at once, as per previous email.

BUT - if I try to use the .css file for 2.9.9 the select boxes show anywhere except where they are supposed to and the UL dots are exposed. The 2.6 version of the css is fine.

Regards, Bill.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Monday, February 11, 2013 10:16 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Billy,

I have an Android 4.0 device myself, and I use Browserstack to test a bunch of iOS and Android mobile emulators. Also, is there any way you could show me a public url? It is nearly impossible to debug the issues you are seeing without it.

—
Reply to this email directly or view it on GitHub..

[gfranko]

@chopperbilly I'm hard at work on the v3.0.0 release, so hopefully you can test that in a day or two. Unfortunately, it does not look like the multiple support will make this release =(

[chopperbilly]

Thanks Greg.
----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Tuesday, February 19, 2013 11:47 AM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

@chopperbilly I'm hard at work on the v3.0.0 release, so hopefully you can test that in a day or two. Unfortunately, it does not look like the multiple support will make this release =(

—
Reply to this email directly or view it on GitHub.

[gfranko]

Hey Bill,

I just released SelectBoxIt v3.0.0, so feel free to test it out! FYI you need to update both the CSS and JavaScript.

[chopperbilly]

Hi Greg,

Here is the news....tested on my Galaxy III :

SelectBoxIt v3.0.0, with the .css for 3.0.0, causes all select boxes to show the native version, not the selectBoxIt-ed version.

Version 2.9.9, with the css for 2.6, works perfectly; however in the case where I need to use refresh(), I have to do the following (see code in bold at the end of the following code):

  $('#farmNumberSelect1').empty();
  $('#farmNumberSelect1').append('<option selected value="Select" data-placeholder="true">Select</option>')

  farmNumSelectBoxIt = $("select#farmNumberSelect1").selectBoxIt({theme:"jquerymobile"});

  var isSelected = "";
  for (var i = 0; i < farmSelectOptionsArrayKeys.length; i++)
    {
    if (i == 0) {isSelected = " selected "; farmNo = farmSelectOptionsArrayKeys[i]; getFarmNameNumbers(farmNo)}
    $('#farmNumberSelect1').append('<option ' + isSelected + ' value=' + farmSelectOptionsArrayKeys[i] + '>' + farmSelectOptionsArrayDescs[i] + '</option>')
    isSelected = "";
    }
  $('#farmNumberSelect1').append('</select>');

  farmNumSelectBoxIt.data("selectBoxIt").refresh().open().close(); // have to do this, otherwise refresh makes NATIVE selectbox show!!!<<<<<<<<<<<<<<<

(End of sample code when using 2.9.9)

Hmmmm...... do I have to include anything other than the .js and the css???

Regards,
Bill.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Thursday, February 21, 2013 8:19 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

I just released SelectBoxIt v3.0.0, so feel free to test it out! FYI you need to update both the CSS and JavaScript.

—
Reply to this email directly or view it on GitHub.

[chopperbilly]

Hi Greg,

FURTHER INFO:

SelectBoxIt v 2.9.9 works OK with the css for v3.0.0. - HOWEVER - the custom css I have for my select boxes will correctly override the setting for select box text, but not for the options text.

My css code, example:

#menuSelect1SelectBoxIt, #menuSelect1SelectBoxItOptions {
width:240px;
max-height:150px;
min-width: 200px;
font: 16px Helvetica, Arial; /* the 16px does not work. It displays your default font size.
}

Regards Bill.

[chopperbilly]

Hi Greg,
We have just been trying selectBoxIt v 3.2, with it's related .css, and it works but displays the native device select box, unthemed. I have this question:

Your documentation says

"Mobile Browsers

Selecting the dropdown will trigger the default wheel interface for all mobile browsers."

I suspect that if this means that the "selectBoxIt-ed" style will not be displayed on a mobile device, then we have been climbing up the wrong tree.

The older versions such as 2.6 did display a themed list, which was what we were aiming for.

We have spent hours wondering what we were doing wrong, but if you can confirm that the native interface will be displayed on e.g. Android and iPhone, then we can move on.

I would appreciate your reply and hope you don't think I am too much of a dummy.

Many thanks,
Bill Fergusson.

----- Original Message -----
From: Greg Franko
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Sent: Thursday, February 21, 2013 8:19 PM
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile Themeroller (#68)

Hey Bill,

I just released SelectBoxIt v3.0.0, so feel free to test it out! FYI you need to update both the CSS and JavaScript.

—
Reply to this email directly or view it on GitHub.

[gfranko]

Hi Bill,

I just released SelectBoxIt v3.3.0, so please update to this version. On mobile browsers, SelectBoxIt should look the same as on Desktop browsers, with the one huge exception being when it is interacted with. If the SelectBoxIt drop down list is opened on a mobile browser, then the original select box options list should be opened instead of the desktop drop down list. This is done so that the native looking select box "wheel" interface will be used, since this is a much better experience for a mobile browser user.

Also, don't feel bad about asking questions. You are not dumb.

Greg

[chopperbilly]

Hi Greg,

All is well with version 3.3.0. All we need now is the facility for multiple
selects!

Your comment “…the one huge exception being when it is interacted with. If
the SelectBoxIt drop down list is opened on a mobile browser, then the
original select box should be opened instead of the desktop drop down list…”
is the key to what we thought was a problem with selectBoxIt, but on
reading your documentation a couple of weeks ago realised what you had
done. We are quite OK with this.

Thanks for getting back to me, we appreciate all your hard work.

Regards, Bill.

From: Greg Franko [mailto:notifications@github.com]
Sent: Wednesday, 20 March 2013 9:48 a.m.
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile
Themeroller (#68)

Hi Bill,

I just released SelectBoxIt v3.3.0, so please update to this version. On
mobile browsers, SelectBoxIt should look the same as on Desktop browsers,
with the one huge exception being when it is interacted with. If the
SelectBoxIt drop down list is opened on a mobile browser, then the original
select box should be opened instead of the desktop drop down list. This is
done so that the native looking select box "wheel" interface will be used,
since this is a much better experience for a mobile browser user.

Also, don't feel bad about asking questions. You are not dumb.

Greg

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/68#issuecomment-15142133
.

[gfranko]

Just so you know, if you are not okay with how SelectBoxIt handles mobile select boxes, you can update the isMobile option to prevent the mobile logic. Like this:

   $('select').selectBoxIt({ isMobile: function() { return false; } });

[chopperbilly]

Thanks Greg, but the general consensus here is that you are right, the
“wheel” style is in fact better for mobile devices, especially the smaller
ones like the iPhone 5 etc. We may give some thought to allowing devices
such as the iPad to show the SelectBoxIt style, but no call for that yet.

Roll on multiple selects ……

Regards, Bill.

From: Greg Franko [mailto:notifications@github.com]
Sent: Wednesday, 20 March 2013 4:48 p.m.
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile
Themeroller (#68)

Just so you know, if you are not okay with how SelectBoxIt handles mobile
select boxes, you can update the isMobile option to prevent the mobile
logic. Like this:

$('select').selectBoxIt({ isMobile: function() { return false; } });

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/68#issuecomment-15157022
.

[gfranko]

What would you like multiple support to look like? I am trying to figure out the design of the drop down when multiple support is turned on.

[chopperbilly]

Hi Greg,

Since we are primarily interested in a mobile application, I guess the
wheel interface with checkboxes is probably one way to go – but if you can
come up with some alternative that could apply to mobiles, it would be nice
if simply a touch on an item would turn it on and show as selected, another
touch on the same item would turn it off, and when all selected have a
“Done” button or similar. I suppose a method to get the selected items
would be useful, unless we could use the normal select box methods.

Thanks, Bill.

From: Greg Franko [mailto:notifications@github.com]
Sent: Thursday, 21 March 2013 9:08 a.m.
To: gfranko/jquery.selectBoxIt.js
Cc: chopperbilly
Subject: Re: [jquery.selectBoxIt.js] selectBoxIt with jQuery Mobile
Themeroller (#68)

What would you like multiple support to look like? I am trying to figure
out the design of the drop down when multiple support is turned on.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/68#issuecomment-15200256
.