In Aurelia (latest beta version), has anyone tried binding a select element inside of a table where the rows are bound to an array? I don't think it works on the initial load (activate() event).
Here's the example code:
<tbody>
<tr repeat.for="item of variations">
<td>
<input type="text" class="form-control input-sm" value.bind="item.name" />
</td>
<td>
<select class="form-control input-sm" value.bind="item.controlId">
<option>Select...</option>
<option value="1">DropdownList</option>
<option value="2">RadioList</option>
<option value="3">Checkboxes</option>
</select>
</td>
</tr>
</tbody>
In the viewmodel, the list of variations is built something like this in the activate() event:
this.variations.forEach(v => {
let variation = new Variation();
variation.value = v.value;
variation.text = v.text;
variation.control = v.displayType;
self.variations.push(variation);
});
The rest of the properties, ie. text input, show up fine on load. And the same view has regular selects outside of this table and they all bind correctly on load (ie. show the proper select option based on the value that is set programatically).
Is item.controlId a number? If so, what's probably happening is the number value is being compared using === with the string values of the option elements. You'll need to make sure the option values are numbers:
Instead of <option value="1"> use <option model.bind="1">
Related
i'm using bootstrap-select in a form with several selects, but i clone or create new selects with new ids and same class and use:
$(".selectpicker").selectpicker("render"); or
$(".selectpicker").selectpicker("refresh");
and the new selects doesn't get updated, i also try cloning both normal select and created bootstrap-select change ids and data-id and $(".selectpicker").selectpicker("refresh"); but this doesn't work.
How can this be done.
UPDATE
This is the basic HTML, basically i'm using Django formset, here i have a form with a table, each row is a new form instance with inputs and selects.
<tr class="dynamic-form">
<td class="" style="text-align: center">
<input type="number" name="caracteristicas-0-ORDER" value="1" id="id_caracteristicas-0-ORDER">
</td>
<td class="" style="text-align: center">
<select name="caracteristicas-0-caract" data-live-search="true" class="form-control selectpicker" id="id_caracteristicas-0-caract" style="display: none;">
<option value="1" selected="">Nombre</option>
<option value="2">Ref</option>
<option value="3">Modelo</option>
</select>
</td>
The Javascript is basically this:
---- onClickButton ----
row = tr.clone(true); <----- this was the problem
/* clear values, change id's, etc. */
row.insertBefore(lastRow).show();
row.find('.bootstrap-select').remove();
$('.selectpicker').selectpicker("render");
After reading all library code, the problem was in this line:
row = tr.clone(true);
When you use clone(true) you get a copy of the element AND all events handlers etc. You need to get a clean copy of the element structure only.
So the solution is:
row = tr.clone();
I have a dynamically generated html table that adds rows based on the record that is displayed. I'm adding a column that will contain a dropdown. I used ng-options for it, however every time I change one record, the rest are also updated. Tried changing it to ng-repeat and get the same result. See code below:
<td>
<select class="form-control" ng-model="$ctrl.selectedRC" ng- options="r.ccd as (r.OName + ' -- '+ r.RCName) for r in $ctrl.RC track by r.ccd"> </select>
<!--if I have 5 records, all dropdowns in the table change -->
</td>
Using ng-repeat:
<select class="form-control" ng-model="$ctrl.selectedRC" <option value="" ng-selected="true">--Select one--</option>
<option ng-repeat="r in $ctrl.RC"
value="{{r.OName}}"
ng-selected="{{r.OName === selectedRC}}">{{r.RCName}}
</option>
</select>
I know that these two are currently displaying two different things (one a concatenated set of values, the other juts one). But my main interest is to figure out how to have each <td> have its own dropdown without affecting the rest of the rows.
Simply because you use the same ng-model for all rows.
You need to define a different one for each row.
You do this:
ng-model="$ctrl.selectedRC"
but you need something like this:
ng-model="$ctrl.selectedRC[$index]"
where $index is your reference to the row.
I am absolutly new in JQuery development and I have to do the following thing.
Into a form I have something like this:
<tr>
..........................
..........................
<td>
<s:select list="kmProjectInfoStatusList" id="selectStatus" headerKey="0"
listValue="status"
listKey="idProjectInfoStatus"
headerValue="-- Please Select --"
name="kmProjectInfo.status.idProjectInfoStatus"
/>
</td>
</tr>
..........................
..........................
<tr id="datePickerRow" style="display:none">
<td>
<sj:datepicker name="kmProjectInfo.startingDate" id="since" maxlength="10"
displayFormat="dd/mm/yy" showOn="button" duration="slow"
showAnim="slideDown" readonly="true" changeMonth="true"
changeYear="true"
/>
</td>
</tr>
As you can see the form contains a table that contains itself a row having id="datePickerRow" and that for default it is not shown (infact it have the display:none CSS settings).
Upper this hidden row there is a td element that contains:
<s:select list="kmProjectInfoStatusList" id="selectStatus" headerKey="0"
listValue="status"
listKey="idProjectInfoStatus"
headerValue="-- Please Select --"
name="kmProjectInfo.status.idProjectInfoStatus"
/>
This is only a Struts 2 tag that wrap this standard HTML input tag of type select, infact in the generated html code I have:
<select id="selectStatus" name="kmProjectInfo.status.idProjectInfoStatus">
<option value="0">-- Please Select --</option>
<option value="1">Closed</option>
<option value="2">Active</option>
<option value="3">Testing</option>
<option value="4">Starting</option>
</select>
So what I need to do is create a JQuery script that if the selected value is:
<option value="4">Starting</option>
then show the hidden row having id="datePickerRow".
I am thinking that maybe I can do something like this:
$(document).ready(function () {
$("#selectStatus").bind("SELECT AN OPTION VALUE", function (event, data) {
if (data.rslt.obj.attr("value") == 4) {
$('#datePickerRow').show();
}
else {
$('#datePickerRow').hide();
}
})
});
Can be a good idea or is it wrong and I can do this thing in some other way?
If my idea is ok I can't achieve it because I know that the .bind() method is used for attaching an event handler directly to elements (and in my case the event handler is the function that show or hide the row having id=datePickerRow) but I can't understand what is the propper event to put inside bind("SELECT AN OPTION VALUE"
What is the right binded event for the selection of a value into a select input tag ?
My second doubt is related about how to correctly extract the selected value of this select input tag.
I have wrote:
data.rslt.obj.attr("value")
but maybe it is wrong because I think that this is not an attribute.
How ca I fix my script to correctly work?
Tnx
I have a table that includes a column for the user to select from a drop-down menu to populate the next column. Problem is the table contains the same drop-down menu for each row and on change when I select using the following syntax JQuery selects all drop-downs instead of just the one in that has actually changed. Below solution uses event.stopImmediatePropagation() to act similar to a break point and is the only solution I can think of that will work. Please let me know if there is a more elegant solution out there...
<table>
<tr>
<td>
<select name="selected_client[id]" id="selected_client_id" class="selected_client">
<option value=""></option>
<option value="240">CLIENT ONE</option>
<option value="195">CLIENT TWO</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="selected_client[id]" id="selected_client_id" class="selected_client">
<option value=""></option>
<option value="240">CLIENT ONE</option>
<option value="195">CLIENT TWO</option>
</select>
</td>
</tr>
</table>
$j('.selected_client').change(function(event) {
var client_id = $j(this).val(); // <-- value of the drop down that was currently changed
var tmp_row = $j(this).parent('td').parent('tr');
// perform action
event.stopImmediatePropagation(); // prevents calling other matched rows
return false;
});
First off, id's need to be unique. A class would be better suited for this purpose.
$('.selected_client').change(function(){
$(this).val(); // <-- value of the drop down that was currently changed
});
May be you could differentiate the element IDs for each row, example: the first select element would have an id of "selected_client_id01", the second one "selected_client_id02" and so forth. And then only assign functions to all elements with that one class "selected_client".
using event.stopImmediatePropagation(); proved successfully and simply acts as a break which is useful for the scenario when you are dealing with dynamic entities where selecting by id does not quite solve the problem.
I'm struggling with the following and I'm not even sure if it's possible at all.
I have, at start, two pull down menus. Menu one with suppliers and (currently) a second pull down with all size of photos that are in the database. Where I want to go to is that when selecting a supplier, the second pull down menu changes with the option this supplier provides. So far nothing difficult using Jquery and use the output to update the second pull down menu.
Now comes the difficult part. I use the second drop down to insert their information. So the second pull down menu, could be be dozen of them, are all the same. I use a JS script to copy the table row of the form. Since an ID should be unique, these pull downs don't have an ID.
Is it still possible to update all of these 'second' pull down menu's on change of the first pull down menu? And if so, how is it possible?
The first pulldown that should trigger the update of the dropdowns below:
<select name="leverancier" id="leveranciers">
<option value="1">Supplier 1</option>
<option value="2">Supplier 2</option>
</select>
This part gets duplicated:
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
Thanks
Ralf
Give each secondary SELECT the same class.
Then, define an event handler on the primary SELECT that updates secondary SELECTs by targeting that class.
E.g.:
jQuery('#leveranciers').bind('change', function(event) {
// somehow determine the new set of options for all secondary SELECTs
jQuery('SELECT.secondary').each(function(i, e) {
jQuery(e).html(newOptionsMarkup);
});
return true;
});
(Please ignore the terrible .html()-based approach. The important piece is the way updates are targeted.)