How to load XML file using jquery ajax ?

you can load the xml data by using  jquery ajax by below Demo.



This is code in data.XML File

<?xml version="1.0" encoding="UTF-8"?>
<tabledata>
<row>
<column>India</column>
<column>China</column>
<column>Japan</column>
</row>
<row>
<column>Russia</column>
<column>France</column>
<column>Germany</column>
</row>
<row>
<column>USA</column>
<column>Canada</column>
<column>Brasil</column>
</row>
</tabledata>

NOTE:- You can just paste the above code to create a simple XML file




This is html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div id="tableWrapper">
</div>
<button id="loadDataTable">Load</button>
</body>
</html>




This is a jquery code. Just add this below jquery code in above html code. and you can load this xml file by clicking load button.

$(document).ready(function () {
            $('#loadDataTable').click(function () {
                $.get('example/data.xml', function (data) {
                    $('div#tableWrapper').append('<table id="ajaxTable"></table>');
                    $(document).ready(function () {
                        $(data).children('tabledata').children('row').each(function () {
                            var thisRow = this;
                            $('table#ajaxTable').append('<tr></tr>');
                            $(thisRow).children('column').each(function () {
                                var thisColumn = $(this).text();
                                $('table#ajaxTable').children('tbody').children('tr').last().append('<td style="border: 1px solid black">' + thisColumn + '</td>');
                            });
                        });
                    });
                });
            });
        });


enjoy…!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s