Showing heat maps for each layout

Now that we have each of the layouts in the <select> element, we can wire it up so that when the selected layout is changed, the page is updated to show the heat map for that layout.

Engage Thrusters

In this task we'll need to modify some of the code written in a previous task. We need to change the click handler for the <button> so that the layout isn't hardcoded into the request.

First of all we need to pass the len variable to the handler for the iframeloaded event. We can do this by adding a second argument to the trigger() method:

$(this).trigger("iframeloaded", { len: len });

Now we need to update the callback function so that this object is received by the function:

doc.on("iframeloaded", function (e, maxLayouts) {

Now, we can change the bit where we hardcoded layout 4 into the data passed to the server when making the request for click data:

data: JSON.stringify({ url: url, layout: maxLayouts.len + 1 }),

Now we're ready to update the heat map...