I have this beautiful select menu made with jQuery Mobile, it's working perfectly when using a desktop browser. But one I build an android project and click the menu, it shows nothing.
More bizarre, when I change the displayed page, then the select options show up.
???
Is that normal?
<fieldset data-role="controlgroup" style="margin-top:0px;">
<select name="select-pays" id="select-pays">
<option>Pays</option>
<option value="1">First choice</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
</select>
</fieldset>
Related
There are three frames, in second frame i have loaded all the required js and css files, but still select is not stylised. I added $('.change-theme-wrapper').trigger('create'); It did styled but the select was not opening. And its giving TypeError: r[0] is undefined. Same html code works in other frame but not in this frame. js libraries are loaded in head and other js libraries loaded in body. Please help me.
HTML:
<div class="change-theme-wrapper" data-role="fieldcontain">
<select data-theme="b" id="change_theme" data-native-menu="false" data-mini="true" data-icon="gear">
<option data-placeholder="true" value="">Change Theme</option>
<option value="b">Blue</option>
<option value="a">Black</option>
<option value="c">Silver</option>
<option value="d">Plain White</option>
</select>
</div>
Javascript Version:
jquery-min v1.8.2
jquery-mobile v1.2.0
You need to refresh the select menu after initializing it. Use this code after executing trigger. Hope this will solve your problem.
$('#change_theme').selectmenu('refresh');
I'm programming my first mobile app using Icenium, PhoneGap and jQuery Mobile.
I have several select elements on different pages.
In Android it is working like expected. But in iOS and Icenium's iOS simulator, it is not. When you tap the element, you see in a fraction that it opens the options like a regular HTML option list and than it jumps immediately back to the previous page.
I have no errors and I don't know where to start to find the solution. I have search on Google, but no one does seem to have this kind of problem.
The html is looking like this:
<label class="cornerlogospan" for="ddlLanguage">Language</label>
<select class="settingselectfield" id="ddlLanguage" data-bind="value: Settings().UILanguage">
<option value="nl">Dutch</option>
<option value="fr">French</option>
<option value="en">English</option>
</select>
Generated html:
<label class="cornerlogospan">Language:</label>
<div class="ui-select">
<div id="ddlLanguage-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span class="settingselectfield">English</span>
<select class="settingselectfield" id="ddlLanguage" data-bind="value: Settings().UILanguage">
<option value="nl">Dutch</option>
<option value="fr">French</option>
<option value="en">English</option>
</select>
</div>
Edit
After the suggestion of Omar, I did add the data-native-menu="false" attribute. The page doesn't change anymore, but the page doesn't change anymore. http://www.youtube.com/watch?v=szVv2QfSH9M I still can't select a language. This is also the case in Android now.
I'm working on a phonegap project: 1 html page with 3 (data-role) pages.
One of them contains a select-list with a placeholder.
When the user selects a value in the dropdown, navigates away from the page and comes back, the selected value remains visible.
How can I initialize the list back to the placeholder (without making the placeholder an actual value in the list)?
HTML
<label for="cadeauvoor">Idee voor</label>
<select id="cadeauvoor" name="cadeauvoor">
<option value="" data-placeholder="true">Kies...</option>
<option value="Anne">Anne</option>
<option value="Arno">Arno</option>
<option value="Christophe">Christophe</option>
<option value="Dirk">Dirk</option>
</select>
JS
function InitNieuweTip() {
$("#cadeauvoor").val('');
};
You can bind it to either pageshow or pagebeforeshow:
$(document).on('pagebeforeshow', '#page_id', function () {
$('#cadeauvoor option:eq(0)').prop('selected', true);
$('#cadeauvoor').selectmenu('refresh');
});
Where option:eq(0) is the first option (placeholder) in selectmenu.
I am try to use custom multiselect on iOS, using jquery mobile 1.3.2, but when I set the flag data-native-menu=false, nothing happens, no native select is used, and certainly no custom select pops up, nothing. here is the code
<select name="poimain_category_select" id="poimain_category_select" multiple="multiple" data-native-menu="false" data-placeholder="true"">
<option id="poinmain_category_select_holder" value=""><%print(T('SELECT_CATEGORY'))%></option>
<%print(poidata['category_data'])%>
</select>
I had the same problem with tapHold. I added "-button" to my id when binding and it worked.
From HTML-file:
<select id="selectVaapen" data-native-menu="false" data-inline="false">
<!-- Empty -->
</select>
From javascript-file:
$(function() {
$("#selectVaapen-button").bind('taphold', function(event) {
console.log("tapholdHandler");
});
});
I´m using jquery mobile and trying to use the select menu form in a way that would allow me once I select an option to go to a specific part of my html page. Here is the code snippet I have but it doesn´t seem to work on safari nor safari mobile.
<select id="mymenu">
<option value="">Select a site</option>
<option value="#page1">Page1</option>
<option value="#page2">Page2</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementById("mymenu");
selectmenu.onchange=function(){
var chosenoption=this.options[this.selectedIndex];
if (chosenoption.value!="nothing"){
window.open(chosenoption.value, "", "");
}
}
</script>
Would you say that I should use another event?