jQuery read XML URL

Question

My below code working well but i need to import XML data from xml URL not from HTML file like this if i need to retrieve image from XML how i can do that.

var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>"

$(document).ready(function(){
    //$('#table').append('<h2>SHOWS</h2>'); 
    $('#table').append('<table id="show_table">'); 
    $(xml).find('show').each(function(){
        var $show = $(this);
        var date = $show.find('date').text();
        var place = $show.find('place').text();
        var location = $show.find('location').text();
        var time = $show.find('time').text();
        var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
        $('#show_table').append(html);
    });
    //alert($('#show_table').html());
})

all what i need is change this var xml = "9/8 ... " to let the JQuery code read from the ONLINE URL

Nataliia Kropachova · Answer 1 · 2014-02-02T08:55:49.493

6

If you need to load XML data from the URL, you need to execute AJAX request, it may be something like this:

$(function() {
    $.ajax({
        type: "get",
        url: "http://yoursite.com/yourfile.xml",
        dataType: "xml",
        success: function(data) {
            /* handle data here */
            $("#show_table").html(data);
        },
        error: function(xhr, status) {
            /* handle error here */
            $("#show_table").html(status);
        }
    });
});

Keep in mind, if you use AJAX you can place .xml file on the same domain name. In other case you need to set up cross-origin resource sharing (CORS).

EDITED:

I modified your code, now it appends td element to your table. But xml is still inside html.

var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>"

$(function() {
    $(xml).find('show').each(function() {
        console.log(this);
        var $show = $(this);
        var date = $show.find('date').text();
        var place = $show.find('place').text();
        var location = $show.find('location').text();
        var time = $show.find('time').text();
        var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
        $('#show_table').append($(html));
    });
});

But you need to modify your html file, check my solution here: http://jsfiddle.net/a4m73/

EDITED: full solution with loading xml from URL

I combined two parts described above, check here: http://jsfiddle.net/a4m73/1/

edited Feb 02 '14 at 08:55

answered Feb 02 '14 at 08:21

Nataliia Kropachova

106
5

its not .xml file its URL ONLINE how i can do this in my code – user3237099 Feb 02 '14 at 08:23
please, provide this URL if possible. I don't fully understand your question – Nataliia Kropachova Feb 02 '14 at 08:24
i do this local in .html file but XML URL ONLINE apply this to my code please – user3237099 Feb 02 '14 at 08:25
lsn i write the code locally in .html file and i have online xml url so how i can add this code to my code where ? – user3237099 Feb 02 '14 at 08:30
exactly like this w3schools.com/xml/note.xml its the same ?? ur URL .php – user3237099 Feb 02 '14 at 10:15
just replace url from my example by **your own url**, it does not depends from extension – Nataliia Kropachova Feb 02 '14 at 10:53
your URL is text not XML – user3237099 Feb 02 '14 at 11:52
please, post here **your url**, I will fix it and apply to your code :) – Nataliia Kropachova Feb 02 '14 at 12:38
http://www.w3schools.com/xml/simple.xml i need to retrieve description and name in the table – user3237099 Feb 02 '14 at 12:49
it's impossible to retrieve .xml via ajax from w3schools.com, because it does not support CORS: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing – Nataliia Kropachova Feb 02 '14 at 12:52
on the server side of your url. please, post your url here! or let's stop to spam in the comments. – Nataliia Kropachova Feb 02 '14 at 13:39
here my code i need to retrieve (Via,message and time) in the table thanks – user3237099 Feb 02 '14 at 14:02

Mehran Hatami · Answer 2 · 2014-02-02T08:29:37.317

Use jquery-xpath, then you can easily do what you want like:

$(xml).xpath("//shows/show");

if you want know more about xpath just take a look on XML Path Language (XPath) document.

var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>";

$(document).ready(function () {
    //$('#table').append('<h2>SHOWS</h2>'); 
    $('#table').append('<table id="show_table">');
    $(xml).xpath("//shows/show").each(function () {
        var $show = $(this);
        var date = $show.find('date').text();
        var place = $show.find('place').text();
        var location = $show.find('location').text();
        var time = $show.find('time').text();
        var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
        $('#show_table').append(html);
    });
})

i need to remove the inline xml like this var xml="<>" and add the URL — user3237099, Feb 02 '14 at 08:37

jQuery read XML URL

2 Answers2