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

Answer 3

Have you tried using theme switcher plugin used by JQuery:
It will give all the ready made themes used by JQuery for demo purpose.

<script src="jquery.js"></script>
<script type="text/javascript" src="themeSwitcher.js"></script>
<script type="text/javascript">       
   $(document).ready(function(){
       $('#switcher').themeswitcher();
   });
</script>    

<div id="switcher"></div>

Answer 4

you could have your site add a link to the style like this:

when you click the new theme, javascript adds a link tag to the head you can replace the ui-lightness part of the link with any of the names here: http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/ hope this helps