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"。

我尝试使用找到此 jquerymobile.com 的属性rel = "external"或data-ajax = "false"，但它无效。

Answer 1

要链接单文件中的页面，请在页面ID之前添加主题标签，这样<a href=#page_id>Page</a>。

<强> Demo

<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"是基本的。

我为认为问题只是在改变页面而道歉。

使用ajax加载多页的JQuery mobile + Phonegap

2 个答案: