I’ve been starting work on a new query plugin for tightly tying web page fields to the input and output of ajax calls to the server.  The client side could be as fancy as it wanted with display and editing of values.  The server code that implemented the calls could do whatever it need to get things done.  Logically I the glue in the middle seems mostly rote and automatable, but I can’t find anyone who has made that happen, so I’m writing it.  And I keep feeling like somebody else must have already done this, but I can’t find it (jquery or not).

So has someone done this already?  And if I do have to write it, I'd love to find other people who would at least be interested enough to comment on the design and implementation, and I certainly wouldn't turn down help... ;-)

The idea is to coordinate the restful API and the web page fields.  I expect that the package would net to not only do work on the client side in a jquery plugin, but also it would need a server-side framework that defines the restful API.  As a user of the package, on the web page I would say what data on the page comes from what API results, or were arguments to what API calls.  On the server side I would say what the API looked like and implement the calls.

The result would be that I wouldn’t have to write the glue that connected the call results to the fields, or the fields to input parameters in the calls.  I should simply be making the minimum declarative statements about the call inputs and outputs on each side.

What I want to do is mark fields on my web page as being populated by results of an ajax query, and when the field changes, sending an update ajax call. For example, for an object that represented a contact, I would have the HTML show a list of contacts from which to select.  one. That list would show the result of (say) the URL /api/contacts When the user selects a contact from the list, the identifier associated with that contact would be put into (say) the query /api/cpontacts/341 whose results would populate an accompanying form on the page. The form's fields would be labeled by the values returned. For example, the form might look like:

1. <form regga-name=“currentContact”>
       <label>Name:</label><input type=“text” reggae-name=“.name”/>
       <label>Company:</label><input type=“text” reggae-name=“.company”/>
       …
   </form>
   
   <script>
       $(document).ready(function() {
           $(‘form’).reggae({apiUrl: ‘/api/});
       }
   </script>
   
   
   
   
   
   
   
   
   
   

(I’m currently calling my API “reggae”, hence the attribute names.)

The list selection callback would look something like:

1. $.reggae.read(‘currentContact’, selection.value); // “selection.valiue” is the resource ID

This would make the ajax call and populate the fields. On the server side, this would turn into a call that read the current values from the resource and returns them as a json object with named fields “name”, “company”, etc.

That’s a basic rundown on the design. I’d love any pointers at existing code that does most or all of this, or any comments on approaches, or (in my dreams) any offers to help on design or coding.

    — Ken