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 · Accepted Answer · 2014-02-02 08:55:49Z

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 2, 2014 at 8:55

answered Feb 2, 2014 at 8:21

Nataliia Kropachova

1065 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user3237099 Over a year ago

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

Nataliia Kropachova Over a year ago

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

user3237099 Over a year ago

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

user3237099 Over a year ago

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 Over a year ago

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

|

Mehran Hatami · Accepted Answer · 2014-02-02 08:29:37Z

0

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

edited Feb 2, 2014 at 8:29

answered Feb 2, 2014 at 8:04

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

1 Comment

user3237099 Over a year ago

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

Collectives™ on Stack Overflow

jQuery read XML URL

2 Answers 2

12 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related