traversing the dom in jquery
Posted: Thu Jun 12, 2014 5:57 pm
I'm trying to traverse a grid component to read its contents so that they can be updated. I am running into al little trouble. I wonder if you can help.
Here is my code:
code
if (shoppingBasket.length > 1 ) {
console.log("");
console.log("The shopping cart has items");
Code: Select all
// select the grid containing the page items
var itemGrid = $(".StockItems_item_grid_wrapper > table");
// get number of entries on the page
var productEntryCount = itemGrid.length - 1;
console.log("");
console.log("Product Count = " + productEntryCount);
// ok so far productEntryCount contains the number of grid rows)
// need to loop through shopping basket and update page accordingly
for (i = 1; i < shoppingBasket.length; i++) {
//need to loop through the page items to see if there is a match and update
for (j = 0; j < productEntryCount; j++) {
// now we have to get each item in the list
//
// any of the following causes an error in the console:
//
// <Uncaught TypeError: undefined is not a function
//
var productImage = itemGrid[j].find(Appery('image')).attr('src');
var productType = itemGrid[j].find(Appery('product_type')).text();
var productName = itemGrid[j].find(Appery('product_name')).text();
var productWeight = itemGrid[j].find(Appery('weight')).text();
var productCost = itemGrid[j].find(Appery('cost')).text();
var productQuantity = itemGrid[j].find(Appery('quantity_value_cell')).text();
}
} } else {
console.log("");
console.log("The shopping cart is empty");
}
}
/code
itemGrid[] contains a number of tables, one for each grid row. See sample:
code
:<table id="StockItems_item_grid_0" class="itemgrid StockItems_item_grid" dsid="item_grid_0" name="item_grid" cellpadding="0" cellspacing="0" __tiggrdisplay="table" style="display: table;" dsrefid="item_grid" idx="0">
<colgroup><col style="width:auto;">
</colgroup><tbody><tr class="StockItems_item_grid_row_0">
Code: Select all
<td id="StockItems_item_cell" name="item_cell" class="StockItems_item_cell" colspan="1" rowspan="1">
<div class="cell-wrapper">
<img class="StockItems_image" src="https://api.appery.io/rest/1/db/files/53514a80e4b0e44dd02714be/530e47ef-39fd-49ea-8027-63698e6d7c1d.bacon.jpeg" id="StockItems_image" dsid="image" name="image">
<div name="product_type" id="StockItems_product_type" dsid="product_type" data-role="appery_label" class="StockItems_product_type">Pork<>
<div name="product_name" id="StockItems_product_name" dsid="product_name" data-role="appery_label" class="StockItems_product_name">Bacon<>
<div name="weight" id="StockItems_weight" dsid="weight" data-role="appery_label" class="StockItems_weight">1.36 Kilo<>
<div name="cost" id="StockItems_cost" dsid="cost" data-role="appery_label" class="costelement StockItems_cost">£6-00<>
<div class="StockItems_quantity_grid_wrapper" data-wrapper-for="quantity_grid">
<table id="StockItems_quantity_grid" class="StockItems_quantity_grid" dsid="quantity_grid" name="quantity_grid" cellpadding="0" cellspacing="0">
<colgroup><col style="width:40%;">
<col style="width:30%;">
<col style="width:15%;">
<col style="width:auto;">
</colgroup><tbody><tr class="StockItems_quantity_grid_row_0">
<td id="StockItems_quantity_label_cell" name="quantity_label_cell" class="StockItems_quantity_label_cell" colspan="1" rowspan="1">
<div class="cell-wrapper">
<div name="mobilelabel_18" id="StockItems_mobilelabel_18" dsid="mobilelabel_18" data-role="appery_label" class="StockItems_mobilelabel_18">
Quantity:
<>
<>
</td>
<td id="StockItems_quantity_value_cell" name="quantity_value_cell" class="StockItems_quantity_value_cell" colspan="1" rowspan="1">2</td>
<td id="StockItems_quantity_add_cell" name="quantity_add_cell" class="StockItems_quantity_add_cell" colspan="1" rowspan="1">
<div class="cell-wrapper">
<a data-role="button" name="add" dsid="add" class="StockItems_add ui-link ui-btn ui-btn-c ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-mini" id="StockItems_add" data-corners="true" data-icon="plus" data-mini="true" data-theme="c" tabindex="3" data-iconpos="notext" role="button">
Add
</a>
<>
</td>
<td id="StockItems_quantity_remove_cell" name="quantity_remove_cell" class="StockItems_quantity_remove_cell" colspan="1" rowspan="1">
<div class="cell-wrapper">
<a data-role="button" name="remove" dsid="remove" class="StockItems_remove ui-link ui-btn ui-btn-c ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-mini" id="StockItems_remove" data-corners="true" data-icon="minus" data-mini="true" data-theme="c" tabindex="4" data-iconpos="notext" role="button">
Remove
</a>
<>
</td>
</tr>
</tbody></table>
<>
<div data-role="appery_html" name="horizontal_line" dsid="horizontal_line" id="StockItems_horizontal_line" class="StockItems_horizontal_line">
<hr>
<>
<>
</td>
</tr>
</tbody> </table>
/code