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.

I've only been able to find a cross-browser way to do cross-domain ajax IE8+ and other browsers, nothing for IE6-7 :/ http://stackoverflow.com/questions/3362474/jquery-ajax-fails-in-ie-on-cross-domain-calls#answer-11267937 but it was for JSON hmm — Mark Pieszak - Trilon.io, Sep 26 '12 at 22:57
@mcpDESIGNS I will give it a try.. I have never done anything with cross domain resources and always in safe zone intranet.. now that was thinking of my own webpage and liked the idea of using jQuery themes.. Anways.. i read MDN and tried some stuff, but it didn't worked for me.. I think I am missing a whole lot here.. so thought of posting it in here so that someone could actually point me in right direction. — Selvakumar Arumugam, Sep 26 '12 at 23:05
The very common workaround is to create your own page which downloads it and then JavaScript can work with it. You can create a page which does nothing more than calls HTTP request on jquery-ui.googlecode.com/svn/tags/1.8.23/themes (for example for php see http://php.net/manual/en/function.curl-exec.php) and then you can process it or just view it. I know it is not exactly what you are looking for but it always works :-) — kuncajs, Oct 01 '12 at 21:53
@kuncajs When you say 'create a page', did you mean something like `iframe`? I think it is worth a try.. but I think there will be a proper straight forward approach to this. — Selvakumar Arumugam, Oct 01 '12 at 22:11
@Vega See my comment under the answer which does exactly what I meant — kuncajs, Oct 02 '12 at 08:55

MLM · Answer 1 · 2012-10-02T21:14:21.547

7

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

edited Oct 02 '12 at 21:14

answered Oct 02 '12 at 01:26

MLM

3,660
3
41
66

This is exactly what I thought. Your server which renders the page can be something like a web browser - using curl it makes HTTP request and gets String representing the page content. I mean whole HTML code of the SVN theme page. Think of it like a PROXY - the server downloads it for you and stores it and then you can make AJAX request on your own "proxy" server which is on your own domain so no cross domain policy problem -> Problem solved ;) – kuncajs Oct 02 '12 at 08:52
I don't know `php` so it is going to take sometime for me to understand this code. – Selvakumar Arumugam Oct 02 '12 at 20:37
@Vega Even I have to look up references when I start working with CURL again. If you want find some commented code then just search for "php simple curl". – MLM Oct 02 '12 at 21:14
@Vega It's not that hard, you can write a proxy in any server side language you're comfortable with. You can even generalize it so that you can pass in the URL to fetch as a query parameter like `proxy.php?url=http://www.google.com` – Ruan Mendes Oct 03 '12 at 16:46

score 2 · Accepted Answer · answered Oct 17 '12 at 19:15

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

score 0 · Answer 3 · answered Oct 03 '12 at 06:25

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>

score 0 · Answer 4 · answered Aug 17 '14 at 14:29

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

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

4 Answers4

Linked