2013-01-23 27 views
0

喜(我可能不會做這種正確的) - 我試圖和其試圖加載頁面的對話框時,導航到我的jQuery Mobile的(JQM)應用程序頁面的問題使用「changePage()」。我已經看了看周圍,並嘗試沒有運氣:(jQuery Mobile的異常,當重新添加對話框

比如我有一個成功打開的應用初始化一個對話框登錄頁面的幾個選擇:

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 

登錄屏幕上有一個登錄按鈕,當其主頻轉發到正常(非對話框)頁上,再次成功並再次使用changePage:

$.mobile.changePage(page); 

的問題時,當我再次嘗試對話框中加載登錄頁面(例如註銷時)。我有一個註銷按鈕,點擊時導航b ACK到登錄頁面:

$.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 

不過這一次我得到了JQM LIB以下異常:「遺漏的類型錯誤:無法調用方法的不確定‘的indexOf’」

這裏,再現了一些示例代碼問題:

<script type="text/javascript"> 

$(function() { 
    createPage("login"); 
}); 

function createPage(pageStr) { 
    var page = $("<div id='pageWrapper' class='pageWrapper' data-role='page' ></div>"); 
    var header = createHeader(pageStr); 
    var content = createContent(pageStr); 

    page.append(header, content); 

    $("body").append(page); 

    if(pageStr == "login") {  
     $.mobile.changePage(page, {transition: 'pop', role: 'dialog' }); 
    } 
    else { 
     $.mobile.changePage(page); 
    } 
} 

function createHeader(pageStr) { 
    var headerContainer = $("<div id='header' class='header' data-role='header' data-position='fixed'></div>"); 

    if(pageStr != "login") { 
     var logOutButton = $("<a onclick='logout()' class='ui-btn-right' data-rel='dialog'>Logout</a>"); 
     headerContainer.append(logOutButton); 
    } 

    var headerTitle = $("<h1>Page: " + pageStr + "</h1>"); 
    headerContainer.append(headerTitle); 
    return headerContainer; 
} 

function createContent(pageStr) { 
    var contentDiv = $("<div id='content' class='content' data-role='content'></div>"); 
    var contentBuilder = $("<div></div>"); 

    if(pageStr == "login") { 
     contentBuilder.append(createloginForm()); 
    } 
    else { 
     contentBuilder.append(createWrapper()); 
    } 
    contentDiv.append(contentBuilder); 
    return contentDiv; 
} 

function createloginForm() { 
    var form = $("<form id='loginForm' method='post'></form>"); 
    var loginButton = $("<p><input type='button' value='Login' onclick='login()'></input></p>"); 
    form.append(loginButton); 
    return form; 
} 

function createWrapper() { 
    var tmpText = $("<h2>some content ...</h2>"); 
    return tmpText; 
} 

function login() { 
    createPage("main") 
} 

function logout() { 
    createPage("login"); // pages[0] = login page 
} 

</script> 

謝謝, 喬恩。

+0

是有可能,你想創建頁面上出現重複的div元素上登出同樣的ID? –

+0

我沒有在這個例子中包含的是我也清理頁面/ divs(刪除任何現有的元素),所以我不這麼認爲......我會仔細檢查這個。 –

+0

我想這可能是一個問題,以及 - 如果你先用JQM創建一個頁面,然後JQM外手動刪除它,然後嘗試再次創建相同的頁面 - 舊頁面將不會存在於DOM,所以我猜JQM將嘗試在內部搜索並上的indexOf失敗,並出界()調用 –

回答

0

感謝您的評論 - 我沒有提到/包括在本例中,我正在打掃每個正在增加,因此沒有重複的元素或ID的時間(只有一個頁面被添加/在任一個時刻呈現)的頁面。

我想我有固定掛前手動初始化頁面的問題 - 不知道,如果它是一個「更舒服」的修復,但似乎工作:

調用changePage()方法之前,我需要首先初始化新頁面:E.mobile.initializePage();再次

感謝, 喬恩。