ajax example

HTML

<h3>Documentation</h3>
<p>See the following <a href="https://morph.io/documentation/api?scraper=rubenwoudsma%2Fprofscraper1314">source documentation</a> regarding the API</p>
<textarea id="log"></textarea>
<input type="button" id="button" value="Click Me">

CSS

#log{
    width: 500px;
    height:200px;
}

JavaScript

var i = 0;

function log(s) {
    $('#log').val($('#log').val() + '\n' + (++i) + ': ' + s);
}

log('before ajax call');

//setup the event handler for the button
$('#button').click(function() {
    alert('do something');
});

//disable the button for now (this will be enabled when the data is received)
$('#button').attr('disabled', true);


$.ajax({
    url: 'https://api.morph.io/rubenwoudsma/profscraper1314/data.json?query=select%20*%20from%20pcteamplayers%20limit%2010&callback=jsonp',
    headers: { 'x-api-key': 'TNBd3rYa1tgWDy0ZYSux' }, 
    success: function(data) {
        log('in success callback');
        log('received data: ' + data);
        //enable the button
        $('#button').attr('disabled', false);
    }
});

log('after ajax call');

$(document).ready(function() {
    log('document ready');
    setTimeout(function() {
        log('timeout');
    }, 1000);
});