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');
Related
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 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 creating a web form using JQuery.
I want to copy previous select fields into another select field using a link. i have it changing the DOM, the value of select1.selectedIndex is changed. however it still visually displays the old value. apparently you need to refresh it so it visually updates. I don't understand the syntax of the refresh method i keep reading around. This is how I tried to do it and it doesn't work.
this is the html for the link
<select name="entry.14.single" id="entry_14">
<option value="1"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option></select>
<select name="entry.16.single" id="entry_16">
<option value=1""></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option></select>
Same as above
here is my javascript:
function setSelect(id1, id2){
var select1 = document.getElementById(id1);
var select2 = document.getElementById(id2);
select1.selectedIndex = select2.selectedIndex;
$('#select1').selectmenu('refresh');
}
can someone please tell me why my refresh statement is not working?
p.s. i know there are other threads on the same issue, i have also read the 'documentation.' please dont link me somewhere else. I have read other sources and its not getting me anywhere. Please just show me what to change in order to get the refresh working properly.
EDIT: heres a jsfiddle you can mess around on
http://jsfiddle.net/AFzqt/7/
Utilize jQuery event handlers!
The function you are looking for is:
selectmenu("refresh")
In your example, it would look something like this:
$(function() {
$("#changeButton").on("click", function(e) {
$("#entry_16").val($("#entry_14").val());
$("#entry_16").selectmenu("refresh");
e.preventDefault();
});
});
http://jsfiddle.net/AFzqt/8/
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>
I have 1 slider and 1 button:
<div data-role="fieldcontain">
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div><br><br>
<div data-role="fieldcontain">
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
How can I POST (like form action="http://somesite" method="post"), when slider's value is changed? button is pressed?
One solution would be to add a custom data attribute that enables the input to auto submit the form it is child of.
Format of such an attribute could be:
<select name="slider" id="slider" data-role="slider" data-autosubmit="true">
<option value="off">Off</option>
<option value="on">On</option>
</select>
The jQuery code to enable auto submit is as easy as below, but we need to make it a bit more complicated for the slider, see the fiddle sample in the end for that.
$('[data-autosubmit="true"]').change(function(){
$(this).parents('form:first').submit();
});
I don't know if you use the native jQuery mobile form handling or a custom one, but if you want to use a custom hook on the submit it could look something like this:
$("form").submit(function() {
//Handle the submit with a jQuery.post or whatever
});
Here is a fiddle with some running sample code: http://jsfiddle.net/4VFgS/1/
The fiddle code got some handling to prevent that you submit the form 100 times per second.
$('#slider').change(function(){
...
$.post(yoururl, yourdata, function(callbackdata){
...
});
});
See jQuery.post() and jQuery.change()
Edit: BTW: Having 2 elements with the same id will likely lead to major problems sooner than later.
Edit 2: If you're trying to get a response from a different domain this way, you're probably out of luck unless they offer you JSONP or the like. You will not be able to fetch content from a 3rd party site via XMLHttpRequest because of Same Origin Policy Limitations.
You could proxy the request through your server, though, so the AJAX call would go to the same domain.