Getting data from elements from a PHP response

Question

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 1

Try load. For example:

$('selector for your div to parse data').load('samplepage.php #div_you_want_to load')

and for extra you can do:

$('selector for your div to parse data').load('samplepage.php #div_you_want_to load', function(){
//this triggers after it fetches the page
})

See http://api.jquery.com/load/

It is more flexible than .ajax with only 1 disadvantage. You can not make the query synchronous if you want. But it has tons of other advantages.

For the .each you want to do I don't see any problem with your code. If the format of the output is specific you can write the code to fit that format

Answer 2

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

Answer 3

It's not working because $(html) is returning you array as this:
[ <span class=​"con_status">​Connected successfully​</span>​, <div class=​"product">​…​</div>​, <div class=​"product">​…​</div> ​]

So you could use .filter() function like this:
$(html).filter('.product');

Or put your response in another div like Daniel Cheng suggested.