Jack Cole Jack Cole - 4 years ago 162
HTML Question

Getting data from elements from a PHP response

I recently switched from XML to PHP for use with my simple AJAX program. However, I can't figure out how to find and pull element's data with .each like I did with the XML file format.

The HTML outputted is correct: When people type in a search, they receive a php page generated from a MySQL database.

What I want to happen is to use .each to grab a "div.product", then look through the elements contained within that div and use their data to append my page with much more elements and styling.

function htmlParser() {
var search_name_field = $("input.search").val();
$.ajax({
type: "POST",
url: "load_data.php?product=" + search_name_field,
cache: false,
dataType: "html",
success: function(html){
alert(html); // This shows php response perfectly
$(html).find("div.product").each(function(){
alert("success!"); // Doesn't appear
var productcode = $(this + "div.product_detail").data("code");
alert(productcode);
$("#output").empty();
$("#output").append("Product Code: " + productcode + "<br>");
});
}
})
}


Here is the the first two div.product from the alert generated by alert(html)

<span class="con_status">Connected successfully</span>
<div class="product">
<div class="product_detail" data-code="HW100"></div>
<div class="product_detail" data-name="Loaded Hardware 1&quot;"></div>
<div class="product_detail" data-price="7"></div>
<div class="product_detail" data-hideproduct=""></div>
<div class="product_detail" data-stockstatus="13"></div>
<div class="product_detail" data-productdescriptionshort=""></div>
<div class="product_detail" data-producturl=""></div>
<div class="product_detail" data-photourl=""></div>
</div>
<div class="product">
<div class="product_detail" data-code="HW125"></div>
<div class="product_detail" data-name="Loaded Hardware 1.25&quot;"></div>
<div class="product_detail" data-price="7"></div>
<div class="product_detail" data-hideproduct=""></div>
<div class="product_detail" data-stockstatus="13"></div>
<div class="product_detail" data-productdescriptionshort=""></div>
<div class="product_detail" data-producturl=""></div>
<div class="product_detail" data-photourl=""></div>
</div>


Edit: A problem with my ajax is it only can load the first data element. I fixed this by moving all the data into one single element. I could have also renamed all the elements to different classes. I don't know which is better, but I am using the formal.

<div class="result">
<div class="product"><div class="product_detail"
data-code="LCSDC"
data-name="Loaded Longboards - Dervish COMPLETE" data-price="240"
data-hideproduct="Y"
data-stockstatus="0"
data-productdescriptionshort="Dervish longboard deck from Loaded Carving Systems. With a lower center of gravity and a torsionally stiff design- the Dervishes are built to hold an edge and maximize energy return. A drop-thru carver designed to work with most reverse kingpin 180mm Trucks &amp; 70mm+ wheels. Small nose and tail for manual &amp; shovits."
data-producturl=""
data-photourl="">
</div></div>
</div>

Answer Source

There are two problems in your JavaScript code.

As I recall, there should be only one root element when you do something like $(html).

One quick solution to that is to add this line

html = "<div>" + html + "</div>";
$(html).find("div.product").each(function(){

Or you can change your PHP to output the result wrapped with:

<div class="result">...</div>

The success alert will then work.

The other problem is about this line

$(this + "div.product_detail")

It should be something like

$(this).find("div.product_detail")
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download