Ajax on Page Ready and Later - No disable

by john_s

HTML

<button type="button" id="searchBtn">Search</button>
<p class="label">Last Request:</p>
<div id="request"></div>
<p class="label">Output:</p>
<div id="output"></div>
<p class="label">Console:</p>
<div id="console"></div>

CSS

p.label {
    margin: 20px 0 4px 0;
}
#request {
    padding: 2px;
    background-color: #CCC;
    height: 22px;
    width: 250px;
}
#output {
    padding: 5px;
    border: 2px solid black;
    height: 50px;
    width: 240px;
}
#console {
    padding: 5px;
    border: 1px solid black;
    height: 200px;
    width: 242px;
}

JavaScript

var RESPONSES = [
    { html: 'Response 1', delay: 5 },
    { html: 'Response 2', delay: 2 },
    { html: 'Response 3', delay: 1 }],
    i = -1;

$(document).ready(function() {
    var $searchBtn = $('#searchBtn'),
        $request = $('#request'),
        $output = $('#output'),
        $console = $('#console'),
        requestNum = 0;

    function search() {
        var data = RESPONSES[i = (i + 1) % RESPONSES.length];
        var num = ++requestNum;
        $request.html(data.html);
        $console.append('Request  ' + num + ': sent.<br />');
        $output.html('Searching...');
        $.ajax('/echo/html/', {
            type: 'post',
            dataType: 'html',
            data: data,
            success: function(html) {
                $output.html(html);
            },
            error: function() {
                $output.html('Error');
            },
            complete: function() {
                $console.append('Request  ' + num + ': returned.<br />');
            }
        });
    }

    $searchBtn.click(function() {
        search();
    });

    search();
});