0

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" ?

sincos
  • 127
  • 2
  • 18
  • You haven't organized your HTML correctly, that's why you have problems first place. If you clone the combo with specific id, than you will have duplicates on page, which is not valid. Than, if your choice is jQuery, you should not place your script inline, etc. At the end... after cloning you can change the attributes, but that is really wrong way to go. – skobaljic Apr 08 '16 at 00:10
  • In addition to @skobaljic 's you should also rewrite the the onchange, onclick, etc... as jQuery events: http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick – Vinny M Apr 08 '16 at 00:16
  • ok , this is the first time I use jQuery :( I do not really understand what you mean by " you should not put your script on line" ? What should be the good way of doing that? Thx – sincos Apr 08 '16 at 00:17
  • Please check [this Fiddle](https://jsfiddle.net/g6g1xu2j/), hope you get some ideas. – skobaljic Apr 08 '16 at 01:14
  • thx for this fiddle skobaljiic... Sorry, probably stupid question, but when we have multiple rows, how can I know which combobox I have to fill? When I change the value in the comboA (row3) how I know that I used to fill the comboB (row3) with the value of the comboA ? Same thing with the InputC (which is a total), the value must change when changing the comboA, inputA and inputB change? – sincos Apr 08 '16 at 15:23

0 Answers0