CODEWITHSUNDEEP
jqueryhtml
BarclayVision
BarclayVision

Reputation: 863

populate dynamic JQuery fields by dynamic name element

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);

            }

Upvotes: 0

Views: 125

Answers (1)

Mian Almas
Mian Almas

Reputation: 174

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>

Upvotes: 1

Related Questions