This week, I have been mostly getting JSONP

I've just finished writing a test harness for a sms texting service. While writing this little tool I ran into a problem with cross site scripting issues.

Essentially its a form that is submitted to a page which then invokes methods to deal with the faked sms. It actually plays the part of the sms gateway host and saves me 50pence a shot!

The form submission is via AJAX, but because its on a different domain I get no success or useful error responses. This is where JSONP comes in.

As of jQuery 1.2 you can get JSON data from another domain if you add a JSONP callback and a little bit of handling on the server.

You also get the proper success and error responses.

The form looks a little like this:

<form action="http://someOtherDomain/cross-site.php" method="get">
 input1:<input id="input1" name="input1" value="suits you sir"/>
</form>
<button type="button" id="btnsubmitjson">jsonp submit</button>
<div id="response"></div>

The javascript that handles the button click event appends the JSON callback to the url and then submits the form with the power of jQuery:

function submitjson(){
    posturl = $("form").attr('action');
    posturl += "?jsoncallback=?"; //append the JSON call back
    $.getJSON(posturl, $("form").serialize(), function(data) {
        $('#response').text(data.name);
    });
}

And the final part (which is not so obvious) is the response required, generated by the server:

<?php
$data = '{"name" : "'.$_GET['input1'].'"}';
echo $_GET['jsoncallback'].'('.$data.');';
?>

And its this last magic bit in the responding with $_GET['jsoncallback'] which makes it all work!

Now I can point my tool where ever I like, AND get the right responses (ah yeah).

Winning with Microformats and JQuery

Microformats are a nice way to get semantic data onto a page, and here at Compsoft we have had a maptacular week which has given us the chance to use some with a little JQuery to make things nice.

So on a map we are plotting locations. We are also listing these locations next to the map. You can drag and drop a selection of locations from the main list, into a short list. You can then get Google maps to create us a route based on this short list.

But the cool thing is, you can drag items in the short list to rearrange the route!





How though, do you know the order of the items in the short list once they have been reordered?

With the magic of JQuery and microformats of course!

The markup used to present also defines the data that is being displayed. CSS styling then allows us to make it look nice. This is what the markup looks like:

<div id="location628" class="location">
    <div class="name">Geodis UK Limited</div>
    <div class="address">Warren Farm Transfer Station</div>
    <div class="detail">1 mile</div>
    <div class="latlng">(50.8915618, -1.1965132)</div>
</div>

We can make the lists sortable and allow drag and drop between them with JQuery like this:

$(document).ready(function() {
    $("#locations").sortable({ connectWith: "#selectedLocations" });
    $("#selectedLocations").sortable({ connectWith: "#locations" });
});

and listen for the sorting to finish with this:

$("#selectedLocations").bind('sortupdate', function(event, ui) {
    getRoute();
});

And because we are using JQuery, and microformatting makes it clear what the data means, we can use a JQuery selector to get the data stored on the page in the order they are displayed! This makes it so simple to grab the ordered data.

function getRoutes() {

    var waypoints = [];
    var stops = $("#selectedLocations .latlng");
    for (var i = 0; i < stops.length; i++) {
        if (divs[i])
            waypoints.push(stops[i].innerHTML);
    }
    //GDirections object connected to GMap on page to display the route
    directions.loadFromWaypoints(waypoints);
}

jQuery plugins - A treasure trove of awesome

In order to provide a richer, cross-browser, more interactive experience for our client web applications, we make use of jQuery. jQuery is a robust javascript framework that takes a lot of the complexity out of writing client side javascript.

One of the most powerful features of the framework is that it's been developed with a highly extensible plugin model.

We recently decided to add some interactivity to our partner site Bluesulphur to replace some of the flash content we currently have. As part of that, I looked at some of the plugins currently available.
These are some of the nicest plugins I found.


Facebook search engine - A Facebook style autosuggest plugin using jQuery. It's particularly pretty and although it currently uses a php source for data, this isn't a big limitation, these can be swapped out to use .NET web services as a provider quite easily.

coda bubble is a mac like popup that could be put to use in many situations.

jQuery Tablesorter is a cute little plugin that makes any table sortable

Fancybox is a popup plugin that you can use for popup image galleries, the popups have nice transition effects as well as inbuilt navigation and grouping functionality.

I thought for the last example, I'd show an html editor and I really like markitup, it's both simple and sexy. It looks like it's an easy integrator too, which is always a plus.

So, to sum up, there are a lot jQuery plugins out there, more than 2500 just on the jQuery plugin site alone. New and awesome plugins are being released every day, check them out!

Oh, and Compsoft are a great choice for integrating jQuery interactivity and plugins into your site too! *wink*