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

Solution

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/

Comments

[user3237099]

its not .xml file its URL ONLINE how i can do this in my code

[Nataliia Kropachova]

please, provide this URL if possible. I don't fully understand your question

[user3237099]

i do this local in .html file but XML URL ONLINE apply this to my code please

[user3237099]

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]

i need to remove the inline xml like this var xml="<>" and add the URL

[user3237099]

exactly like this w3schools.com/xml/note.xml its the same ?? ur URL .php

[Nataliia Kropachova]

just replace url from my example by your own url, it does not depends from extension

[user3237099]

your URL is text not XML

[Nataliia Kropachova]

please, post here your url, I will fix it and apply to your code :)

[user3237099]

w3schools.com/xml/simple.xml i need to retrieve description and name in the table

[Nataliia Kropachova]

it's impossible to retrieve .xml via ajax from w3schools.com, because it does not support CORS: en.wikipedia.org/wiki/Cross-origin_resource_sharing

[Nataliia Kropachova]

on the server side of your url. please, post your url here! or let's stop to spam in the comments.

[user3237099]

here my code i need to retrieve (Via,message and time) in the table thanks