...

View Full Version : jQuery Ajax External XML



daemonkin
10-13-2010, 12:33 PM
Hi guys,

Trying to parse an external XML feed using jQuery's ajax() function. I can do it using a locally stored file but when I load this file to my server and make the request it fails. I assume this is due to the cross-domain issue but is there a work around?

My script looks like this:


$(document).ready(function()
{
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: parseXml,
error: function(){
alert('failure');
}
});
});


My var url when set to a local file runs parseXML but when set to external it alerts - Failure.

Any help is appreciated.

D.

harbingerOTV
10-13-2010, 04:07 PM
You can't just grab a file off another domain. It can be done but with a tad more work.

http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

daemonkin
10-13-2010, 04:16 PM
Thanks Harbinger. I actually found that page earlier today but was wondering how to incorporate it into my site.

Let me give you a bit of background for the use of this. The XML is generated by my site but I want to give other clients the option of using my feeds on their sites by including a small file or snippet of code that will eventually generate a jQuery GalleryView gallery.

The princple is sound: Sample page using local XML (http://pub.aetopia.com/connacht/xml-parse.html)

So my question is how can I use the example link you posted to achieve the effects I want - reading from an external feed.

I appreciate your help and expertise.

D.

harbingerOTV
10-14-2010, 07:44 PM
took a while but I think I got it.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>RAWR!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://pub.aetopia.com/connacht/js/jquery.galleryview-2.1.1.js"></script>
<script type="text/javascript" src="http://pub.aetopia.com/connacht/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://pub.aetopia.com/connacht/js/jquery.timers-1.2.js"></script>

<style type="text/css">
body {
font: 12px verdana, sans-serif;
color: #333;
}
#data {
display: none;
}
</style>
</head>
<body>

<div id="data"></div>

<span id="output"></span>
<ul id="photos"></ul>

<script type="text/javascript">
var url = "file.xml";

$(document).ready(function()
{
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: parseXml,
error: function(){
alert('ZoInKs!');
}
});

});

function parseXml(){
$('#data').load('loader.php',{site2Read: 'http://pub.aetopia.com/connacht/rp-search.xml'}, function(){
var xml = $('#data').html();
$(xml).find("MediaProxy").each(function(){
$("#photos").append('<li><img src="' + $(this).find("thumbnailUrl").text() + '" alt="'+$(this).find("caption").text()+'">');
});
$('#photos').galleryView({
panel_width: 480,
panel_height: 281,
frame_width: 75,
frame_height: 75,
transition_interval:14000,
transition_speed:600,
pause_on_hover: true,
filmstrip_position: 'bottom',
frame_scale: 'crop',
show_panels: false
});
});
}
</script>
</body>
</html>

The dummy XML for the ajax call:

<?xml version="1.0" encoding="utf-8"?>
<thing>
<dohicky>
</dohicky>
</thing>

the loader.php:

<?php
extract($_POST);
$page= get_url_contents($site2Read);
echo $page;
function get_url_contents($url){
$crl = curl_init();
$timeout = 10;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
//sleep(1);
return $ret;
}
?>

Basically I'm loading the external XML file into a hidden div on the page. Then using jQuery to parse it and fire your gallery script.

Might be a tad bloated but, I finally got it to work this way so oh well.

daemonkin
10-19-2010, 02:30 PM
Hi Harbinger (again),

I took your code on board and it worked kind of. :D

The HTML file is in my Sites/ folder on Mac Leopard and is roughly the same as yours but since I don't want to have a dummy XML file read I changed the parseXML to be on error rather than success:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>RAWR!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://pub.aetopia.com/connacht/js/jquery.galleryview-2.1.1.js"></script>
<script type="text/javascript" src="http://pub.aetopia.com/connacht/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://pub.aetopia.com/connacht/js/jquery.timers-1.2.js"></script>

<style type="text/css">
body {
font: 12px verdana, sans-serif;
color: #333;
}
#data {
display: none;
}
</style>
</head>
<body>

<div id="data"></div>
<ul id="photos"></ul>

