Javascript / jQuery - Parse returned 'data' as HTML for further selecting?

By : Ropstah
Source: Stackoverflow.com
Question!

a webservice returns some data to me. The data is actually just raw HTML (so no XML header, or tags around it, but just a piece of html).

<div class="Workorders">
    <div id="woo_9142" class="Workorder">
        <span class="Workorder">S1005</span>
        <span class="Pn">30-2</span>
        <span class="Description">Cooling Fan</span>
        <span class="Shortages">3616-1 (SV)</span>
        <span class="Company">xxx</span>
    </div>
    <div id="woo_9143" class="Workorder">
        <span class="Workorder">S1006</span>
        <span class="Pn">30-2</span>
        <span class="Description">Cooling Fan</span>
        <span class="Shortages">3616-1 (SV)</span>
        <span class="Company">xxx</span>
    </div>
</div>

If this were XML like so:

<workorders>
    <workorder id="woo_9142">
        <partnumber>30-2</partnumber>
    </workorder>
</workorders>

I could go like this in jQuery:

$('/workorders/workorder', data).each(function() {
    //This would give every partnumber $('partnumber', this).text();
});

How can I parse the returned HTML (like described at the beginning)?

myNamespace.onSuccess = function(request) {
    //request contains the raw html string returned from the server

    //How can I make this possible:
    $(request).find('div.Workorders div.Workorder').each(function() {
       //Do something with the Workorder DIV in 'this'
    });
}
By : Ropstah


Answers

You can specify explicitly the return type you are expecting: http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests

By : Sampson


Have you tried adding the html to the dom, hiding it and then process it:

myNamespace.onSuccess = function(request) {
    var hidden = document.createElement ( 'div' );
    hidden.id = 'hiddenel';
    $("body").append ( hidden );
    $("#hiddenel").css ( 'visibility', 'hidden' );
    $("#hiddenel").html ( resp );
    $("#hiddenel").find ( 'div.Workorders div.Workorder').each(function() {
    .....
    });
}


something like

myNamespace.onSuccess = function(request) {    
    $(request.responseText).filter('div.Workorder').each(function() {
       $('span.Pn', $(this)).text();
    });
}
By : Russ Cam


This video can help you solving your question :)
By: admin