ajax/ajax.html

<!doctype html>
<html>
    <head>
        <title>AJAX</title>
        <meta charset="UTF-8">

        <script src="../jquery-3.1.1.min.js"></script>
        
        <style>
            body {
                font-family: Georgia, "Times New Roman", Serif;
                padding: 5vmin;
            }

            .menu {
                list-style: none;
                padding: 0;
                margin-bottom: 2em;
            }

            .menu li {
                display: inline;
                margin-right: 1em;
                font-size: 150%;
            }

            .button {
                
                
            }

            #container {
                background: WHITESMOKE;
                border: 2px dashed DARKGRAY;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        
        <h1>AJAX in action</h1>
        
        <ul class="menu">
            <li><a href="content1.html" class="button">Contenu 1</a></li>
            <li><a href="content2.html" class="button">Contenu 2</a></li>
        </ul>

        <div id="container">empty container</div>

        <script>

            var container = $('#container');

            $.ajaxSetup({
                timeout:5000,
                error: function(req,error){
                  if(error === 'error'){error = req.statusText;}
                  var errormsg = 'There was a communication error: '+error;
                  container.html('<div class="ajax-error font-norm">'+errormsg+'</div>');
                }
            });

            $('.button').click(function(){ // info
                var toLoad = $(this).attr('href')+' #content';
                console.log('target: '+toLoad);

                $('#container').html('<div class="ajax-loading"></div>');
                $('#container').load(toLoad, function() {
                    $('#container').show('slow');
                });
                return false;
            }); // end of first part


        </script>
    </body>
</html>