Add row only once when found with multiple duplicate values javascript

Question

How to add row only once when found with multiple duplicate values.Here it adds rows according to the number of accountNumber == accountNumberInTable found.I add a new record with say NS-01 and when i add another entry with the same record NS-01 it asks for one confirmation. Again if i add the record with the same value of NS-01, it asks the confirmation twice since there are two rows with the same record.

$('#AddNewRowButton').click(function () {
    debugger;
    var index = $('#CollectionTable tbody tr').length;
    var imageButton = "<button type='button' style='background-color:transparent; margin-top:-4px;' class='btn btn-flat' id='DeleteImageButton' onmouseover=this.style.cursor='pointer'><i style='font-size:11px;' class='glyphicon glyphicon-trash'></i></button>";
    var statementReference = $('#StatementReferenceTextBox').val();
    var accountNumberId = $("#AccountNumberIdHiddenField").val();
    var accountNumber = $('#AccountNumberTextBox').val();
    var customerId = $('#CustomerIdTextBox').val();
    var name = $('#CustomerNameTextBox').val();
    var unit = $('#UnitTextBox').val();
    var collectorName = $('#CollectorsSelect :selected').text();;
    var productName = $('#ProductTextBox').val();
    var amount = parseFloat($('#AmountTextBox').val());
    if (isNaN(amount)) {
        amount = 0;
    }

    var amountTextBox = "<input type='text' id='TableAmountTextBox'" + "value=" + amount + " style='text-align:right;' />";

    if (amount == '' || accountNumber == '' || customerId == '') {
        $('#DialogDiv').empty();
        $('#DialogDiv').append('Cannot add empty values');
        $('#DialogDiv').slideDown(200);
        return;

    }

   
    var newRow = "<tr><td>" + imageButton + "</td><td>" + (index + 1) + "</td><td>" + statementReference +
        "</td><td style='display:none;'>" + accountNumberId + "</td><td>" + accountNumber + "</td><td>" + customerId + "</td><td>" + name + "</td><td>" + unit + "</td><td>" + collectorName + "</td><td>" + productName + "</td><td>" + amountTextBox + "</td></tr>";
    var alreadyExists = false;
    var i = collectionSheetDetails.length;
    $('#CollectionTable > tbody > tr').each(function () {      
            var accountNumberInTable = $(this).find('td:eq(4)').text();
            if (accountNumber == accountNumberInTable) {
                var r = confirm('There is already an entry with the same account number. Proceed anyway?');
                if (r == true) {
                    alreadyExists = true;
                    addNewRow(newRow);
                    calculateTotal();
                    clearReadOnlyFields();
                    if ($('#AccountNumberTextBox').prop('disabled') == false) {
                        $('#AccountNumberTextBox').focus();
                    }
                    enableDisableCollector();

                } else {
                    alreadyExists = true;
                    if ($('#AccountNumberTextBox').prop('disabled') == false) {
                        $('#AccountNumberTextBox').focus();
                        clearReadOnlyFields();
                        $('#AccountNumberTextBox').val('');

                    };
                }
            }
        

    });
    if (!alreadyExists) {
        addNewRow(newRow);
        calculateTotal();
        clearReadOnlyFields();
        if ($('#AccountNumberTextBox').prop('disabled') == false) {
            $('#AccountNumberTextBox').focus();
        }
        enableDisableCollector();
    }

    if ($('#NumberTextBox').prop('disabled') == false) {
        $('#NumberTextBox').focus();
    }
    if ($('#AccountNumberTextBox').prop('disabled') != true) {
        $('#AccountNumberTextBox').focus();
    }
    var colDiv = document.getElementById("CollectionSheetTable");
    console.log(colDiv);
    colDiv.scrollTop = colDiv.scrollHeight;

    //$("#CollectionTable").animate({ scrollTop: $(document).height() }, "slow");
    return false;
});

How do i make it ask for confirmation only once irrespective of the number of duplicate records.Help please.

your snippet shows an error, check for closing curly brackets and parenthesis of your each loop. Also, no need for this if ($('#CollectionTable > tbody > tr').length > 0) inside your loop, if that condition is not true, it won't even go into the loop — Scaramouche
– Scaramouche, Commented Mar 13, 2018 at 12:20
still shows me an error, check it out and see if you can do something about it: { "message": "ReferenceError: $ is not defined", "filename": "https://stacksnippets.net/js", "lineno": 13, "colno": 9 }. Well I think it's the fact that you have not included your jQuery file in the snippet, hence "ReferenceError: $ is not defined", check that out — Scaramouche
– Scaramouche, Commented Mar 13, 2018 at 12:29
I have juery included sir..i have updated the snippet with if Check Removed. — OLDMONK
– OLDMONK, Commented Mar 13, 2018 at 12:40

Alex Yokisama · Accepted Answer · 2018-03-13 12:54:37Z

1

First of all, this is a useless check:

if ($('#CollectionTable > tbody > tr').length > 0)

You do this inside $.each loop for the same selector, so if the loop is running, you already know, it exists. Also, this will always give you length of the first found <tr>.

Answering your question: you need just to finish the loop after first duplicate confirmation. Use return false; for this purpose. It's equivalent to break in for-loop.

Edit: try to modify your each like this:

$('#CollectionTable > tbody > tr').each(function () {      
  var accountNumberInTable = $(this).find('td:eq(4)').text();
  if (accountNumber == accountNumberInTable) {
      var r = confirm('There is already an entry with the same account number. Proceed anyway?');
        if (r == true) {
          alreadyExists = true;
          addNewRow(newRow);
          calculateTotal();
          clearReadOnlyFields();
          if ($('#AccountNumberTextBox').prop('disabled') == false) {
            $('#AccountNumberTextBox').focus();
          }
          enableDisableCollector();
        } else {
          alreadyExists = true;
          if ($('#AccountNumberTextBox').prop('disabled') == false) {
            $('#AccountNumberTextBox').focus();
            clearReadOnlyFields();
            $('#AccountNumberTextBox').val('');
        };
      }
      return false;
    }
  });

edited Mar 13, 2018 at 12:54

answered Mar 13, 2018 at 12:27

Alex Yokisama

1,0417 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Scaramouche Over a year ago

@OLDMONK; maybe return false; is actually what is necessary here. return true; will cancel any further code execution within THE CURRENT ITERATION, and will go up and continue with the next iteration and on and on. On the other hand return false; will effectively cancel ALL FURTHER ITERATIONS and leave the loop. try this, good luck

Alex Yokisama Over a year ago

@J.M.Echevarría, my bad, mixed them up

Scaramouche Over a year ago

@OLDMONK; didn't work as in, it is still confirming more than once? Look, insert console.log(accountNumber); right after if (accountNumber == accountNumberInTable) {. check the console output

Scaramouche Over a year ago

@OLDMONK; post the output please, BTW your snippet is still not working ;). try including your jQuery file before any other code in the snippet

Scaramouche Over a year ago

@OLDMONK; please update your question with the code you are currently using

|

Collectives™ on Stack Overflow

Add row only once when found with multiple duplicate values javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related