ajax example

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    
    <body>
        <!-- Start of first page: #one -->
        <div data-role="page" id="one">
            <div data-role="header" data-theme="b">
                	<h1>Multi-page Template</h1>

            </div>
            <!-- /header -->
            <div role="main" class="ui-content">
                	<h2>One</h2>

                <p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
                <p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.</p>
                <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
                <p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two">link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>
                <textarea id="log"></textarea>
                <input type="button" id="button" value="Click for AJAX" />
                	<h3>Show internal pages:</h3>

                <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">Show page "two"</a>
                </p>
                <p><a href="#popup" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a>
                </p>
            </div>
            <!-- /content -->
            <div data-role="footer" data-theme="a">
                	<h4>Page Footer</h4>

            </div>
 ...

CSS

#log {
    width: 100%;
    min-height:200px;
    overflow:auto;
}

JavaScript

var i = 0;

function log(s) {
    $('#log').val($('#log').val() + '\n' + (++i) + ': ' + s);
    console.log(s);
}

log('before ajax call');

//setup the event handler for the button
$('#button').click(function () {
    alert('do something like run the same ajax request from a button click');
    $('#log').val("");
    i = 0;
    log('before ajax call');

    $.ajax({
        url: 'test',
        success: function (data) {
            log('button clicked - ajax in success callback');
            //change text color with jquery
            $('#log').css('color', 'green');

            //return document
            log('received data: ' + data);
            //enable the button
            $('#button').attr('disabled', false);
        }
    });

    log('after ajax call');

    setTimeout(function () {
        log('timeout');
        $('#log').css('color', 'black');
    }, 1000);

});

//disable the button for now (this will be enabled when the data is received)
$('#button').attr('disabled', true);


$.ajax({
    url: 'test',
    success: function (data) {
        log('ajax in success callback');
        log('received data: ' + data);
        //enable the button
        $('#button').attr('disabled', false);
    }
});

log('after ajax call');

$(document).ready(function () {
    log('document ready');
    setTimeout(function () {
        log('timeout');
    }, 1000);
});