帶有ajax的jQuery mobile + Phonegap加載多頁

Question

我有一個帶有3個空頁面的HTML文件（appAnotado，appCompilado和appOriginal）。

<div id="appAnotado" data-role="page" data-theme="a" data-content-theme="a">
    <div id="divDestino" data-mini="true">
        <div id="visoes" data-role="navbar">
        </div>
        <div id="divTexto" data-mini="true">
        </div>
    </div>
</div>
<div id="appCompilado" data-role="page" data-theme="a" data-content-theme="a">
    <div id="divDestinoCompilado" data-mini="true">
        <div id="visoesCompilado" data-role="navbar">
        </div>
        <div id="divTextoCompilado" data-mini="true">
        </div>
    </div>
</div>
<div id="appOriginal" data-role="page" data-theme="a" data-content-theme="a">
    <div id="divAtoDestinoOriginal" data-mini="true">
        <div id="visoesOriginal" data-role="navbar">
        </div>
        <div id="divTextoOriginal" data-mini="true">
        </div>
    </div>
</div>

我用來自3個外部URL的3個ajax調用來填充這些頁面。 每個頁面都根據您的別名填寫。

<script>
$(document).on('pagebeforeshow', "#appAnotado",function () {
    var id = 10;
    var formData = new FormData();
    $.ajax({
        url :'http://myApp.action?id=' + id + '&visao=anotado',
        type : 'POST',
        dataType : "html",
        data : formData,
        cache : false,
        crossDomain: true,
        processData : false,
        contentType : false,
        success : function(dados) {
            $('#visoes').html(jQuery(dados).find('#visoes').html());
            $('#divTexto').html(jQuery(dados).find('#divTexto').html());
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("xhr.status: " + xhr.status);
        }
    });
    $.ajax({
        url :'http://myApp.action?id=' + id + '&visao=compilado',
        type : 'POST',
        dataType : "html",
        data : formData,
        cache : false,
        crossDomain: true,
        processData : false,
        contentType : false,
        success : function(dados) {
            $('#visoesCompilado').html(jQuery(dados).find('#visoes').html());
            $('#divTextoCompilado').html(jQuery(dados).find('#divTexto').html());
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("xhr.status: " + xhr.status);
        }
    });
    $.ajax({
        url :'http://myApp.action?id=' + id + '&visao=original',
        type : 'POST',
        dataType : "html",
        data : formData,
        cache : false,
        crossDomain: true,
        processData : false,
        contentType : false,
        success : function(dados) {
            $('#visoesOriginal').html(jQuery(dados).find('#visoes').html());
            $('#divTextoOriginal').html(jQuery(dados).find('#divTexto').html());
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("xhr.status: " + xhr.status);
        }
    });
});
</script>

視圖（別名）在導航欄中定義。 而此代碼是由外部URL帶來的。

<div id="visoes" data-role="navbar">
    <ul>
        <li><a id="anotado10" class="ui-btn-active" href="appAnotado" >Anotado</a></li>
        <li><a id="publicado10" href="appCompilado" >Compilado</a></li>
        <li><a id="original10" href="appOriginal" >Original</a></li>
    </ul>
</div>

當我運行該應用程序時，僅顯示第一頁（這是正確的），但是當我單擊其他視圖（別名）時，會暫時顯示消息"error loading page" 。

我嘗試使用屬性rel = "external"或data-ajax = "false"找到了這個jquerymobile.com，但是沒有用。

Answer 1

要鏈接單文件<a href=#page_id>Page</a> ，請在頁面ID之前添加<a href=#page_id>Page</a> ，方法是<a href=#page_id>Page</a> 。

演示

<div id="visoes" data-role="navbar">
  <ul>
    <li><a id="anotado10" class="ui-btn-active" href="#appAnotado">Anotado</a></li>
    <li><a id="publicado10" href="#appCompilado">Compilado</a></li>
    <li><a id="original10" href="#appOriginal">Original</a></li>
  </ul>
</div>

Answer 2

奧馬爾，謝謝您的關注。 我解決了此LINK示例后面的頁面中的更改問題。

根據Omar的建議，添加了標簽'#appAnotado' ：

<div id="visoes" data-role="navbar">
    <ul>
        <li><a id="anotado10" class="ui-btn-active" href="#appAnotado" >Anotado</a></li>
        <li><a id="publicado10" href="#appCompilado" >Compilado</a></li>
        <li><a id="original10" href="#appOriginal" >Original</a></li>
    </ul>
</div>

並添加了根據Phill Pafford的建議為每個視圖檢索ID的函數：

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
$(document).on( "pagebeforeshow", "#appAnotado", function( e ) {
    var formData = new FormData();
    $.ajax({
        url :'http://myApp.action?id=' + getParameterByName('id'),
[...]

僅主題標簽不能解決問題。 我認為也許應用程序被錯誤參數傳遞破壞了。 並使用上述函數getParameterByName(name)解決了問題。

仍然有必要修復調用此頁面的listview ：

<ul data-role="listview">
    <li>
        <a href="?id=10#appAnotado" rel="external"></a>
    </li>
</ul>

盡管所有頁面都在同一個html文件中，但使用rel="external"屬性是基本的。

我為認為問題僅在於更改頁面而表示歉意。