load() JSON data, generate HTML table and place it inside of a div

Question

I have probably a very simple jQuery question - probably missing a tiny bit.

I have a button which loads data in JSON format from a PHP script:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function showLastGame(id) {
        $('#top').load('http://preferans.de/cards-json.php?id=' + id + '&limit=1');
}
</script>

...

Show your last game »
<input type="button" onclick="showLastGame('DE13370')" value="Show">

That works well - I can see the loaded JSON data after the button is clicked.

But I actually would like to pass that loaded data to a JavaScript-function (I'm trying to reuse one from dataTables), which will construct a return a HTML-table as a String:

function renderGame(cardsTable, nTr) {
        var aData   = cardsTable.fnGetData(nTr);
        //console.dir(aData);
        // .... HTML table constructed here....
        return str;
}

How to do this please?

And how to put that generated string inside of the #top div?

Answer 1

Use a regular jQuery.ajax() call rather than .load():

$.ajax({
    url: '/cards-json.php',
    data: {
        id: id,
        limit: 1
    },
    dataType: 'json',
    ...
}).done(function(data) {
    // data is your JSON - use it however you want here
    var topHtml = renderGame(arg1, arg2);
    $('#top').html(topHtml);
});

I've assumed the renderGame function is the one that returns the HTML content for the #top element; if not, then change that to the correct function call.