Dynamically created HTML table row is not working fine

Question

I have a Select drop-down field So on change of which I am creating a HTML table row which is fully dynamic

What I am doing is

When user changes drop-down option creating Html table row in which first column i.e ItemName is autocomplete, user can type and select and on focus out some calculation is there
here I have two drop-down so when user select supplier 1 loading JSON data i.e tableData , if user selects Supplier 2 then working on tabledata1 here I have to define two JSON data in my code I am using Ajax on change event
So when i selects Supplier 1 firstly what I am doing is removing if there is any row present using $(tbody).empty and then a row is populated so in ItemName field I am doing autocomplete and it is working fine

Issue is - when I want to change supplier and and now I have selected supplier 2 and deleted the previous row which is of Supplier 1, and when I type in autocomplete field and on focus out it says value is not defined - I don't know what I am doing wrong

To check the error

selects Supplier 1 and enter 333 and selects from drop-down it will populate some thing in corresponding field
Then again change the drop-down from Supplier 1 to Supplier 2 and type white it will show suggestion and on selecting that press tab to focus out there you will find the error

var tableData = {
  "ALMOND CHBAR~2402": {
    "itemName": "ALMOND CHBAR",
    "itemCode": "2402",
    "costPrice": 20.0,
    "gstPercentage": 14.5,
    "mrp": 30.0
  },
  "A BR SB EX~333": {
    "itemName": "A BR SB EX",
    "itemCode": "333",
    "costPrice": 1.0,
    "gstPercentage": 0.0,
    "mrp": 1.0
  }
}

var tableData1 = {
  "White rice~1001": {
    "itemName": "White rice",
    "itemCode": "1001",
    "costPrice": 50.0,
    "gstPercentage": 5,
    "mrp": 65.0
  },
  "Brown rice~333": {
    "itemName": "Brown rice",
    "itemCode": "1002",
    "costPrice": 90,
    "gstPercentage": 5.0,
    "mrp": 110
  }
}


$("#supplierInput").on("change", function(e) {
  $("tbody").empty();

  if (this.value == 'Supplier 1') {
    populateData(tableData)
  } else {
    populateData(tableData1)

  }

});

function populateData(data) {

  var autoCompleteData = Object.keys(data);

  function rowappend(tbody) {

    const markup =
      `
											  
											    
											  
											  
											  
											  
											  
											    
											  
								               			 
											  
											    
											  
											   
											  
											  
											  
											  
											  
											`

    $(tbody).append(markup);
    setTimeout(() => $("[name=itemNametd]", tbody).last().focus(), 100);

    $("[name=itemNametd]", tbody).last().autocomplete({
      source: autoCompleteData

    });




  }
  rowappend($('tbody', '#tableInvoice'))

  function getValues(row) {

    const search = ($('[name=itemNametd]', row).val()).toString()
    console.log("search  : " + search)
    const value = data[search]; // this one is causing issue 
    CostPrice = value.costPrice;

    if (value) {
      $(row).find("[name=itemCodetd]").val(value.itemCode);
      $(row).find("[name=mrptd]").val(value.mrp);
      $(row).find("[name=purRatetd]").val(CostPrice);

      $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
    }

  }

  $(document).on('focusout', (e) => {

    const row = e.target.parentElement.parentElement
    if (e.target.matches("[name=itemNametd]")) {


      getValues(e.target.parentElement.parentElement)
      $("[name=purRatetd]").focus();

    }
  });
  $(document).keypress(function(event) {
    const row = event.target.parentElement.parentElement

    var keycode = event.keyCode || event.which;
    if (keycode == '13') {
      if (!$(event.target).val()) {
        e.preventDefault();
        return;
      }

      if (event.target.matches('[name=discPercentagetd]')) {

        if ($(row).parent().find('tr').length - $(row).index() === 1) {
          rowappend(event.target.parentElement.parentElement.parentElement)
        }
      }

    }


  });


}








  

    
      Supplier
      
    





  
  
    
      
        
          Item Name
          Item Code
          Unit Qty
          Pur.Rate
          Disc%
          Disc Amt
          Gst%
          Gst Amt
          Total Amount

