Last Updated Feb 07, 2013 — Enterprise Agile Planning expert
How To Use jQuery to GET a User Story in JSON Format from the VersionOne REST Data API and Render it as HTML
Enterprise Agile Planning
Developing Custom VersionOne Apps 101 Series GuideLast time, in How To Update a User Story with the VersionOne REST Data API in JSFiddle with jQuery, JSON, HTTP POST, and 20 Lines of Code, you used jQuery.ajax's to send an HTTP POST request and change a story by sending JSON data to the VersionOne REST Data API.In this article, you will
- Use the JSFiddle online editor
- Employ the sel parameter when querying the VersionOne REST Data API to limit which attributes get returned
- Use jQuery's special $() selector function to select HTML DOM elements
- Apply the jQuery css and fadeIn functions for smooth transitions
What you’ll need
- Google Chrome. While it should work, I have not tested this in other browsers, so if you run into any snags, please let me know in the comments
Fire up a new JSFiddle
- Open a brand new window or tab in Chrome and navigate to http://www.JSFiddle.net
- From the left side, under
Choose Framework
. It should haveonLoad
preselected (leave it this way) - Select the most recent version of
jQuery
- Type the following code into the HTML panel
:
- In the JavaScript pane, add the this:
- And, for good measure, add this to the CSS panel:
- Run it! You should see a basic DIV with some CSS colors wrapping around our pretty JSON data result.
Understand the jQuery functions
We're going to explain a lot more about this code in a later, full/depth article, but here are some highlights for now:-
$
is a shortcut for thejQuery
object. It's just a lot easier to type$
thanjQuery
since it gets used so often. - The code
$.ajax(...).done(...).fail(...)
tells jQuery to try to execute an HTTP request using ajax, and sets up a done function and a fail function // it does this because the ajax HTTP requests are asynchronous and thus do not wait to finish before the rest of your sequential script code executes. - The
$('#link')
invokes the jQuery selector function, which in this case is a wrapper fordocument.getElementById
- The text and html functions change the element's inner text and html respectively.
- And, the css function sets css style rules and applies them immediately on the matched element.