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

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'
    });
}

Do i? ;) Every DIV has different 'viewtypes' which are built based on CSS... — Ropstah, Jun 23 '09 at 12:55
You should probably read this : http://stackoverflow.com/questions/30251/tables-instead-of-divs It wouldn't be too hard to change only your CSS selector I think. — Gab Royer, Jun 23 '09 at 12:58

Russ Cam · Accepted Answer · 2009-06-23T13:00:46.300

7

something like

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

edited Jun 23 '09 at 13:00

answered Jun 23 '09 at 12:50

Russ Cam

124,184
33
204
266

I found another solution which is similar to the xml parsing: $('div.Workorder', request).each(function() {}); which does the trick in the old fasion jQuery way... Anyway this is probably closest solution... :) – Ropstah Jun 23 '09 at 13:14
@ropstah - what you have looks cleaner. That's what I get for not writing any jQuery for a couple of weeks... :) – Russ Cam Jun 23 '09 at 13:20

score 1 · Answer 2 · answered Jun 23 '09 at 13:45

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() {
    .....
    });
}

score 0 · Answer 3 · answered Jun 23 '09 at 12:50

0

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

answered Jun 23 '09 at 12:50

Sampson

265,109
74
539
565

I'm not using jQuery for the AJAX request. I'm working with .NET MVC which has it's AJAX functions built in. In the background it does use jQuery, but I don't have control... – Ropstah Jun 23 '09 at 12:59

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

3 Answers3