selectBoxIt with jQuery Mobile Themeroller #68
Comments
|
the above seems to have truncated my text it should be var selectMenu1 = '<select name="menuSelect1" id="menuSelect1" data-theme="'c" ... etc |
ghost
assigned 
|
I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues! |
|
Hi Greg, Where do I get the new selectboxit.js code from, or do I have to edit the existing file? Thanks, I just added jQuery Mobile data attribute theming support. Let me know if you have any other issues! — |
|
You can also download a custom build of SelectBoxIt here |
|
Thanks Greg, works fine now. Any thoughts? Regards, Bill. You can also download a custom build of SelectBoxIt here — |
|
@chopperbilly I just added support for the Let me know if you have any questions. |
|
Hi Greg, (2) Could you please advise the best way to re-enable disabled options? Many thanks, @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 — |
|
I will see if there is a solution for disabling options with the jquery mobile theme (the |
|
@chopperbilly I just added the |
|
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, @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! — |
|
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. |
|
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++) What am I doing wrong? Thanks, Bill. 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. — |
|
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! |
|
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: then later when required: 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, ----- Original Message ----- 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! — |
|
Hey Billy, Early on in the page, you should not be adding the
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 |
|
Hi Greg, I'm off work until the 7th January, so will get back to you (if necessary) All the best, Bill. On 26 December 2012 14:14, Greg Franko [email protected] wrote:
|
|
Hi Greg, 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. Here's my code: (changed variable name from nameNumSelect to nameNumSelectBoxIt for diagnostic purposes) nameNumSelectBoxIt = $("select#nameNumberSelect1").selectBoxIt({theme:"jquerymobile"}) . // selectBoxIt approach Do I need to do something else to re-display the select box?? Regards, ----- Original Message ----- 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 — |
|
It looks like you are incorrectly adding a dynamic Let me know if that works! |
|
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. 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++) Your jsFiddle works on Chrome, but not on my smartphone test system. Thanks in anticipation! Regards, Bill. 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"})); — |
|
Hey Bill, it looks like there was a |
|
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 ----- 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! — |
|
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, 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! — |
|
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 =) |
|
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. 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 =) — |
|
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 |
|
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. 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? — |
|
Hi Greg, Are you working late- what is the time over there??? Rgds Bill. 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? — |
|
I'm just leaving work now. It's 5:29pm here. |
|
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. I'm just leaving work now. It's 5:29pm here. — |
|
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. |
|
OK, will do. I'll let you know what happens. 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. — |
|
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. ----- Original Message ----- 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. — |
|
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! |
|
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. // newMenu.data("selectBoxIt").selectOption(0); // No - already created, so go direct (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: ', {'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); ) NEXT LINE and following changed to that shown in bold - i.e. addition of $( ...: |
|
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. |
|
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. 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. 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. — |
|
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. 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. — |
|
Hi Greg, You will see several select boxes there, and the associated problems ..... I hope. Rgds Bill. 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. — |
|
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) .... 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. |
|
Hi Greg, I have finally ACTUALLY fixed the problem with more than two select boxes on a page, on an Android device. This is what I was doing: ..... Code to create all 5 select boxes.... Then, call the following function: function doSelectBoxitControls() ... 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-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, ----- Original Message ----- 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. — |
|
Hi Greg, 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 ----- 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 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 |
|
Thanks Greg. @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 =( — |
|
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. |
|
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): (End of sample code when using 2.9.9) Hmmmm...... do I have to include anything other than the .js and the css??? Regards, ----- Original Message ----- 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. — |
|
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 { Regards Bill. |
|
Hi Greg, 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, ----- Original Message ----- 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. — |
|
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 |
|
Hi Greg, All is well with version 3.3.0. All we need now is the facility for multiple Your comment “…the one huge exception being when it is interacted with. If Thanks for getting back to me, we appreciate all your hard work. Regards, Bill. From: Greg Franko [mailto:[email protected]] Hi Bill, I just released SelectBoxIt v3.3.0, so please update to this version. On Also, don't feel bad about asking questions. You are not dumb. Greg — |
|
Just so you know, if you are not okay with how SelectBoxIt handles mobile select boxes, you can update the $('select').selectBoxIt({ isMobile: function() { return false; } }); |
|
Thanks Greg, but the general consensus here is that you are right, the Roll on multiple selects …… Regards, Bill. From: Greg Franko [mailto:[email protected]] Just so you know, if you are not okay with how SelectBoxIt handles mobile $('select').selectBoxIt({ isMobile: function() { return false; } }); — |
|
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. |
|
Hi Greg, Since we are primarily interested in a mobile application, I guess the Thanks, Bill. From: Greg Franko [mailto:[email protected]] What would you like multiple support to look like? I am trying to figure — |
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?
The text was updated successfully, but these errors were encountered: