jQuery Mobile：如何在$ .mobile.changePage之前運行回調函數？

我正在使用jQuery Mobile和PhoneGap設置移動應用程序。我想要做的是，當我點擊帶有「news_link」標識的鏈接時，我希望jQuery從數據庫中提取數據並將其放到jQm的可摺疊設置中。在我的解決方案中，我希望在回調函數中使用$ .mobile.changePage，因爲我希望等到數據被提取並放入容器內部之後才能更改代碼頁。下面的代碼：

$(function() { 
    $('#news_link').click(function(){ 
    loadNewsFromDB(function(){ 
     $.mobile.changePage($("#news"), { transition: "slideup"}); 
    }); 
});

loadNewsFromDB是的PhoneGap的SQLite數據庫功能，這將與來自數據庫的多個回調函數獲取數據。內容將被放置到所需的容器以.html功能

function loadNewsFromDB(){ 
//some code here 
theDB.transaction(function(tx) { 
    tx.executeSql(sqlStr, [], onLoadNewsSuccess, onLoadNewsError); 
},onTxError, onTxSuccess); 

function onLoadNewsSuccess(tx, results){ 
    //some code here 
    $("#newsSet").html(htmlCodeAndContentToPut);

HTML是JQM的基本UI模塊：

<!-- some html code here --!> 
<div data-role="page" id="news"> 
    <div data-role="content"> 
     <div id="newsSet" data-role="collapsible-set" data-mini="true">

調試我知道這些代碼的工作，直到它工作得很好unti它到達$ .mobile.changePage-函數。不知何故，它不會改變頁面。我已經在其他場合檢查了它的功能，但不在回調函數中。

如果有人會幫我一個忙，我會很感激，我沒有看到明顯的錯誤或者是更具體的東西嗎？還有什麼其他解決方法可以從SQLite中獲取數據，等待數據被提取，將數據放入容器然後更改頁面？

來源

2012-09-03 BigGiantHead

我從來沒有從有問題的回調函數 $.mobile.changePage阿賈克斯，所以它可以從一個回調函數改變頁面
您調用loadNewsFromDB功能與功能一個參數。
但我看不到loadNewsFromDB函數本身在何處/如何使用此參數。你不需要在loadNewsFromDB函數上定義參數嗎？
定義回調函數後，應在數據準備就緒時調用它。
我會嘗試直接在onLoadNewsSuccess函數中使用$.mobile.changePage。

我相信，代碼應該是這樣的：

function loadNewsFromDB(callback){ 
//some code here 
theDB.transaction(function(tx) { 
    tx.executeSql(sqlStr, [], function(tx, result) { 
      ...some code here...; 
      if (callback) { 
       callback(); 
      }  
     },onLoadNewsError); 
},onTxError, onTxSuccess);

編輯：
要回答在評論的問題：

在你$(function()代碼，你正在爲事件添加監聽器。
在此監聽器中，您告訴Jquery要撥打loadNewsFromDB函數和將以下回調函數作爲參數發送給：function(){ $.mobile.changePage($("#news"), { transition: "slideup"}。

發送回調函數是不夠的，你應該在你的代碼中使用它（調用它）。
要使用它，我做了以下內容：

改變了功能定義function loadNewsFromDB(callback)
現在，它有一個新放慢參數：callback（這是您可以使用回叫的名字你的回調函數）。
在你loadNewsFromDB功能，您呼叫的 transaction功能，並將其發送3個參數：內聯函數，onTxError，onTxSuccess。
您的內聯函數只需調用tx.executeSql函數併發送它4個參數：sqlStr, [], onLoadNewsSuccess, onLoadNewsError。
我改變了第三個參數。
而不是調用onLoadNewsSuccess功能，我寫所需的功能內嵌
在聯函數，我檢查，如果回調函數存在if (callback)
如果存在，我把它叫做！ callback();
調用回調函數，應該改變的網頁...

來源

2012-09-03 20:18:54 Izack

感謝您的回答。我對jQuery非常陌生，所以我不知道回調函數的確切語法，但至少根據W3C學校和其他幾個來源，回調函數由'function（function（）{}）;'So這是回調函數，而不是我理解的參數。而且我實際上已經嘗試將'$ .mobile.changePage'放在onLoadsSuccess裏面，最終在目標頁面中出現錯誤的html標記。不好的html標記的結果是我調查$ .mobile.changePage函數作爲回調函數的原因之一。 – BigGiantHead

@ Jugi84，你試過我寫的代碼嗎？我只是把你的'onLoadNewsSuccess'移到executeSql函數中......請試試看... – Izack

是的，我會試試。謝謝！ – BigGiantHead

你的changePage火災前的權利呢？

然後使用pagebeforechange事件，該事件在changePage之前觸發。我使用的是：

$(document).on("pagebeforechange", function(e, data) { 
    // do stuff 
    console.log(e) 
    console.log(data) 
    });

對於我所有的changePage重定向。 data對象將包含所有changePage參數（如toPage，options.fromPage ...），所以您幾乎可以根據需要重新配置changePage調用。

編輯：如果啓用pushstate另外注意此事件觸發兩次。一個事件是由實際的轉換（在hashChange上）觸發的，這將通過toPage，您將以string作爲結果。第二個事件將由pushState觸發，並將通過toPage作爲object。您可以通過檢查確定是什麼的時候：

typeof data.toPage == 'string'

編輯：在您的具體情況，我會preventDefault()原來changePage根據需要多長時間從數據庫獲取數據。最好從pageBeforeChange裏面加入preventDefault,trigger your database call，當你有數據加載時，trigger一個新的changePage。欲瞭解更多信息，請參閱JQM文檔中的example。

來源

2012-09-03 20:34:38 frequent

謝謝你的回答。其實，這正是我想弄明白的:) – BigGiantHead

jQuery Mobile：如何在$ .mobile.changePage之前運行回調函數？

回答

相關問題