2

enter image description here

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 ?

  • Any help would be great being stuck here since two days. Please if you have any suggestion or probable approach drop a comment. – akashBhardwaj Oct 16 '17 at 5:15
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.