Question

This is my first post here on Stackoverflow, though over the years I’ve been a frequent visitor!

We have an in-house defect tracking application written in ASP. We have a manual process by which we copy all of the relevant Rally User story information into the “Specifications” section of our site. I am trying to dynamically display this information in our site by using JQuery and JSON. Before I get it working in the ASP page, I’m testing it out on my local machine using XAMPP.

I am running into the Access-Control-Allow-Origin exception when trying to access the API through JQuery. An example page I am trying to load is this: https://rally1.rallydev.com/slm/webservice/1.26/project.js.

Here is the code:

<script>
$(document).ready(function(){

    $.getJSON("https://rally1.rallydev.com/slm/webservice/1.26/project.js", 
        function(data) {

            $.each(data.QueryResult.Results, function(i, result) {
            $("<option>").attr("value", result._refObjectName).text(result._refObjectName).appendTo("#dd_ItSel");
            });
        })
        .success(function() {console.log("dd-It-success"); })
        .error(function() { console.log("dd-It-error");})
        .complete(function() { console.log("dd-It-complete"); })
        ;
});
</script>

This will load into the following dropdown:

<select name="projectSelect" id="dd_projSel"></select>

According to this page in the Rally API documentation https://rally1.rallydev.com/slm/doc/webservice/rest_json.jsp, to bypass this restriction we should use an HTTP proxy or use the JSONP callback feature. I’ve tried including the Yahoo API in my page () and tried using some of the code which is displayed on the Rally API example page, but have not been able to get this to work.

This page uses the YUI Connect method to submit an asyncrounous request against the JSON REST API. A JavaScript function is used in the request callback to render the object graph below.

var graphContainer = document.getElementById('graph');

var callbacks = {
    success: function(response) {
        drawGraph(document.getElementById('graph'), YAHOO.lang.JSON.parse(response.responseText));
    },
    failure: function() {
         alert('JSON REST API request failed');
         document.getElementById('graph').innerHTML = '';
    }
};

YAHOO.util.Connect.asyncRequest('GET', 'https://rally1.rallydev.com/slm/webservice/1.27/project.js?workspace=https://rally1.rallydev.com/slm/webservice/1.27/workspace/620327365&query=&start=1&pagesize=20', callbacks);

I have also tried including the JSONP response variable like they mentioned in the documentation, but have not been able to get it to work either:

Has anyone been successful with either the proxy method or the JSONP method? I am assuming that the JSONP method is easier to get to work; is this the case? If not, can someone please help guide me to a resource on how to set up an HTTP proxy for this use?

If the JSONP method is easier, how do I get this to work? Does anyone have any working examples that can be shared?

Sorry for being so lengthy — I thought it would be better to show what I’ve been trying and where I’m getting my information from.

Many thanks!

Answer 1

Here’s how you would make the request with JSONP and jQuery:

<script>

    $(document).ready(function(){

        $.ajax({
          url: "https://rally1.rallydev.com/slm/webservice/1.26/project.js",
          dataType: 'jsonp',
          jsonp: 'jsonp',
          success: function(data, textStatus, jqXHR){
            console.log(data);
            //deal with data here
          }
        });

    });

</script>

The dataType config tells jQuery to use JSONP. The jsonp config tells jQuery to use ‘jsonp’ as request param instead of the default ‘callback’, since the Rally API uses ‘jsonp’.