wi12.unix7.org

js

JQuery dynamic dialog sample

Learning sample.

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
    <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>Phalcon App</title>
 
        <link rel="stylesheet" href="/css/foundation-float.min.css">
        <link rel="stylesheet" href="/css/app.css">
        <link rel="stylesheet" href="/icons/foundation-icons.css">
 
    </head>
 
    <body>
 
        <div class="top-bar" id="topbar-menu">
            <div class="top-bar-left">
                <ul class="dropdown menu" data-dropdown-menu>
                    <li class="menu-text">JQ</li>
                </ul>
            </div>
        </div>
 
        <div class="row">&nbsp;</div>
        <div class="row">
<!- end of head template ->
 
<div id="form">
    <button id="button" class="no-frame hollow button">&times;</button>
</div>
 
<div id="message"></div>
 
<!- template tail begin ->
            </div>
        </div>
        <hr/>
        <div class="row">
            <p class="text-center"><small>Made by <a href="http://wiki.unix7.org">Borodin Oleg</a></small></p>
        </div>
        <script src="/js/jquery.min.js"></script>
        <script src="/js/foundation.min.js"></script>
        <script src="/js/app.js"></script>
 
        <script>
            $.get('/jform1.html').done(
                        function(data) {
                            $('#form').html(data);
                        }
            );
        </script>
 
    </body>
</html>
<!- template tail end ->
<!- EOF ->

jform1.html

<button id="button" class="no-frame hollow button">Add</button>
 
<script>
 
$("button").click(function() {
    $.get('/jform2.html').done(
            function(data) {
                $('#form').html(data);
            }
    );
});
</script>

jform2.html

<button id="button" class="no-frame hollow button">Send Form</button>
 
<script>
$("button").click(function() {
        $.get('/jhandler.html').done(
                function(data) {
                    $('#form').html(data);
                }
        );
});
</script>

jhandler.html

<div class="callout success">Form handled.</div>
 
<button id="button" class="no-frame hollow button">Done</button>
 
<script>
$("button").click(function() {
        $.get('/jform1.html').done(
                function(data) {
                    $('#form').html(data);
                }
        );
});
</script>

wi12.unix7.org

User Tools

Site Tools

JQuery dynamic dialog sample

Page Tools