Edit/Update

I ahve edited my snippet when I press enter and if it is Disc% input field then I am creating new row, so when I change the dropdown i.e supplier name it is taking previous one data

Suppose I select supplier 1 So I am entering(Typing in input fields) and tabledata is in working , but when I select supplier 2 and enter data first row gets the tableData1 but when I enter and create row the nex row shows supplier 1 data

gaetanoM · Accepted Answer

Your issue is in this line:

 function getValues(row) {
     const search = ($('[name=itemNametd]', row).val()).toString()
     console.log("search  : " + search);
     const value = data[search]; // this one is causing issue
                   ^^^^

The data variable continues to have the first value. I would suggest to simplify the code. But if there is no chance you may simply save the data value as a data attribute to the autocomplete widget and get its value when needed.

Take a look to .data() or dataset for details.

You can save the data value when you create the autocomplete:

$("[name=itemNametd]", tbody).last().autocomplete({
    source: autoCompleteData
}).data('tableData', data);

You can get the value after:

function getValues(row) {
    const search = ($('[name=itemNametd]', row).val()).toString()
    console.log("search  : " + search);
    var data = $('[name=itemNametd]', row).data('tableData');  // <--- added
    const value = data[search]; // this one is causing issue

var tableData = {
    "ALMOND CHBAR~2402": {
        "itemName": "ALMOND CHBAR",
        "itemCode": "2402",
        "costPrice": 20.0,
        "gstPercentage": 14.5,
        "mrp": 30.0
    },
    "A BR SB EX~333": {
        "itemName": "A BR SB EX",
        "itemCode": "333",
        "costPrice": 1.0,
        "gstPercentage": 0.0,
        "mrp": 1.0
    }
}

var tableData1 = {
    "White rice~1001": {
        "itemName": "White rice",
        "itemCode": "1001",
        "costPrice": 50.0,
        "gstPercentage": 5,
        "mrp": 65.0
    },
    "Brown rice~333": {
        "itemName": "Brown rice",
        "itemCode": "1002",
        "costPrice": 90,
        "gstPercentage": 5.0,
        "mrp": 110
    }
}


$("#supplierInput").on("change", function (e) {
    $("tbody").empty();

    if (this.value == 'Supplier 1') {
        populateData(tableData)
    } else {
        populateData(tableData1)

    }

});

function populateData(data) {
    var autoCompleteData = Object.keys(data);

    function rowappend(tbody) {
        const markup = '\
        \
        \
                \
                \
                \
                \
                \
                \
                \
                \
                \
                \
                \
                \
                \
                \
                \
        ';

        $(tbody).append(markup);
        setTimeout(function () {
            $("[name=itemNametd]", markup).last().focus()
        }, 100);

        $("[name=itemNametd]", tbody).last().autocomplete({
            source: autoCompleteData
        }).data('tableData', data);  // <----   added...
    }

    rowappend($('tbody', '#tableInvoice'))

    function getValues(row) {
        const search = ($('[name=itemNametd]', row).val()).toString()
        console.log("search  : " + search);
        var data = $('[name=itemNametd]', row).data('tableData');  // <--- added
        const value = data[search]; // this one is causing issue
        CostPrice = value.costPrice;

        if (value) {
            $(row).find("[name=itemCodetd]").val(value.itemCode);
            $(row).find("[name=mrptd]").val(value.mrp);
            $(row).find("[name=purRatetd]").val(CostPrice);

            $(row).find("[name=gstPercentagetd]").val(value.gstPercentage);
        }
    }

    $(document).on('focusout', function (e) {
        const row = e.target.parentElement.parentElement
        if (e.target.matches("[name=itemNametd]")) {
            getValues(e.target.parentElement.parentElement)
            $("[name=purRatetd]").focus();
        }
    });

}










    
        
            Supplier
            
        
    
    
        
            
            
                Item Name
                Item Code
                Unit Qty
                Pur.Rate
                Disc%
                Disc Amt
                Gst%
                Gst Amt
                Total Amount

Dynamically created HTML table row is not working fine

Answers (2)

Related Questions