Geek Answers Handbook

Set values ​​from jquery array of php objects?

I get a specific list of product elements through ajax, passing their unique identifier to the server. Now each product has its own set of properties, which I must display on the product image page. When I set values ​​through jquery, only the last value in the array is printed. Below are my encoding files.

images.php

while($fetch = mysql_fetch_array($result)) { ?> <div class="col-sm-4"> <div class="thumbnail"> <a class="productitemid" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>"><img class="img-responsive productimage" src="uploadedfiles\<?php echo $fetch['imageURL'];?>" alt="<?php echo $fetch['imageURL'];?>" /></a> <div class="text-center productitemname" style="font-weight:bold;"><?php echo $fetch['itemName']; ?></div> <div class="badge col-sm-offset-1 productprice"><?php echo $fetch['price']; ?></div> <span class="col-md-offset-7"><a class="productitemid btn btn-success" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>">BUY</a></span> </div> </div> <?php }

js file

 $(document).ready(function(){ $('.menProdCatgry').on('click',function(){ $.ajax({ type: "post", url: "getselectedproducts.php", data:{ "prodId" : $('.menProdCatgry').attr('prodCatId') }, dataType: "json", success: function(data){ console.log(data); $.each(data, function(){ var getprodId = this.prodId; var getimageURL = this.imageURL; var getprice = this.price; var getitemName = this.itemName; var getitemID = this.itemID; $('.productimage').attr('src','uploadedfiles\/'+getimageURL); $('.productitemname').text(getitemName); $('.productprice').text(getprice); $('.productitemid').attr('href','productpurchase.php?id='+getitemID); }); }, error: function(data){ console.log(data); } }); }); });
+5
source share
2 answers

You can see that foreach code only overwrites values ​​and attributes.

  $('.productimage'), $('.productitemname') // and so on

therefore you only see the latest response data

 $.each(data, function() { var getprodId = this.prodId; var getimageURL = this.imageURL; var getprice = this.price; var getitemName = this.itemName; var getitemID = this.itemID; // create a tag var a = $('<a/>'); a.attr('href', 'productpurchase.php?id='+getitemID); // create new image var img = $('<img/>'); img.attr('src', 'uploadedfiles/'+getimageURL); var prodname = $('<div/>') prodname.html(getitemName); var prodprice = $('<div/>'); prodprice.html(getprice); // insert image to a a.append(img); var container = $('<div/>'); // combine them all container.append(a); container.append(prodname); container.append(prodprice); // append to document // you can change this according to you need // to accomplish $('body').append(container); });

here I created a dynamic dom element for each foreach iteration, then it will create new datasets, then it will insert / include / add to the html element

+2
source

An alternative solution.

If you added some kind of identifier for each product block, as shown below:

 <div class="thumbnail" id="prodId<?php echo $fetch['prodId'];?>">

You can narrow the selector in each to a specific area:

 $.each(data, function(){ var getprodId = this.prodId; var getimageURL = this.imageURL; var getprice = this.price; var getitemName = this.itemName; var getitemID = this.itemID; var myScope = '#prodId' + getprodId; $('.productimage', myScope).attr('src','uploadedfiles\/'+getimageURL); $('.productitemname', myScope).text(getitemName); $('.productprice', myScope).text(getprice); $('.productitemid', myScope).attr('href','productpurchase.php?id='+getitemID); });

This will ensure that only classes found within a specific area (#prodIdX) are selected and modified.

0
source

More articles:


All Articles