api test

4 years ago · ccb7654d8c
1 changed files with 109 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,109 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Api test </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
 </head>
 <body>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul><div id="mista"></div></ul>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <ul class="list-group">
        <li class="list-group-item">
            <input name="volba" type="radio" id="cp"><label for="cp">česká pošta</label>
        </li>
        <li class="list-group-item">
            <input name="volba" type="radio" id="ppl"><label for="ppl">ppl</label>
        </li>
        <li class="list-group-item">
            <input name="volba" type="radio" id="os"> <label for="os" data-bs-toggle="modal" data-bs-target="#exampleModal">osobni</label>
            <span id="misto"></span>
        </li>
      </ul>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <!--<script>
        $.ajax("http://pak.asgard.odbornaskola.cz/paks/", {
            dataType: "json",
            headers: {   
                Authorization: "Token f81ba6fa563046e52a8ab6b7a0e5b1e8bd6b4a0e"
            }
        })
            .done(function(data) {
                console.log(data);
                for (let index = 0; index < data.length; index++) {
                    const item = data[index];
                    $("#mista").append("<p>" + item.name + "</p>")
                }
            })
            .fail(function(){
                console.log("Chyba ...");
            });
    </script>-->
 <script>
    $.ajax("http://pak.asgard.odbornaskola.cz/paks/", {
        dataType: "json",
        headers: {   
            Authorization: "Token f81ba6fa563046e52a8ab6b7a0e5b1e8bd6b4a0e"
        }
    })
        .done(function(data) {
            console.log(data);
            for (let index = 0; index < data.length; index++) {
                const item = data[index];
                $("#mista").append('<li><input type="radio" name="misto" data-nazev="'+item.name+'" id="misto_'+item.id+'"><label for="misto_'+item.id+'" >' + item.name + '</label></li>')
            }
            let radia = document.querySelectorAll('input[name="misto"]')
            console.log(radia);
            for (let index = 0; index < radia.length; index++) {
                const element = radia[index];
                element.addEventListener("change", function() {
                    console.log(this);
                    $('#misto').html(this.dataset.nazev)
                    $('#exampleModal').modal('hide')
                })
            }
        })
        .fail(function(){
            console.log("Chyba ...");
        });
 </script>
 </body>
 </html>