You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

87 lines
3.6 KiB

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<!-- Modal -->
<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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="mista"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Zavřít</button>
</div>
</div>
</div>
</div>
<h1>Volba dopravy</h1>
<ul class="list-group">
<li class="list-group-item">
<input type="radio" name="volba" id="posta"> <label for="posta">Česká pošta</label>
</li>
<li class="list-group-item">
<input type="radio" name="volba" id="ppl"> <label for="ppl">PPL </label>
</li>
<li class="list-group-item">
<input type="radio" name="volba" id="osobni">
<label for="osobni" data-toggle="modal" data-target="#exampleModal">Osobní odběr <span id="misto"></span></label>
</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@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
$.ajax({
dataType: "json",
url: "http://pak.asgard.odbornaskola.cz/paks/",
headers: {
Authorization: "Token f81ba6fa563046e52a8ab6b7a0e5b1e8bd6b4a0e"
}
})
.done(function(data) {
console.log(data);
for (let index = 0; index < data.length; index++) {
const item = data[index];
$("#mista").append("<input type='radio' name='mista' data-nazev='" + item.name + "' id='misto" + item.id + "'> <label for='misto" + item.id + "'>" + item.name + "</label><br>");
}
let radia = document.querySelectorAll("input[name='mista']");
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 ...");
});
//aaa
</script>
</body>
</html>