0

我正在编写一个 phonegap/jquery 移动应用程序并且有一个我似乎无法解决的问题。

当应用程序加载(设备就绪和 jqm_mobile_init)触发并且应用程序创建/打开数据库并检查用户是否登录时(只是数据库中的一个标志)。如果是这样,应用程序调用 $.mobile.changePage("#home", {transition:"none"}); 将它们重定向到“主页”页面。

然后在“主页”页面显示事件中,我从数据库中获取大量信息并将其附加到主页内的列表视图中。

但是,第一次运行(使用 $.mobile.changePage 事件)时,不会触发 pageshow 事件(因此我的数据都不会附加到列表视图)。如果我浏览应用程序然后访问该页面,则数据显示正常。这只发生在使用 $.mobile.changePage 更改到主页时。

如何让 pageshow() 在 $.mobile.changePage 上触发?还是有其他方法可以做到这一点?

这是我的代码:

/************************************************
Try to create/open the DB, if not catch the error
***********************************************/
try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'test';
        var version = '1.0';
        var displayName = 'test Database';
        var maxSize = 200000; // in bytes
        // database instance in db.
        var db = openDatabase(shortName, version, displayName, maxSize);

        // Create tables
        createTables(db);

        // Check if there is a signedin user
        isUserSignedInQuery(db);

    }
} catch(e) {
    // Error handling code goes here.
    if (e == 2) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
    return;
}

// Universal null/blank data handler
function nullDataHandler(transaction, results) { }

// Universal error callback
function errorHandler(error) {
    //alert("Error processing SQL: " +error.message+ " Error Code: " +error.code);
}

// Create tables if dont already exist
function createTables(db) {
    db.transaction(
        function (transaction) {

            // create tables
    }
    );
}

/**********************************************************************************************
Check if there is a signed in user, if so redirect to listings page, if not display login page
**********************************************************************************************/

function isUserSignedInQuery(db) {
    db.transaction(
        function (transaction) {
            transaction.executeSql("SELECT * FROM USERS WHERE signedIn=1;",
            [], // array of values for the ? placeholders
            isUserSignedInDataHandler, errorHandler);
        }
    );
}

function isUserSignedInDataHandler(transaction, results) {
    // Handle the results
    if (results.rows.length > 0) {
        //console.log("someones logged in!");

        // Assign signed in user to global var
        console.log("logged in user = " + results.rows.item(0).id);
        window.currentSignedInUserId = results.rows.item(0).id;

        $.mobile.changePage( "#home", { transition: "none"} );
    } else {
        $.mobile.changePage( "#login", { transition: "none"} );
    }
}


/**********************************************************************************************
Sign in page:
**********************************************************************************************/

function doesSigningInUserAlreadyExistQuery(db) {
    db.transaction(
        function (transaction) {
            transaction.executeSql("SELECT * FROM USERS WHERE username='"+usernameValue+"' ORDER BY id LIMIT 0,1;",
            [], // array of values for the ? placeholders
            doesSigningInUserAlreadyExistDataHandler, errorHandler);
        }
    );
}

function doesSigningInUserAlreadyExistDataHandler(transaction, results) {

    // User exists, sign them in.
    if (results.rows.length > 0) {

        //console.log("user exists");

        // Find number of rows
        var len = results.rows.length;
        //console.log(len);

        for (var i=0; i<len; i++){
            //console.log(results.rows.item(i));

            db.transaction(
                function (transaction) {
                    transaction.executeSql('UPDATE USERS SET signedIn = 1 WHERE username="'+usernameValue+'"');
                }               
            );

            // Assign signed in user to global var
            window.currentSignedInUserId = results.rows.item(0).id;

            // Redirect to home/listings page
            $.mobile.changePage( "#home", { transition: "slidefade"} );
        }

    // User is new, create them and sign them in
    } else {

        db.transaction(
            function (transaction) {
                transaction.executeSql('INSERT INTO USERS (username, password, userId, defaultHandler, autoSync, updateCaseTypes'
                +', updateHistorical, updateFavorite, signedIn) '
                +'VALUES ("'+usernameValue+'", "eclipse", "userid321", "Another User", 1, 1, 1, 1, 1);', [],
                function (transaction, resultSet) {
                    if (!resultSet.rowsAffected) {
                        // Previous insert failed.
                        alert('No rows affected!');
                        return false;
                    }
                    alert('insert ID was '+resultSet.insertId);

                    //Assign signed in user to global var
                    window.currentSignedInUserId = resultSet.insertId;
                });
            }               
        );

        // Redirect to home/listings page
        $.mobile.changePage( "#home", { 
            reloadPage: true,
            transition: "slidefade"} );

    }
}

$('#login').live('pageshow', function(event) {

    console.log(window.currentSignedInUserId); // This is empty - global var not working

    // Should this be tap??????? Find out. -----------
    $('a#signIn').click(function() {

        // Get values of all fields & buld vars
        var username = $('#login-username');
        var password = $('#login-password');

        // Check if fields are empty
        if( !username.val() ) {
              username.addClass('empty');
              $('label.login-username').addClass('blank');
            }
            if( !password.val() ) {
              password.addClass('empty');
              $('label.login-password').addClass('blank');
            }

            // If both not empty, check if user exists, if so sql update if not sql insert
            if (username.val() && password.val()) {

                // Get username
                usernameValue = username.val();

                // Run function
                doesSigningInUserAlreadyExistQuery(db);

            }

    });
});


$('#home').live('pageshow', function(event) {

    console.log("Page show fired on recordings page");

    db.transaction(getRecordingsQuery, getRecordingsDataHandler, errorHandler);

            // get stuff, loop through it and append

        // Refresh the list to add JQM styles etc
        $('#recordings-list').listview('refresh');

    }

});
4

2 回答 2

1

我已经设法解决了它,它并不是一个真正的正确修复,但它的工作原理是在屏幕刷新时屏幕闪烁。

如果它对任何人有帮助,我添加了 allowSamePageTransitions: true ,它解决了这个问题(以闪烁为代价)。

于 2012-11-09T16:31:47.467 回答
0

您应该使用on()而不是live(). live()已被弃用。
您是否尝试过将其放入beforepageshow而不是pageshow?它似乎是放置数据收集/动态页面元素生成的更好地方。

于 2012-11-08T17:16:33.610 回答