I'm new in jquery and I found on google that I can do what I want using .clone...
But, it works but not completely. Here I have a row which I need to clone when user click on the add button :
<table id="tableTest">
<tr id="row_element_1" name="row_element">
<td><span id="labelNumber_1" name="labelNumber_1">1</span></td>
<td>
<select id="supplier_1" name="comboA_1" onchange="classTest.loadComboB(this.value, 'ComboB_1')" class="select"></select>
</td>
<td>
<select name="ComboB_1" id="ComboB_1" onchange="classTest.loadComboC(this.value, document.getElementById('comboA_1').value, 'ComboC_1')" class="select"></select>
</td>
<td>
<select name="ComboC_1" id="ComboC_1" onchange="classTest.loadInputA(this.value, 'inputA_1')" class="select"></select>
</td>
<td>
<input type="text" name="inputA_1" id="inputA_1" />
</td>
<td>
<input type="number" min="0" name="inputB_1" id="inputB_1" required="1" value="0" onchange="classTest.calculateTotal('inputA_1', this.value, inputC_1)" />
</td>
<td>
<input type="text" name="inputC_1" id="inputC_1" readonly="readonly" />
</td>
<td>
<button id="remove_btn_1" name="remove_product_btn_1" onclick="classTest.removeElement()">Remove</button>
</td>
<td>
<button id="add_btn_1" name="add_product_btn_1" onclick="classTest.addElement(this)">Add</button>
</td>
</tr>
</table>
I'm able to clone it using this but my problem is that the event (like the "onchange" are not changed with the new dynamic value...
var classTest = {
loadComboB : function (_idComboA_Selected, comboB) {
$.ajax({
method: 'POST',
url: 'phpfilewithquery.php',
data: {
moduleId: 'test',
itemId: _idComboA_Selected,
action: 'loabCb_B',
},
reader: {
type: 'json',
root: 'items'
},
success: function (json_res) {
//console.log(json_res);
var items = jQuery.parseJSON( json_res );
comboBox.replaceOption(comboB, items.items); // custom function which load the combobox "comboB" with items.items
}
});
},
loadComboC : function (_idComboB_Selected, _idComboA_Selected, comboC) {
$.ajax({
method: 'POST',
url: 'phpfilewithquery.php',
data: {
moduleId: 'test',
gammeId: _idComboB_Selected,
supplierId : _idComboA_Selected,
action: 'loadCb_C',
},
reader: {
type: 'json',
root: 'items'
},
success: function (json_res) {
var items = jQuery.parseJSON( json_res );
comboBox.replaceOption(comboC, items.items);
}
});
},
loadInputA : function (_idComboC_Selected, inputA_val) {
$.ajax({
method: 'POST',
url: 'phpfilewithquery.php',
data: {
moduleId: 'test',
productId : _idComboC_Selected,
action: 'loadInp_A',
},
reader: {
type: 'json',
root: 'items'
},
success: function (json_res) {
var res = jQuery.parseJSON( json_res );
$('#' + inputA_1).val( res.price );
// this.calculateTotal();
}
});
},
calculateTotal: function (inputA, inputB, inputC){
var price = $('#' + inputA).val();
var qty = $('#' + inputB).val();
var tmp = price * qty;
var total = tmp.toFixed(2);
$('#' + inputC).val(total + ' $');
},
removeProduct: function (elm){
},
addProduct: function (elm){
console.log(elm.parentNode.parentNode);
var rowToClone = $(elm.parentNode.parentNode).clone(true, true);
//var newRow = document.getElementById('tableProduct').appendChild(rowToClone);
var attrLabel = rowToClone.find('span').attr('name');
var temp = attrLabel.split("_");
var number = parseInt(temp[temp.length-1]);
var newNumber = number+1;
rowToClone.find('input').each(function() {
if(this.name) {
this.name= this.name.replace('_' + number , '_' + newNumber );
this.id= this.id.replace('_' + number , '_' + newNumber );
}
});
rowToClone.find('span').each(function() {
if(this.name){
this.name= this.name.replace('_' + number , '_' + newNumber );
this.id= this.id.replace('_' + number , '_' + newNumber );
this.html(number);
}
});
rowToClone.find('select').each(function() {
if(this.name) {
this.name= this.name.replace('_' + number , '_' + newNumber );
this.id= this.id.replace('_' + number , '_' + newNumber );
$( '#' + this.id.replace('_' + number , '_' + newNumber ) ).empty();
}
});
rowToClone.find('button').each(function() {
if(this.name){
this.name= this.name.replace('_' + number , '_' + newNumber );
this.id= this.id.replace('_' + number , '_' + newNumber );
}
});
$("#tableTest").append(rowToClone);
}
};
So, I can I clone a row and changing the dynamic element in the event?
Also, I need to call "calculateTotal" on success in the "loadInputA" function. Do I need to pass all the arguments to the "loadInputA" ?