jQuery Mobile Transition Handler

by HYEONGJINKIM

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Mobile Transition Handler</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
</head>
<body>
    <div id="page1" data-role="page">
        <div data-role="header">
            <h1>Page 1</h1>
        </div>
        <div data-role="content">
            <p>Go to <a href="#page2">page 2</a>.</p>
        </div>
    </div>
  
    <div id="page2" data-role="page">
        <div data-role="header">
            <h1>Page 2</h1>
        </div>
        <div data-role="content">
            <p>Go back to <a href="#page1">page 1</a>.</p>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  
    <script>
        $(document).on('mobileinit', function() {
            console.log('mobileinit invoked');

            var oldDefaultTransitionHandler = $.mobile.defaultTransitionHandler;

            $.mobile.defaultTransitionHandler = function(name, reverse, $to, $from) {
                console.log('defaultTransitionHandler invoked');

                var promise = $to.data('promise');

                if (promise) {
                    console.log('found promise on page ' + $to.prop('id'));

                    $to.removeData('promise');

                    $.mobile.loading('show');                
        
                    return promise.then(function() {
                        $.mobile.loading('hide');
        
                        return oldDefaultTransitionHandler(name, reverse, $to, $from);
                    });
                }

                return oldDefaultTransitionHandler(name, reverse, $to, $from);
            };

            $(document).on('pagebeforeshow', '#page2', function() {
                // Pretend to do Ajax to simulate fetching data asynchronously.
                var promise = doAjax();

                // Save promise on page so the transition handler can find it.
      ...