Magento 2 dynamically add rows to tier price

Question

Task : To trigger Add button so that a new row is inserted in tier price block every time the loop runs via jquery

I have loop which is triggering the click on Add button but the issue is that the loop is adding only 1 row and that too is not selectable by jquery. The component formed is in knockout, could you please help me in figuring the correct way of doing this and how to add multiple rows to tier table via jquery trigger ?

Answer 1

I found a fix for this issue, i initially used a simple jquery trigger click event to add a new row to the table as prior approach. The only update i did is I added a setInterval of 1 sec, before next trigger to add row, as ko uses internal funtion post click event to update the table template. I faced the issue because the loop was not giving it enough time to update the template causing the event to be trigger only once post loop finish. Here's the code snippet that I used :

// ------------------------------------------------------
// file path for my js
// app/code/Module/Name/view/adminhtml/web/js/my.js
// ------------------------------------------------------
// xml location (allows my js to work in both edit & add pages)
// app/code/Module/Name/view/adminhtml/layout/catalog_product_edit.xml
// app/code/Module/Name/view/adminhtml/layout/catalog_product_add.xml
// ------------------------------------------------------

// on event trigger like page load or btn clicked do following

var table = $('table[data-index="tier_price"]');

// looping variable is based on your ajax-response or requirement 
// on how many times you  want the loop to execute     
loopingVar = [1,2,3,4,5];

initalCount = table.find('tbody tr').length;
finalCount = loopingVar.length + table.find('tbody tr').length;

rowElements = "variable having values for columns in rows";

var elements = setInterval(function(){
         if(table.find('tbody tr').length == finalCount)
         {
            clearInterval(elements);
            // addTierPrice this will update the values in the just rows added
            addTierPrice(table, rowElements);
            return false;
         }
         table.find('button[data-action="add_new_row"]').trigger('click');
}, 1000);

// on event trigger like page load or btn clicked executed above code

In this the setInterval is set for 1 sec which can be brought down to 800 or less. I know this is not a good clean fix but this works for me. Any better answer is highly appreciated. I thought of going with a Knockout js approach for this but couldn't find one. Please fell free to add your comments and improvise this answer.

Thanks