Allowing different layouts to be selected

In this task of the project, we need to allow the user to select each layout supported by the page. We can do this by using a <select> box which we populate at page load with each of the different layouts.

Engage Thrusters

First of all we can add the <select> element to the page. This can go in between the search field and the button at the top of the page in console.html:

<select id="layouts"></select>

Next we need to make a request at page load to populate the <select>element with an <option> for each of the different layouts. We can do this in the click handler for the <button> that we added in console.js earlier.

It will need to go into the first branch of the conditional that checks a URL has been entered into the <input>, directly before where we set the src of the <iframe>:

$.ajax({
    url: "/heat-map.asmx/getLayouts",
    data: JSON.stringify({ url: url })
}).done(function (layouts) {

   ...