Jquery read xml address

Question

My code below works fine, but I need to import the XML data from the XML URL and not from an HTML file like this if I need to get an image from XML, how can I do this.

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 i need is to change this xml = "9/8 ..." variable so that the jQuery code is read from the ONLINE URL

Answer 1

If you need to load XML data from a URL, you need to execute an AJAX request, it could 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 that if you use AJAX, you can put an XML file with the same domain name. Otherwise, you need to configure cross-origin resource sharing(CORS).

Edition:

, td . xml 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));
    });
});

html , : http://jsfiddle.net/a4m73/

EDITED: xml URL

, , : http://jsfiddle.net/a4m73/1/

Answer 2

jquery-xpath, , :

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

xpath, XML Path Language (XPath).

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