Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css"> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <button title="test" class="btn btn-success" id="nacistAjax">Vypustit Ajaxa na svět!</button> <div id="vypis"> </div> <div id="ajaxLoadModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <h3 id="myModalLabel">Probíhá načítání</h3> </div> <div class="modal-body"> <p>Čekejte prosím, načítám nyní pomocí ajax formulář který jste si vyžádal</p> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#vypis{ margin-top: 5px; padding: 5px; border: 1px black solid; overflow-y: scroll; height: 250px; width: 500px; } body{margin: 5px; padding: 5px;}
CSS
Autoformát
CSS reset
Až na konci
var context = "Empty"; $("#nacistAjax").click(function(){ $("#vypis").html(""); $.ajax({ url: "/ysc-" }).fail(function(){ alert('Chyba'); }).success(function(vracenaData) { context = vracenaData; }); }); $(document).ajaxStart(function(){ $('#ajaxLoadModal').modal('show'); }); $(document).ajaxSuccess(function(){ setTimeout(function(){ $('#ajaxLoadModal').modal('hide'); $("#vypis").html(context); }, 3000); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>