I want to use a multiple-select field in jQuery-Mobile. However only the last selected value is sent to the server. This is my Code:
<select name="myValues"
data-native-menu="false" data-mini="true" multiple="multiple">
<option>Select one or more</option>
<?php
foreach ($propPosValues AS $posValue) {
<option value="<?= $field['Id'] ?>"><?= $field['Value'] ?></option>
<?php } ?>
</select>
Don't bother about the php-code. It actually works. The UI shows a multiple-selects that opens in another window. But only the last selected-Value is sent to the server. But I obviously want all of them.
Any suggestions?
The name-tag needs to be name="myValues[]".
The brackets "[]" indicate, that this is an array of values.
Related
I am trying to display the first 5 options as default in rendering select2.
Select countries
____________
America
Canada
England
France
Spain
I made it multiple and used selected, so it could display but not as straightforward like the above.
How can I set it up like this?
I used the open option, so it displays them like above.
$('#id').select2('open')
However, when I click on anywhere on the screen, it closes. How can I keep it open all the time?
Lets say that your Dropdown HTML is like below:
<select multiple="multiple" id="s1" style="width: 300px">
<option value="1">America</option>
<option value="2">Canada</option>
<option value="3">England</option>
<option value="4">France</option>
<option value="5">Spain</option>
</select>
If you want to always keep Open the dropdown, you can use following code. This prevents the closing by overriding the callback method.
$(doucment).ready(function() {
var list = $('#s1').select2({
closeOnSelect: false,
}).on("select2:closing", function(e) {
e.preventDefault();
}).on("select2:closed", function(e) {
list.select2("open");
});
list.select2("open");
});
Please see the working JSFiddle
I am using jQuery UI controlgroup to style checkboxes in an HTML form. After the input values are processed by a PHP script, the results are displayed on the the same page along with the form itself, so that the user can adjust the filters. What I am trying to do, is to have the boxes that were checked previously remain checked after the form has been processed, so that the user sees what selection criteria were used. To achieve that I store all the PHP $_POST data in a JS variable using json_encode, which I'd like to use to iterate through the labels and mark those that were checked previously. The problem is that the only option of the controlgroup widget that I can use is classes with ui-controlgroup-item which shows every single label within the group as active, and for the life of me I cannot figure out how to make it conditional, e.g. so that I can use if(label[for=' + var.value +'])', var being <?php echo json_encode($_POST) ?> or something similar. Will appreciate any suggestions.
Here is the HTML:
<div id="currencyList">
<label for="gbp">GBP</label>
<input type="checkbox" value="gbp" name="currency[]" id="gbp" >
<label for="usd">USD</label>
<input type="checkbox" value="usd" name="currency[]" id="usd">
<label for="eur">EUR</label>
<input type="checkbox" value="eur" name="currency[]" id="eur">
</div>
And this is the JavaScript bit:
$( "#currencyList" ).controlgroup({
classes: {
"ui-controlgroup-item": "ui-checkboxradio-checked ui-state-active"
}
});
After trying to find a solution for several days I decided to skip trying via the classes option and instead to move outside the controlgroup widget. So here is my not-so-pretty-but-working solution:
var postData = <?php echo json_encode($_POST) ?>;
$( "#currencyList" ).controlgroup();
$('#currencyList').children('label').each(function () {
if(postData.currency.indexOf($(this).attr("for")) >= 0){
$(this).addClass( "ui-checkboxradio-checked ui-state-active");
}
});
I have this select input in my gsp:
<g:select id="whitelistId" name="whitelistId" noSelection="${['nx':'-Select whitelist-']}" from="${Whitelist.list()}" optionValue="description" optionKey="id" />
Even if I change to another item in the dropdown, "nx" value is being sent as params value. If I omit noSelection attribute, it works as expected.
This is the generated html code when "My whitelist" item is selected:
<select id="whitelistId" name="whitelistId">
<option value="nx">-Select whitelist-</option>
<option value="6118854">My whitelist</option>
</select>
I'm using Grails 2.2.0
Any tips?
Thanks
ref-doc states:
Typically this will be blank - but you can also use 'null' in the case that you're passing the ID of an object
so, it's better to use
noSelection="${['':'-Select whitelist-']}"
or
noSelection="${[null:'-Select whitelist-']}"
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 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.