selectmenu() / dropdown() does not work

[CarpeTempus]

Hi,

I've got a problem to use the BB10-Theme in my app. As recommended in the documentation I'm using BlackBerry-JQM-all.min.css and BlackBerry-JQM-all.min.js. On a page in my app I've got a form with several selects. When the page loads I want to make sure that no option in each select is selected.

<form id="form1">
<!-- This is one of multiple selects in a form -->
<select data-shadow="false" name="jahrgangFeld" id="jahrgangFeld">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> 
</form>

Snipet from my app.js (loads directly after BlackBerry-JQM-all.min.js):

    // In case that something is selected every selection will be removed. After that rebuild of the select to make sure that the // widget gets refreshed
$("#form1 > select > option").removeAttr("selected");
$('#jahrgangFeld').selectmenu();
$('#jahrgangFeld').selectmenu("refresh", true); // this is line 907 (see below)

I used ripple for debugging and it returned:

Uncaught TypeError: Cannot call method 'find' of undefined BlackBerry-JQM-all.min.js:1
[...]
resetForm app.js:907

Complete console output:

Failed to load resource local:///chrome/webworks.js
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.) ripple.js:36
webworks.bb10 :: Initialization Finished (Make it so.) ripple.js:36
eula response:  true ripple.js:46
Failed to load resource local:///chrome/webworks.js
webworks.bb10 :: fired webworksready event! ripple.js:36
Failed to load resource local:///chrome/webworks.js
Uncaught TypeError: Cannot read property 'jQuery17109072374782990664' of               undefined BlackBerry-JQM-all.min.js:1
webworks.bb10 :: fired webworksready event! ripple.js:36
Uncaught TypeError: Cannot call method 'find' of undefined BlackBerry-JQM-all.min.js:1
e.widget.setButtonText BlackBerry-JQM-all.min.js:1
(anonymous function) BlackBerry-JQM-all.min.js:1
e.widget.refresh BlackBerry-JQM-all.min.js:1
(anonymous function) BlackBerry-JQM-all.min.js:1
(anonymous function) BlackBerry-JQM-all.min.js:1
i.extend.each BlackBerry-JQM-all.min.js:1
i.fn.i.each BlackBerry-JQM-all.min.js:1
e.fn.(anonymous function) BlackBerry-JQM-all.min.js:1
resetForm app.js:907
(anonymous function) app.js:170
s.event.dispatch BlackBerry-JQM-all.min.js:1
u.handle.a

At first I thought that selectmenus are not supported but according to tje jQuery mobile 1.1.0 documentation it is (http://jquerymobile.com/demos/1.1.0/docs/forms/selects/methods.html). I guess I'm doing something wrong but I don't know what... can someone help me please?

[CarpeTempus]

Hi,

I've found #69 and the dropdown chapter in the documenation. My problem was: I've tried to select a specific option in the select. I did this via

$("#selectID option[value='"+ myValue +"']").attr('selected', 'selected');  
$("#selectID").selectmenu();
$("#selectID").selectmenu('refresh');*/

which did not work. According to the documentation a value can be changed this way:

$('select#select-choice-0').val('express');
$('#select-choice-0').dropdown();

Unfortunately it did not work for me but I found out that that a simple

  $("#selectID option[value='"+ myValue +"']").attr('selected', 'selected');    

without calling dropdown() does the trick too, but only once. A reload of the form with other data does not work... I'm still searching for a solution and will post it here if I find one.

Ps: calling .dropdown(); raises an error:

TypeError: 'undefined' is not an object (evaluating 'parentPage[ 0 ][ $.expando ]') BlackBerry-JQM-all.js:15128

Can you please add more information to the documentation? How should the html snippet look like for your example?

$('select#select-choice-0').val('express');
$('#select-choice-0').dropdown();

Like this?

<select>
    <option id="select-choice-0">Option 1</option>
    <option id="select-choice-1">Option 2</option>
</select>

[CarpeTempus]

Does a workaround exist for this problem (mark an option as selected an refresh the select via .selectmenu('refresh') or .dropdown();)? Has anybody an idea? My problem is that I have to finalyze my app in the next days and I'm still searching for a solution for that problem :-/

[jasondscott]

Can you recreate the issue using this jsbin? http://jsbin.com/afecom/1/edit

[CarpeTempus]

Hi, at first thanks a lot for your fast reply :-)

It was a little bit tricky to recreate the issue - if I just add the two lines of code from the example to my button-listener it works..

$(document).ready(function()
{ 
    $('#myButton').on("click","", function()
{
    $('select#select-choice-1').val("rush");
    $('#select-choice-1').dropdown();               
});
}

... but in combination with webworks for BB10 combined with use of a html5 sqllite database-transaction an error occurs:

Uncaught TypeError: Cannot read property 'jQuery17106945004488807172' of undefined BlackBerry-JQM-all.js:15129

You can recreate the issue this way (thats how I did it) - please note that you need ripple:

I added my code to jsbin, please find it here -> http://jsbin.com/afecom/4/edit Copy the javascript from the JavaScript-tab in jsbin and save it into a new file 'app.js' on your computer. After that copy the html and save it into a file called 'index.html' in the same folder. Then copy BlackBerry-JQM-all.js and BlackBerry-JQM-all.min.css into the same folder. The folder should now contain 4 files:

• index.html
• app.js
• BlackBerry-JQM-all.js
• BlackBerry-JQM-all.min.css

Now change the head-part of your index.html to this:

<head>
    <meta charset="utf-8">
    <title>Action Bar</title>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <link rel="stylesheet" href="BlackBerry-JQM-all.min.css" />
    <script src="BlackBerry-JQM-all.js"></script>
    <script src="app.js"></script>
</head>

Start Google chrome, open the index.html-file and start ripple. After clicking the button "Change to rush" the error occurs on the console.

[CarpeTempus]

Just let me know if you need more information..

[ajmalmsali]

I had managed to change the value of the menu with some tricks, If anybody is still looking for a fix, please let me know.

Here is how i did it.

hT = $('#MST div h1').find('.ui-btn-text'),
hST = hT.find('.ui-collapsible-heading-status');
if(hT.length === 0){
    $('#MST div h1').text('Select Trigger');
} else {
    hT.text('Select Trigger').append(hST);
}
$(".checked").removeClass("checked");
$("#MST div ul li:contains('Select Trigger')").addClass("checked");
$('#menu_select_trigger').prop('value', 'Select_trigger');
$('#menu_select_trigger').trigger("change");
$('#MST div').trigger('collapse');