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();
Related
I've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:
$scope.aAnimals.push({"animal": ""})
This causes a problem with the dropdown, since the value of "animal" is equal to ""
<Option style="display: none" value=""> Select an animal </option>
Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.
What I can do? I want the generated text fields to be empty, and the dropdown adds the item.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' value={{item.animal}} class='animal' />
</div>
$scope.obj = {}
$scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
$scope.add=function(){
$scope.aAnimals.push({ "animal": ""})
}
http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview
Let me verify what you need.
When the user click on the Add button, a new empty text box will be create in the page and a new empty option will be create in the drop down. When the user change the value in the text box, the drop down option will change.
In this case your need to modify the code like this.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' class='animal' ng-model='item.animal' />
</div>
I removed track by opt.animal like Pankas said, and added ng-model='item.animal', also don't need value={{item.animal}} since we use AngularJS 2-way binding.
Your code is working perfectly, just remove display none in option
<option value="">Select an animal</option>
I seen you are using jquery in Save functionality. We have jqlite in built in angular. Please check below code for save.
var length = $scope.aAnimals.length;
$scope.aAnimals[length-1].animal =
angular.element(document).find('.animal').eq(length-1).val();
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.
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">
im trying to extend a joomla 3 component's backend form, by adding a datatable which populates data from a table in the database, where the user can add, edit or delete a row. I have the data being displayed and can delete data, but when i come to edit the data im having some issues.
When the user pressed the edit button the data is to be pulled from the database and populated in a form so the user can make changes to it. im getting the data and im populating the form correctly, but i have a select element where i need to make one of the options selected, and i'm having trouble with this, as joomla for some reason alters the select element. below is my code which will make more sense.
// My JQuery code for populating the form
function populateForm(data) {
var dId = jsl('#ajax-discount #d_id');
var dState = jsl('#ajax-discount #d_state');
var dCode = jsl('#ajax-discount #d_code');
var dType = jsl('#ajax-discount #d_type');
var dValue = jsl('#ajax-discount #d_value');
var formStatus = jsl('#ajax-discount-msg');
dId.val(data.message.id);
dState.val(data.message.state);
dCode.val(data.message.discount_code);
//jsl('select[name="d_type"]').val(data.message.discount_type);
dType.val(data.message.discount_type).trigger( "listz:updated" );
//jsl("#ajax-discount #d_type_chzn > ul.chzn-results > li [value='2']").attr("selected", "selected");
//dType.val(data.message.discount_type);
//dType.change();
dValue.val(data.message.discount_value);
}
// my form which is located in my components tmpl/edit.php file
<div class="control-group">
<div class="control-label">Discount Type</div>
<div class="controls">
<select id="d_type" name="d_type">
<option value="0"></option>
<option value="1">$ AUD</option>
<option value="2">% Discount</option>
<option value="3">Free Shipping</option>
</select>
</div>
</div>
// the select element when its rendered in the browser
<div class="control-group">
<div class="control-label">Discount Type</div>
<div class="controls">
<select id="d_type" name="d_type" class="chzn-done" style="display: none;">
<option value="0"></option>
<option value="1">$ AUD</option>
<option value="2">% Discount</option>
<option value="3">Free Shipping</option>
</select><div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="d_type_chzn"><a class="chzn-single chzn-default" tabindex="-1"><span>Select an option</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chzn-results"><li class="active-result" style="" data-option-array-index="1">$ AUD</li><li class="active-result" style="" data-option-array-index="2">% Discount</li><li class="active-result" style="" data-option-array-index="3">Free Shipping</li></ul></div></div>
</div>
</div>
I have tried many different ways, but im stuck at the moment can any please give me some advice or know what i should be doing.
I have solved my question, took me hours to see what i was doing wrong, sometimes stepping away from a problem helps you think about it differently. OK so we know that Joomla uses different plugins and libraries to get its backend to work. One of these Joomla plugins is something called chosen http://harvesthq.github.io/chosen/.
this plugin changes or manipulates a select element. this is why it was rendering differently in browser. so what i was missing really from my code is a way to refresh my change on the ui and below is how you do it.
dType.val(data.message.discount_type).trigger('liszt:updated');
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.)