Question

I’m submitting a form and getting data returned via jQuery ajax in a table. one of the td’s in the table has xml in it, I need to get it formatted. I can get it to display on my page, but it seems like its just text, no xml tags. I am dealing with some legacy code and not much wiggle room.

Returned HTML

<table border=1>
<tr>
    <td>Field Name</td>
    <td>Field Value</td>
</tr>
<tr>
    <td>SuccessFlag</td>
    <td>True</td>
</tr>
<tr>
    <td>ResponseMessage</td>
    **<td><?xml version="1.0" encoding="utf-16"?>**
        <License>
            <CustomerID>Bob</CustomerID>
            <License>XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX</License>
            <Log>Created by [e-mail] on December 6, 2012, 1:09 pm Cancelled by [e-mail] on December 6, 2012, 1:09 pm</Log>
            <ExpirationDate>2012-12-06</ExpirationDate>
        </License>
    </td>
</tr>

the bolded line is the 5th td in the table will always have the xml I need. Using my code below, its just dumping the text in the div, I need to format it based on it’s xml tag, and I’m not sure my parsing is working.

$("#ButtonID").live('click',function(){
$("#FormID").validate({
            //are the errorContainer's helping here?
    errorContainer: "#responseDiv",
    errorLabelContainer: "#responseDiv tr",
    wrapper: "td",
            //are the errorContainer's helping here?
    submitHandler: function(form) {
        var dataString = $(form).serialize();
        $.ajax({
            type: $(form).attr('method'),
            url: form.action,
            data: dataString,
            clearForm: true,
            success: function(data) {
                var answer = $(data).find("td:eq(3)").text();
                var message = $(data).find("td:eq(5)").html();
                var xmlDoc = $.parseXML( message );
                var $xml = $( xmlDoc );

                if (answer==="True") {
                    $xml.each(function(){
                           $('#resultGenerate').show().html($(this).text());
                    });
                } else {
                    $('.processing').hide();
                    $('input[type="text"], input[type="password"]').val("");
                    $('#resultGenerate').show().html('<ul><li>' + answer + '</li><li>' + message + '</ul>');
                }
            }
        });
        return false;
    }
});
});

Answer 1

Finally got this to work, it’s easy to do with a GET request, but when data is returned from a POST, its a little trickier. Here’s how I did it

$.ajax({
    type: $(form).attr('method'),
    url: form.action,
    data: dataString,
    clearForm: true,
    success: function(data) {
        var answer = $(data).find("td:eq(3)").text();
        var message = $(data).find("td:eq(5)").html();
        var $xml = $( message );

        if (answer==="True") {
            $xml.find('license').each(function(){
        var XXXCustomerID = $(this).find(XXXCustomerID').text();
                var XXLicense  = $(this).find('XXLicense').text();
                var Log  = $(this).find('Log').text();
                var ExpirationDate  = $(this).find('ExpirationDate').text();
        $("#resultGenerate").show().append($('<li><span class="ID">' + XXXCustomerID + '</span><span class="NTL">' + XXLicense + '</span><span class="Log">' + Log + '</span><span class="Exp">' + ExpirationDate + '</span></li>'));
                });
        } else {
                $('.processing').hide();
                $('input[type="text"], input[type="password"]').val("");
                }
            }
        });