How to prevent appending multiple times in the table, Once It forcing to double click multiple times the table row using Jquery?

Question

I have module appending the result of response to the other table. looking forward I found a solution in my module. however I found problem on that i will give to you guys the scenario what the problem it does.

First Scenario : User will choose what condiment he wanted to click, Looking forward Ex. User 1 choose the Second table row, the Condiments *LG FRIES .

Second Scenario : In the first scenario user choose the *LG FRIES , as you can see here modal will open and the result of response will append to the table B.

Third Scenario : Well First and Second scenario look works and good, but here I will show you, how does appending will multiply in the table once i force double click the table row of *LG FRIES .

So now i will let you show my codes.

This is my function for getting the result of clicking the of table row then the result will append to the table B.

$('table#noun_chaining_order').on('click','tr.editCondiments',function(e){



    var allow_to_open_condiments_conditional =  $(this).closest("tr").find(".allow_to_open_condiments_conditional").text();


    if(allow_to_open_condiments_conditional == 'Yes') {

        $('.conditional_table_hidden_noun').hide();

        $('.conditional_table_hidden_condiments').show();

        $('table#noun_chaining_order tr').removeClass('selected');

        $(this).addClass('selected');



        var find_each_id_condiments = $(this).find('td.condi_section_id').text();
         $("table#customer_table_update_chain_order tbody").html('');

        $('#customer_modal_update_chain_order').modal('show');

         $.ajax({
          url:'/get_each_id_section_condiments',
          type:'get',
          data:{find_each_id_condiments:find_each_id_condiments},
          success:function(response){

            var get_each_section = response[0].condiments_table;


            $.each(get_each_section, function (index, el) {

               var stringify = jQuery.parseJSON(JSON.stringify(el));


              var cat_condi_screen_name = stringify['cat_condi_screen_name'];
              var cat_condi_price = stringify['cat_condi_price'];
              var cat_condi_image = stringify['cat_condi_image'];
              var image = '<img src=/storage/' + cat_condi_image + ' class="responsive-img" style="width:100px;">';

              // $('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");

              $('table#customer_table_update_chain_order tbody').append("<tr class='edit_condimentsClicked' style='font-size:14px; border:none;'><td class='edit_condimentsScreenNameClicked'>" + cat_condi_screen_name + "</td><td class='edit_condimentsScreenPriced'>" + cat_condi_price + "</td><td>"+image+"</td></tr>");

            });



          },
          error:function(response){
            console.log(response);
          }
        });

    }
    else
    {

    }

});

So the question will be, How to stop appending multiple times once I force double click the table row?

Answer 1

I see simple solutions here.

1. When you appending cart item, you can add that item ID from database to the element. And before appending check if an item from response doesn't exist in BODY.
2. Another solution will be just after you click append - hide that CTA (button)to prevent it from another click.
3. Check your database for multiple records.

Anyways, please check when you do ajax request? after click?

Have you tried to debug your code with breakpoints? or console?