I really like bits and pieces of both jquery ui and jquery mobile... mobile makes it easy to render my page for mobile devices, ui gives me a really powerful spinner widget for number boxes that gives me a spinchange event that is too useful to ignore...
But, when I have a selectmenu on a page with both, it short-circuits that select menu and prevents it from opening entirely.
following some pages I found here on stackoverflow, I saw that some people experience problems getting a select to work with jquery mobile, and that wrapping it in a form and setting the data-native-menu option to "false"...
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="option1" class="select">Pick one:</label>
<select id="option1" name="option1" class="optionPicker" data-mini="true" data-native-menu="false" >
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
but that doesn't fix the problem. Cutting either jquery mobile or ui from the document does... but, again, I lose desired functionality elsewhere.
I found that I can turn off jquery mobile for just that item specifically by doing the following after I load jquery but before I load jquery mobile:
$(document).bind("mobileinit", function () {
$.mobile.selectmenu.initSelector = ".neverGonnaLetYouClick";
});
I would assume something similar exists for JQuery UI? But... I am not finding it anywhere...
Did some testing and I suspect it is due to your load order.
Example: https://jsfiddle.net/Twisty/40n27pca/16/
If you read here: https://api.jquerymobile.com/global-config/ they talk about the following:
Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
So I would advise the following:
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
If you reverse it, jQuery UI gets control of selectmenu.
Hope that helps.
Related
I'm currently looking at this question here in stackoverflow. And I am wondering what is the difference between using .remove() and .destroy in the datepicker javascript cause when I tried to run it in an online compiler, it seem to perform the same way.
I was checking the jquery api documention and I can only see the destroy() method in it.
using .destroy()
<button onclick="datepicker.destroy()">Destroy</button>
<input id="datepicker" width="200" />
<script>
var datepicker = $('#datepicker').datepicker();
</script>
using .remove()
<button onclick="datepicker.remove()">Destroy</button>
<input id="datepicker" width="200" />
<script>
var datepicker = $('#datepicker').datepicker();
</script>
destroy() doesn't necessarily remove the element from the DOM. Destroy will 'remove' saved states on the element and put it back to a pre-init state. After destroying, you can re-initialize the same element.
In contrast, remove() will both destroy and remove the element. Gone for good and good riddance to it!
I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :
<form id="form" method="POST" action="webservices/action.php">
<select id="subject">
<option value='0' data-i18n="contact.email" selected></option>
<option value='1' data-i18n="contact.name"></option>
<option value='2' data-i18n="contact.object"></option>
</select>
</form>
The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.
I don't have any problem when not using i18next.
Anyone have an idea how to fix this issue ?
I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:
document.getElementById("form").reset();
The form is now displayed correctly.
I am using jQuery UI MultiSelect Widget. I want my list to have 5 options and the first one("Please Choose") to be selected by default, however I want only the last four options as to be visible and selectable from the users when the list is unfolded.Any good idea how to do that?
Thank you
You must have checked the documentation of that plugin, it has everything to customize it in all possible manner. Check out below sample code:
HTML
<select name="gender" id="gender" multiple="multiple">
<option value="MAN">MAN</option>
<option value="WOMAN">WOMAN</option>
</select>
Script
$(document).ready(function(){
$("select").multiselect({
noneSelectedText: 'Choose Options'
});
});
Fiddle
I am using this incredibly awesome jquery mobile oriented datepicker that I would like to customize based on device size. I saw some suggestions pointing towards modifying the CSS but I am unable to trap the event that creates the popup dialog that comes up with the calendar.
Is there a jsfiddle that I can look and learn from?
Looking at the examples on the page you provided, it appears to be binding to the vmouseclick event. So you should be able to use click, vmousedown, vmouseup depending on your needs.
So if you had HTML like:
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>
Your JQM Would be like:
$("mydate").click(function(){
// Do something
});
I don't see any options of configs to adjust the size of the DateBox upon opening. So you would want to examine the CSS and class settings of the DIV when it is created and then add your own CSS to override the CSS they use (<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />), or download the CSS and Edit it.
There is no default jsFiddle for this, yet I moved an example into one for you to play with if you like: http://jsfiddle.net/Twisty/pNQeD/
I'm using jquery ui controls, and jquery validation plugin.
let's say I want to add a required class on a combobox.
The element is dynamically generated with a generic code.
Where can I add the class ?
I just need to select the next brother with the proper classes:
$('#someSelect ~ .ui-autocomplete-input').addClass('bla');
You can add this html to your view. Or take out the script tags and add this to your js file for that page. In the case below I am adding two classes to the combobox.
This combo box:
<select id="cbCars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This is the JQuery wrapped in a html script tag:
<script type="text/javascript">
$(function () {
$("#cbCars").addClass("ui-state-active ui-corner-top");
});
</script>