Bugzilla JSON-RPC Webservice with JQuery

I already posted how you can use YUI to use the Bugzilla web services available on the head. But lots of people don't like using YUI and prefer using JQuery. I haven't used JQuery much, but this experiment seems to have gotten the job done and should supply a basis for how to do more complex stuff with JQuery and the JSON-RPC interface.

Please note the JSON serialization capability isn't part of JQuery so I used a plug-in. The plugin doesn't seem to be as powerful as YUI's JSON serialization, but maybe it is and I haven't explored it enough. Anyway, here goes!

First you'll need JQuery and the JSON serialization parser. I added it under YUI but you should be able to add it before or after the YUI in the header.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"></script>

Next comes the actual code which is very similar to the previous post.

First you create the JSON-RPC object:

var myObject = { "method": "Bug.add_comment", 
                 "params": [ { "id": 1, 
                               "comment":"I am using bugzilla's webservices with jQuery! YAY" 
                           } ], 
                 "id": 1 };

Then we encode it into a string:

var enc = $.toJSON(myObject);

Lastly we send it on its way using the JQuery ajax method:

$.ajax({"contentType":"application/json",
        "data": enc, 
        "dataType": "json", 
        "url": "jsonrpc.cgi",
        "type": "post",
        success: function(d, ts){
                    console.log('w00t',d); 
                    console.dir(d);
                 }
       });

Just like in YUI we need to make sure we set the contentType to application/json and use a post (get is still disabled due to cross site scripting concerns). I set the dataType to JSON so Jquery would deserialize the response for me.

And now we've got a basic JSON-RPC message being sent. Now we'll still need to handle errors etc, but for now this is enough to get any eager JavaScript developer going.

Another example is getting bug info which might be equally helpful is available below. This method gets information about 2 bugs. I'm not going to explain it as much but it follows the same pattern.

var myObject = {
               "method": "Bug.get",
               "params": [{ "ids": [1,2]}],
               "id": 1
               }; 
var enc = $.toJSON(myObject); 
jQuery.ajax({"contentType":"application/json",
             "data":enc, 
             "dataType":"json", 
             "url":"jsonrpc.cgi", 
             "type":"post", 
             success:function(d, ts){
                     console.log('w00t', d); 
                     console.dir(d)
                     }
           });

The hope is eventually to release some JavaScript plugins for YUI (2 and 3) and JQuery that will make this sort of stuff much easier, like handle the serialization, and errors. But for now these examples will have to do.

For more info about what Bugzilla web services are available check out:
http://www.bugzilla.org/docs/3.4/en/html/api/index.html

Next experiment... Jetpack! Any ideas on a cool bugzilla jetpack app?