<script type="text/javascript">

$(document).ready(function()
{
$.ajax({
type: "GET",
url: '',
dataType: "xml",
error: parseXml
});

});

function parseXml(){
$('#data').load('http://www.somesite.com/loader.php',{site2Read: 'http://someothersite/rp-search.xml'}, function(){
var xml = $('#data').html();
$(xml).find("MediaProxy").each(function(){
$("#photos").append('<li><img src="' + $(this).find("thumbnailUrl").text() + '" alt="'+$(this).find("caption").text()+'">');
});
$('#photos').galleryView({
panel_width: 480,
panel_height: 281,
frame_width: 75,
frame_height: 75,
transition_interval:14000,
transition_speed:600,
pause_on_hover: true,
filmstrip_position: 'bottom',
frame_scale: 'crop',
show_panels: false
});
});
}
</script>
</body>
</html>


Loader.php:


<?php
extract($_POST);
$page= get_url_contents($site2Read);
echo $page;
function get_url_contents($url){
$crl = curl_init();
$timeout = 10;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
//sleep(1);
return $ret;
}
?>


So when I navigate to the HTML using my file system:
file:///Users/.../.../ajaxfeed/feed.html

it works fine and is great. However if I use the correct URL for my machine:
http://192.168.2.125/.../ajaxfeed/feed.html

only the GalleryView arrows are displayed and no data is processed.

I placed an alert to print out the data in var xml and in filesystem it has content but in http:// it is empty.

Any thoughts on this are appreciated.

D.

harbingerOTV
10-19-2010, 03:30 PM
for starters you need to make sure your server has http://php.net/manual/en/function.fopen.php installed and activated.

Being that you're testing locally, this could be the issue.

run a phpinfo() and see if 'allow_url_fopen' is on. If not you need to locate where your command is and turn it on.

use xampp for windows to test locally. A file called php.ini is at /xampp/php/php.ini and has a line:

allow_url_fopen = Off

I change that to :
allow_url_fopen = On

and restart xampp.

I'm of course not sure the way macs are setup but I would make sure of fopen first.

daemonkin
10-19-2010, 03:46 PM
Yeah I ran phpinfo.php locally and the allow_url_fopen is on.

I also tested it on a PHP server I have (phpinfo() is fine has allow_url_fopen on) and on a PHP server in work (also on)

I placed the HTML and XML on one server (work) and the loader.php on the other server (personal) and referenced the loader.php from the HTML file and again it is not quite working as it should - it seems to process the load but returns nothing or is empty.

I ran it in Firebug and got:


uncaught exception: [Exception...
"Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE)
[nsIXMLHttpRequest.open]"


This should be reasonably straight forward but is causing all kinds of hair pulling :D

D.

daemonkin
10-19-2010, 03:53 PM
Sorry Harbinger, a follow up question:
Does the loader.php have to be local relative to the HTML file?

I have just done 2 tests on Safari:
1. Using file:// with a remote loader.php and it works
2. Using http:// with a local loader.php and it works

I then tried file:// with local and it breaks (fails to load) and tried http:// with remote and fails to load.

Weirder and weirder.

D.

harbingerOTV
10-19-2010, 06:01 PM
The loader.php and the HTML need to be in the same domain.

The XML you want to grab is to be on another server.

I'm surprised 'file://' works at all.

looking at your code:

$('#data').load('http://www.somesite.com/loader.php',

the HTML with the jQuery needs to be on the domain "somesite".

reading what you ultimately want to accomplish, having a code snippet others can just drop in place, having the requirement of their server having th=o a) run php and b) having f_open on, maybe just in iframe would be better?

daemonkin
10-20-2010, 12:51 PM
Thanks Harbinger. Although it is not the answer I was hoping for I took your advice and ran an iframe in the client HTML calling an HTML page on the PHP server which then called the PHP on the same server to pull in an XML from a different server, parse it, send it back to the PHP server HTML file which is then inserted into the iframe on the client HTML.

Simples.

Not the best solution but serviceable. Thanks.

D.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum