How to build datatable using jQuery from REST xml

Question

I have a XML response from an Ajax REST call. Similar to the one below.

    <eventBlock>
        <event eventId="641">
            <processId>myprocess</processId>
            <batchId>15581</batchId>
            <user>Ajay</user>
            <participant>XYZ</participant>
            <activity>Jogging</activity>
            <note>Athletic</note>
            <createdOn>2011-11-22 00:00:00.0</createdOn>
            <createdBy>User5</createdBy>
        </event>
    </eventBlock>

My HTML:

    <form class="searchform" id="searchform" action="javascript: submitForm();">
     .....
    </form>
    <div id="UI">
        <table id="events" class="display">
                <thead>
                        <tr>
                            <th>eventId</th>
                            <th>processId</th>
                            <th>batchId</th>
                            <th>user</th>
                            <th>participant</th>
                            <th>activity</th>
                            <th>note</th>
                            <th>createdOn</th>
                            <th>createdBy</th>
                        </tr>
                </thead>
                <tbody>
                </tbody>
        </table>
    </div>

Javascript:

<script type="text/javascript">
var thisTable;
thisTable = $("#events").dataTable(
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
    }
);
        function addToTable(response){
            var $events = $(response).find("event");

            $events.each(function(index, event){
                var $event = $(event),
                    addData = [];

                addData.push($event.attr("eventId"));
                addData.push($event.children("processId").text());
                addData.push($event.children("batchId").text());
                addData.push($event.children("user").text());
                addData.push($event.children("participant").text());
                addData.push($event.children("activity").text());
                addData.push($event.children("note").text());
                addData.push($event.children("createdOn").text());
                addData.push($event.children("createdBy").text());

                thisTable.fnAddData(addData);
            });
        }

        function submitForm() {
            $.ajax({
                url:'../../data.xml',
                data:{
                    batchId:1234,
                    processId:afsfafgg  
                },
                type:"GET",
                success:addToTable
            });
            return false;
        }
</script>

When I hit the submit. I get below error on firebug. Can someone help me resolve this?

oSettings is null [Break On This Error]
var iRow = oSettings.aoData.length;

Thanks in advance!

Answer 1

The REST is likely cross domain, in which case you would need to create a proxy on your server to retrieve the XML . Proxy becomes your ajax url.

If your objective is to create a "read only" table you could simply print the xml as output to an ajax request and parse output to a table yourself in ajax sucecss callback prior to calling datatables.

If you need edit capability and want the datasource passed directly to datatables plugin, you would need to parse xml server side to json.

How you handle this all depends on your needs. Proxy is relatively easy to set up either way.

If REST serves JSONP, can bypass the proxy

EDIT. Another approach is to use a service like Yahoo YQL as proxy. Can set that up in minutes

Answer 2

An XML response is handled just like any other data type. As long as you specify what type it should be expecting.

This question shows you how to parse XML in JQuery. XML is handled like any other element.

Here's an example.

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            $event.children().each(function(i, child){
                addData.push($(child).text());
            });

            dataTable.fnAddData(addData);
        });
    }
});

If you don't want to loop through all the children within each event, you can just assign them manually

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            addData.push($event.children("processId").text());
            addData.push($event.children("batchId").text());
            addData.push($event.children("user").text());
            addData.push($event.children("participant").text());
            addData.push($event.children("activity").text());
            addData.push($event.children("note").text());
            addData.push($event.children("createdOn").text());
            addData.push($event.children("createdBy").text();

            dataTable.fnAddData(addData);
        });
    }
});

Make sure that the array you send to fnAddData has as many items as the table has headers.

Edit

After checking your HTML and Javascript, I can't reproduce the problem.

Check out this test example

I'm going to guess and say that there are more code, that you did not include, that's affecting the outcome.

I should probably point out that inline javascript functions are usually frowned upon in webdev circles. You should instead try to separate your javascript code from your html code, like in the latter example.

Use $("#form").submit(function{...}); instead of inlining the function in your html.

Read up on early event handler registration vs traditional event registration model