Question

I’m using this script to scrape from an rss feed to view on another website:

$.ajax({
    url: "http://www.thriveafricastore.com/rss.php?type=rss",
    type: "GET",
    success: function(d) {
            $('item', d).each(function() {
                var $item = $(this);
                var title = $item.find('title').text();
                var link = $item.find('link').text();
                var description = $item.find('description').text();
                var image = $(description).find('img').attr('src');
                var price = $(description).find('span.SalePrice').text();

                if (price == '') {price = 'See Price'};

            var html = '<p><a href="'+link+'" target="_blank"><img src="'+image+'"/><br/>';
                html += '<strong>'+title+'</strong><br />';
                html += price+'</a></p>';

                $('#store').append($(html));

            });

    }
});

It works locally on my computer but when I try and use it on the live site online it doesn’t work and doesn’t throw any errors (or at least none that I can find). Any ideas on what I could be doing wrong and how I can get it to work?

Thanks!

Answer 1

Pretty sure you’re running into problems with the same origin policy, which prohibits client-side data retrieval across domains in many cases (see http://en.wikipedia.org/wiki/Same_origin_policy and http://api.jquery.com/jQuery.ajax/)

Not sure what server-side language you’re using (if any), but you may want to set up a server-side script that retrieves the file on your server, prints out its content, and then in turn load that script in your JS. In PHP, this would look something like the following:

<?php

header('Content-Type: text/xml');
$ch = curl_init('http://www.thriveafricastore.com/rss.php?type=rss');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
echo curl_exec($ch);

?>

After you’ve done that, replace the URL in your request with the location of your server-side script (for example, fetcher.php).