Get List of jQuery UI themes - from an URL (same-o

问题:

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.

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

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

回答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>

回答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