petr.plachy
/
api_test_doprava
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

bootstrap + sc

master
petr 4 years ago
parent
e4d425515a
commit
6b1065fa71
1 changed files with 62 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      index.html

60
index.html
View File

@ -4,11 +4,51 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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> </head>
<body> <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 id="mista"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</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> <script>
$.ajax({ $.ajax({
dataType: "json", dataType: "json",
@ -21,15 +61,27 @@
console.log(data); console.log(data);
for (let index = 0; index < data.length; index++) { for (let index = 0; index < data.length; index++) {
const item = data[index]; const item = data[index];
$("#mista").append("<p>" + item.name + "</p>");
$("#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() { .fail(function() {
console.log("chyba ..."); console.log("chyba ...");
}); });
</script>
//aaa
</script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save