Get List of jQuery UI themes - from an URL (same-origin-policy)

Question

Does anyone know a way to get list of jQuery themes from http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/ ?

I am creating simple webpage with themes roller where the user can switch themes dynamically.

Working fiddle - Click on Themes on Right top corner and select a new theme.

Right now the list is hard coded as below,

<div id="theme-list">    
   <ul>
      <li class="themes-el ui-state-highlight" data-theme="cupertino">cupertino</li>
      <li class="themes-el" data-theme="hot-sneaks">hot-sneaks</li>
      <li class="themes-el" data-theme="smoothness">smoothness</li>
      <li class="themes-el" data-theme="pepper-grinder">pepper-grinder</li>
      <li class="themes-el" data-theme="ui-lightness">ui-lightness</li>
      <li class="themes-el" data-theme="ui-darkness">ui-darkness</li>
      <!-- and more -->
   </ul>    
</div>

Is there a way to get this list of themes from URL http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/? (crossDomain: http://www.w3.org/TR/cors/#access-control-allow-origin-response-hea)

Tried, but failed with below code..

$.ajax({
    url: 'http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/',
    dataType: 'text',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader("Access-Control-Allow-Origin", 'http://jquery-ui.googlecode.com');
        xhr.setRequestHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
    },
    crossDomain: true,
    success: function (data) {
        alert(data);
    }, 
    error: function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown + ' ' + textStatus + ' ' + jqXHR.responseText);
    }
});

It feels like I am missing a lot here.. any insight would really help.

Answer 1

It seems that the server does not allow a cross domain request. Nothing you can do.

You can set up a PHP script that can curl that page and then you can just ajax the PHP script. Like what kuncajs said

You can use this short PHP curl script on your server:

<?php

$ch = curl_init();
// URL to grab
curl_setopt($ch, CURLOPT_URL, 'http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/');
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($ch);
curl_close($ch);

print_r($output);

?>

Then it is just a simple ajax script:

$.ajax({
    url: "linktoscript.php",
    dataType: "html",
    success: function(data) {
        console.log(data);
    },
    error: function (request, status, error) {
        console.log(request);
        console.log(status);
        console.log(error);
    }
});

Answer 2

I found this service from yahoo(YQL) and this Cross-domain requests with jQuery plugin that uses YQL to fetch cross domain content.

http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

DEMO: http://jsfiddle.net/SXHrB/4/

The below code simply fetched me the whole page which I parsed to get the required content.

$.ajax({
    url: 'http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/',
    type: 'GET',
    success: function(data) {
        alert(data.responseText.substring(data.responseText.indexOf('<ul>'), data.responseText.lastIndexOf('</ul>') + 4));
    }
});