Testing Ajax on jsFiddle with jQuery

jsFiddle is a wonderful site. Just got to love the idea and the implementation. It has so much that’s invaluable for quick testing. Recently, I discovered that you can actually test Ajax calls on jsFiddle. They call it “Echo” requests, as they do exactly that – they echo back whatever you send. You can read more about this in jsFiddle documentation.

What’s nice about this is that you write both the client and the “server” – it’s really strong to call echo server a server, but I digress – on the same page, you see the whole code here and it’s great for quick tests for situations such as “why is this 20+-page web site not working after adding these 5 lines of straightforward code?” which usually end in banging the head against the wall and then realizing that you misplaced a comma, added one parentheses too many, mispelled that 15-character identifier or something frustrating along these lines. So you fire a browser (that is, a new tab, as you always have your browser open, don’t you), write a quick jsFiddle and you get the “doh!” moment relatively quickly.

Here’s how one could write a simple Fibonnaci number “generator” that uses jsFiddle’s echo:

  • HTML
<button id="next-fib">Next Fibonnaci</button>
<ul id="fibs">
<li/>1
<li/>1
</ul>

We just created a button and a list of fibs. The button will launch an Ajax call when clicked, see Javascript below.

  • CSS
#fibs {
  list-style-type: none; 
}
#fibs li {
  float: left;
  padding-left: 10px;
}

Some basic styling for nicer number placement.

  • Javascript:
function make_next_fib() {
  var all_lis = $('#fibs > li');
  var last_two_lis = all_lis.slice(all_lis.length - 2);
  var last_two_fibs = last_two_lis.map(function() {
    return parseInt($(this).text());
  });

  var sum = last_two_fibs[0] + last_two_fibs[1];
  var json = $.toJSON({ next_fib: sum });
    
  $.ajax({
    url: '/echo/json/',
    dataType: 'json',
    type: 'POST',
    data: {
      json: json,
    },
    success: function(data) {
      var li = $('<li>').text(data.next_fib);
      $('#fibs').append(li);
    },
  });
}

$('#next-fib').click(function() {
  make_next_fib();
});

Javascript is pretty self-explanatory. make_next_fib is the meat. It will:

  • Find all li elements within parent fibs
  • Select the last two (as Fibonnaci numbers are made by summing the last two)
  • Map the li into actual numbers
  • Get the sum of these numbers – this is what we are going to send via jsFiddle echo service
  • Make the Ajax call
  • In success, just append a new li to #fibs

A few things about the Ajax call itself:

  • The call has to target a specific URL made available by jsFiddle. These are provided in the documentation. We use json one, so the url is /echo/json/
  • It needs to be a POST to send the data and we set dataType to json, as we are sending and receiving the json
  • The json is actually sent as a string. In order to convert, a plugin can be used – such as jquery-json. This needs to be added to your jsFiddle. Use Add Resources (which changes to Manage Resources when you add some) on the left to point to the minified version (currently version 2.3)

The click event handler at the end is there to enable all this to happen when the button is clicked.

That’s it! Here’s a working jsFiddle:

After clicking a few times, you should see something like this in the result part: