Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts

    jQuery Ajax External XML

    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:
    Code:
    $(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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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/200...th-jquery.html
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    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

    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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    took a while but I think I got it.

    HTML:
    Code:
    <!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:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <thing>
    	<dohicky>
    	</dohicky>
    </thing>
    the loader.php:
    PHP Code:
    <?php
    extract
    ($_POST);
    $pageget_url_contents($site2Read);
    echo 
    $page;
    function 
    get_url_contents($url){
    $crl curl_init();
    $timeout 10;
    curl_setopt ($crlCURLOPT_URL,$url);
    curl_setopt ($crlCURLOPT_RETURNTRANSFER1);
    curl_setopt ($crlCURLOPT_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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Hi Harbinger (again),

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

    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:

    Code:
    <!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 Code:
    <?php 
    extract
    ($_POST); 
    $pageget_url_contents($site2Read); 
    echo 
    $page
    function 
    get_url_contents($url){ 
    $crl curl_init(); 
    $timeout 10
    curl_setopt ($crlCURLOPT_URL,$url); 
    curl_setopt ($crlCURLOPT_RETURNTRANSFER1); 
    curl_setopt ($crlCURLOPT_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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    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:
    Code:
     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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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:
    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?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    daemonkin (10-20-2010)

  • #10
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •