{% extends "layout.html" %}
{% block body %}
<div class="well" style="margin: 40px auto; width: 500px; border: ">
    <h1>Hi! :)</h1>
    <h2>Guck doch mal hier nach:</h2>
    <ul>
        <li>Befunde (<a href="befunde/">JSON</a> | <a href="befunde/?f=html">HTML</a>)</li>
        <li>Personen (<a href="personen/">JSON</a> | <a href="personen/?f=html">HTML</a>)</li>
        <li>Allergien (<a href="allergien/">JSON</a> | <a href="allergien/?f=html">HTML</a>)</li>
    </ul>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#get_befunde").click(function() {
                $.getJSON('/befunde/', function(data) {
                    var items = [];
                    $.each(data, function(key, val) {
                        items.push('<li id="' + key + '">' + val.titel + '<pre>' + $.param(val) + '</pre></li>');
                    });
                    $("#results").empty().append(items.join(''));
                });
            });
            $("#get_personen").click(function() {
                $.getJSON('/personen/', function(data) {
                    var items = [];
                    $.each(data, function(key, val) {
                        items.push('<li id="' + key + '">' + val.vorname + ' ' + val.nachname + ' ' + val.notfallnummer + '<pre>' + $.param(val) + '</pre></li>');
                    });
                    $("#results").empty().append(items.join(''));
                });
            });
            $("#get_allergien").click(function() {
                $.getJSON('/allergien/', function(data) {
                    var items = [];
                    $.each(data, function(key, val) {
                        items.push('<li id="' + key + '">' + val.name + '<pre>' + $.param(val) + '</pre></li>');
                    });
                    $("#results").empty().append(items.join(''));
                });
            });
        });
    </script>
    <h2>kleiner AJAX-JSON-Test:</h2>
    <p>
        <button class="btn" id="get_befunde">Befunde</button>
        <button class="btn" id="get_personen">Personen</button>
        <button class="btn" id="get_allergien">Allergien</button>
    </p>
    <ul id="results"></ul>
</div>
{% endblock %}