Requesting click data

The console page starts out almost empty, containing mostly a form for loading the page that we want to view click data for. In this task we'll look at how we can load that page and request its data from the server.

Engage Thrusters

Start out by adding the following code to the empty function in console.js:

var doc = $(document),
    input = doc.find("#url"),
    button = doc.find("#load"),
    iframe = doc.find("#page"),
    canvas = document.createElement("canvas");

$.ajaxSetup({
    type: "POST",
    contentType: "application/json",
    dataType: "json",
    converters: {
        "textjson": function (data) {
            var parsed = JSON.parse(data);

            return parsed.d || parsed;
        }
    }
});

We can then add a click handler for the <button> element:

doc.on("click", "#load", function (e) {
    e.preventDefault();

    var url = input.val(),
        len;

    if (url) {
        input.removeClass("empty").data("url", url);
        button.prop("disabled...