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.
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 have a web page designed with asp.net.I am using Google Website Translator gadget for translating my entire webpage to different languages.But some of my pages are needs only the part of the web page to be translated.for example,in my web page i displayed a List box control.Now i want to translate the content of the List box only.
Is this possible with Google Website Translator Gadget?
Please guide me a way to get out of this problem?
Yes, use class="notranslate".
It works for me:
<body>
<span class="notranslate">
content...
</span>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<span class="notranslate">
other content...
</span>
</body>
In this example, "content..." and "other content..." will not be translated and "One" and "Two" in select box will be translated.
Result:
<body>
<span class="notranslate">
content...
</span>
<select>
<option value="1">یک</option>
<option value="2">دو</option>
</select>
<span class="notranslate">
other content...
</span>
</body>
Is Simpledialog2 not supported select menu in jQuery Mobile ?
Because when I use select menu in Simpledialog2, I get error like as under,
"Uncaught TypeError: Cannot read property 'jQuery1910010748725151643157' of undefined"
And if I do not use select menu than it's working fine, how strange it is.
I am trying without select menu as under, It's working fine.
<div id="inlinecontent" style="display:none;">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label>My Label</label>
<input value="myval" type="text">My Value</input>
</fieldset>
<a rel='close' data-role='button' href='#'> Close </a>
</div>
</div>
And now I am trying with select menu, I get Uncaught Type Error in console and it's not working :(
<div id="inlinecontent" style="display:none;">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</fieldset>
<a rel='close' data-role='button' href='#'> Close </a>
</div>
</div>
My js code as under,
$(self.el).find('#inlinecontent').simpledialog2({
mode: 'blank',
headerText: 'My header text',
headerClose: true,
blankContentAdopt: true,
blankContent : true
});
Can any one help me to fix this?
Any help appreciated.
If possible dont use Simpledialog2 with jQuery Mobile. Last version was made to work with jQuery Mobile 1.0.1. That was a long time ago and a jQuery Mobile has changed a lot since then.
You should use jQuery Mobile native dialog or native popup instead. You will get same functionality and unlike Simpledialog2 these are not 3rd party plugins.
One of possible reasons why this is not working because jQuery Mobile don't support 2 popups at the same time. When select is opened its will show a popup (unless it is turned off, but default state is popup select) and because Simpledialog2 is already a popup it will throw an error.
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.