populate dynamic JQuery fields by dynamic name element

Question

I have a dynamic section for products pulled from a database with an ajax call. Some results are single row and others are multi-rows. I have a placeholder row of HTML in the main page. this is used for initial data entry and can be deleted with java or add additional rows. My desired action is to pull from database via Ajax call count the rows returned and add/populate the results. I'm sure I'll need to delete the placeholder first, and re-create the HTML with each row returned. Also not sure how to fill JQuery element with the existing name field at item_desc[] for each element. I know id's are unique and class can be multiple so my only choice is the name element.

HTML:

<tr class="item-row">
          <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]">Hourly Rate</textarea>
          <a class="delete" href="javascript:;" title="Remove row">X</a>
          <a class="add-product" href="javascript:;" title="Add Product">A</a>
          </div></td>
          <td class="description"><textarea form ="testinsert" name="item_desc[]">Residential Rate: Consulting/Labor/Installs</textarea></td>
          <td><textarea class="cost" form ="testinsert" name="item_cost[]">$95.00</textarea></td>
          <td><textarea class="qty" form ="testinsert" name="item_qty[]">0</textarea></td>
          <td><span class="price" form ="testinsert" name="item_price[]">$95.00</span></td>
</tr>

JQuery:

function populateTableRow(data, selectedProductAutonum) {
                var invoices;
                $.each(data, function() {
                    if (this.autonum == selectedProductAutonum) {
                        invoices = this;
                        return false;
                    }
                });

                $('[name="item_desc[0]"]').val(invoices.description);
                $('[name="item_cost[0]"]').val(invoices.cost);
                $('[name="item_qty[0]"]').val(invoices.quantity);
                $('[name="item_price[0]"]').val(invoices.price);

            }

please remove down vote : your edit overwrite my corrected edit — BarclayVision
– BarclayVision, Commented Feb 17, 2019 at 16:29

Mian Almas · Accepted Answer · 2019-02-17 17:49:21Z

1

You need to iterate through the data you got from the ajax and append the elements if you already have elements than i am assuming that they must have a unique name as well otherwise you cannot get that you can have unique name by below

 <td class="description"><textarea form ="testinsert" name="item_desc[0]">Residential Rate: Consulting/Labor/Installs</textarea></td>

after that, you can use this to see the elements name or id

$('[name="item_desc[0]"]');
$('[id="item_desc[0]"]');

if you don't have the elements created then you can easily create using HandleBar.JS

if you need further help let me know.

or if you don't have the unique id or the unique name of elements inside the table you can use the other selector to iterate through the table to place values.

Edit:

$( document ).ready(function() {
  var data=[{
description:"Hi description ",cost:0.00,quantity:12,price:99.99,autonum:"mine",item_name:"item name"
},{
description:"Hi description 2",cost:2.00,quantity:2,price:199.99,autonum:"mine1",item_name:"item name"
}];

populateTableRow(data,"mine")
});

function populateTableRow(data, selectedProductAutonum) {
                var invoices;
if(data!=undefined && data.length>0){
				 alert(data.length);
				$("#YourCountElement").text(data.length);//if its span or div
				$("#YourHiddenOrInputCountElement").val(data.length)//if its input or hidden then 
				}
                $.each(data, function() {
                    if (this.autonum == selectedProductAutonum) {
                       assignValueToTable(this);
					   invoices = this;
                        return false;
                    }
                });
            }
			
			function assignValueToTable(invoices){
				$('[name="item_name[0]"]').val(invoices.item_name);
                $('[name="item_desc[0]"]').val(invoices.description);
                $('[name="item_cost[0]"]').val(invoices.cost);
                $('[name="item_qty[0]"]').val(invoices.quantity);
                $('[name="item_price[0]"]').val(invoices.price);
			}

<table>
    <tr class="item-row">
        <td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[0]">Hourly Rate</textarea>
        <a class="delete" href="javascript:;" title="Remove row">X</a>
        <a class="add-product" href="javascript:;" title="Add Product">A</a>
        </div></td>
        <td class="description"><textarea form ="testinsert" name="item_desc[0]">Residential Rate: Consulting/Labor/Installs</textarea></td>
        <td><textarea class="cost" form ="testinsert" name="item_cost[0]">$95.00</textarea></td>
        <td><textarea class="qty" form ="testinsert" name="item_qty[0]">0</textarea></td>
        <td><span class="price" form ="testinsert" name="item_price[0]">$95.00</span></td>
</tr>

</table>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

edited Feb 17, 2019 at 17:49

answered Feb 17, 2019 at 16:44

Mian Almas

1743 silver badges11 bronze badges

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

9 Comments

BarclayVision Over a year ago

I'm not sure I understand your html of item_desc[0] line? this gets created dynamically and may be 1 or 2 ect... then I need to populate the JQuery not see it?

BarclayVision Over a year ago

given a static one row result into existing elements does not seem to work

Mian Almas Over a year ago

@BarclayVision check now let me know.

Mian Almas Over a year ago

added the count snippet check now

Mian Almas Over a year ago

You need to get the count of the list containing the object before moving to the each if you are saying there are three rows but the showing the 16 you might be using count inside of each or the assignValueToTable function

|

Collectives™ on Stack Overflow

populate dynamic JQuery fields by dynamic name element

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