echolibre blog » jquery http://blog.echolibre.com Mon, 25 Apr 2011 20:44:15 +0000 http://wordpress.org/?v=2.7 en hourly 1 How to build an API in 5 minutes http://blog.echolibre.com/2009/10/how-to-build-an-api-in-5-minutes/ http://blog.echolibre.com/2009/10/how-to-build-an-api-in-5-minutes/#comments Mon, 12 Oct 2009 15:44:17 +0000 Eamon http://blog.echolibre.com/?p=622 On Friday evening we quietly announced on twitter a product that we’ve been working on for the last 10 months. FRAPI is an Open Source API framework that allows you to open up your existing web based application or legacy system to your own or third party developers.

FRAPI handles standard API things like authentication and data formatting, and speeds up the API development process — like the way ZF or Symfony for PHP, Django for Python, JQuery for JavaScript (or, I suppose even Ruby on Rails ;-p ), does for other technologies.

David Coallier put together a quick 5 minute screencast to show you how you can use FRAPI to start building your API.

FRAPI is about to go into closed beta and we already have a nice list of developers building up. If you’d like to be part of our closed beta release, you can sign up on getfrapi.com.

]]> http://blog.echolibre.com/2009/10/how-to-build-an-api-in-5-minutes/feed/ jQuery JSON Autocomplete http://blog.echolibre.com/2009/06/jquery-json-autocomplete/ http://blog.echolibre.com/2009/06/jquery-json-autocomplete/#comments Sat, 13 Jun 2009 12:14:40 +0000 David http://blog.echolibre.com/?p=444 A number of people have asked me over the past few days how should one go about using jQuery Autocomplete but instead of using newline delimiters, with a URL that returns JSON data.

At first, I first had a hack that involved handling the “keyup” event myself then sending a request to a JSON URL, and then involve the “autocompleteArray” method from Autocomplete. It was a mess considering that the autocomplete method is already sending the value of your defined input to the server as a GET parameter. I was repeating the behavior of the function in order to receive a simple JSON array. I was unhappy, and felt it to be a very annoying solution because I wanted to take advantage of the internal caching system of jQuery Autocomplete.

So I decided to give a look at the code and came up with a much cleaner solution. I directly added a JSON option to the Autocomplete. So for anyone interested you can find the patch here: jQuery Autocomplete JSON patch.

The first step thing you’ll need is to patch Autocomplete using the patch command (Google patch) and then include the jQuery and Autocomplete JavaScript sources into your code.

1
2
3
4
5

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<style type="text/css">
    @import "jquery.autocomplete.css";
</style>

Once you are done, you need to setup your input field on which the autocomplete calls and function is going to be executed from.

1

<input type="text" size="25" id="input" />

And of course you need to make the event hook to make sure your autocomplete is done but in the hook you need to make sure the new option “json” is set to true. This is how you proceed:

1
2
3

$(function() {
    $('#input').autocomplete('url.php', {json: true});
});

The complete version should look somewhat like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style type="text/css">
       @import "jquery.autocomplete.css";
   </style>
  </head>
  <body>
   <label for="input">Input any text</label>
   <input type="text" id="input" />
  </body>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.autocomplete.js"></script>
  <script type="text/javascript">
      $(function() {
          $('#input').autocomplete('url.php', {json: true});
      });
  </script>
</html>

You can even try it now if you want.

]]> http://blog.echolibre.com/2009/06/jquery-json-autocomplete/feed/