AJAX

HTML

<html>
<body>
    <section id="status">Idle</section>
    <div id="content">
        Press <kbd>Go again</kbd> a few times to see what happens.
    </div>
    <label>Timestamp</label>
    <input id="input" type="text" value=""/>
    <button id="button">Go again</button>
</body>
</html>

CSS

label {
    font-family: sans-serif;
}
kbd {
    border: 1px solid grey;
    border-radius: 3px;
    background: -webkit-linear-gradient(
        top,
        #eeeeee 0%,
        #cccccc 100%
    );
}
#content {
    font-family: 'courier new', 'courier';
    min-height: 3em;
    background: -webkit-linear-gradient(
        top,
        #ffffee 0%,
        #ddddcc 100%
    );
}

JavaScript

function ajax(strId) {    
    strParam = $.param({t : strId});
    $('#status').text('Waiting for tags to change...');
    $.ajax({
        url : 'http://localhost:8000/tags/?' + strParam,
        type : 'get',
        dataType : 'jsonp'
    }).done(function(data, status, jqXHR) {
        console.log('ajax.success');
        html = data[1].join('<br />');
        $('#content').html(html);
        $('#input').val(data[0]);
        $('#status').text('AJAX Success');
        setTimeout(function() {
            $('#button').click();
        }, 1000);
        //$('#button').removeAttr('disabled');
    }).fail(function(jqXHR,error,exception) {
        console.log('ajax.fail');
        $('#status').text('AJAX Fail');
        $('#button').removeAttr('disabled');
    });
}

$('#button').click(function() {
    $(this).attr('disabled', 'true');
    ajax($('#input').val());
});