Skip to main content
Enterprise Agile Planning Image

This post is from the CollabNet VersionOne blog and has not been updated since the original publish date.

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 have onLoad preselected (leave it this way)
  • Select the most recent version of jQuery
  • Type the following code into the HTML panel:
[gist id=4684780 file=gistfile1.html]
  • In the JavaScript pane, add the this:
[gist id=4684780 file=gistfile2.js]
  • And, for good measure, add this to the CSS panel:
[gist id=4684780 file=gistfile3.css]
  • Run it! You should see a basic DIV with some CSS colors wrapping around our pretty JSON data result.
Try live JSFiddle

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 the jQuery object. It's just a lot easier to type $ than jQuery 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 for document.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.
We'll cover jQuery in more depth later in the series, but you can read the jQuery documentation for lots of great information.

Next up

Now we are going to put everything, and I mean everything, we have studied so far together with one tutorial: How To Build a Barebones User Story Editor in JSFiddle with jQuery, JSON, and the VersionOne REST Data API. But, don't worry, after you do that, we'll refactor it to reduce the amount of code and make it even better by using some other open source JavaScript libraries. ;/)

More from the Blog

View more
Apr 08, 2021

Making IT services more agile

Enterprise Agile Planning
The agile revolution completely transformed how we create digital prod ...
Read More
Feb 14, 2021

Reflecting on the 20th anniversary of the Agile Manifesto

Enterprise Agile Planning
Over the past 20 years, it’s been amazing to watch an idea from ...
Read More
Feb 08, 2021

How does agile apply to an entire organization?

Enterprise Agile Planning
Before we dive into the main subject of this blog post, it is importan ...
Read More
Feb 03, 2021

It took a pandemic to realize why digital transformation actually matters

Enterprise Agile Planning
Before anyone had ever heard of COVID-19, businesses across the globe ...
Read More
Contact Us