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");
});
});
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 am trying to ignore all calls to refresh (because they generate errors when I set data-role="none") in jQuery Mobile without removing the actual calls.
<div data-role="none">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1" data-role="none">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
The following call generates an error in javascript (because the data-role="none").
$('#select-choice-1').selectmenu('refresh');
The error I receive is:
Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'
This error does not exist if I remove data-role="none".
Is there a way to ignore/override the call to refresh? I have tried to use jQuery .unbind and .off but without success, example:
$(document).on("pageinit", "#mypage", function( event ) {
$('#select-choice-1').unbind('refresh');
});
I don't want to remove the calls to refresh in Javascript unless I have to because I want it to be easy to reapply the jQuery Mobile style at a later time. Does anyone have a solution to this problem?
try:
if($('#select-choice-1').selectmenu()){
$('#select-choice-1').selectmenu('refresh');
}
or
if($('#select-choice-1').data("role")!="none"){
$('#select-choice-1').selectmenu('refresh');
}
You can't call a method of an object thant doesn't exist.
If you want to disable .selectmenu() widget, you need to modify this globally on mobileinit. Moreover, there is no need to add data-role="none".
This way, select tag won't be enhanced/styled with jQM and will be left untouched (native look).
If you do so, you aren't ought to use .selectmenu("refresh"), because the widget is disabled.
To tell jQM not to style select tag, bind global modifications to mobileinit, add them after jQuery and before jQuery Mobile JS libraries.
jQuery Mobile 1.3.2 and below
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.page.prototype.options.keepNative = "select";
});
</script>
<script src="jquery.mobile-1.3.2.min.js"></script>
Demo
jQuery Mobile 1.4
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.keepNative = "select";
});
</script>
<script src="jquery.mobile-1.4.0-rc.1.min.js"></script>
Demo
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´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?
We have the following HTML:
<option value="4def1b88a1247">Text</option>
When using jquery-ui select menu, the option is changed to:
<span class="ui-selectmenu-status">Text</span>
How do we get a jquery-ui selectmenu option to link to another page? We have tried onclick, but this also gets removed when the select menu is re-written.
We just want our options to link to pages without the need of a form to be submitted, is this possible with jquery-ui selectmenu?
Define your select element:
<select id="my_menu">
<option value="/page1.html">Go to Page 1</option>
<option value="/page2.html">Go to Page 2</option>
</select>
And then use the change event to fire the link:
$('#my_menu').selectmenu({
change: function() {
if($(this).val() != '') {
window.location = $(this).val();
}
}
});
According to the documentation here, https://github.com/fnagel/jquery-ui/wiki/Selectmenu, there are callback events that can be used. You mentioned that you tried onclick...perhaps using the change and select callbacks will work instead?
The documentation is from the Felix Nagel version of the plugin by the way, which the FilamentGroup people say on their page is an improved version of there's.