1

3 つの空のページ (appAnotado、appCompilado、appOriginal) を含む html ファイルがあります。 

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

ビュー (エイリアス) は navbar で定義されます。そして、このコードは外部 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"か、このjquerymobile.comdata-ajax = "false"を見つけましたが、機能しませんでした。

4

2 に答える 2

1

オマール、お気遣いありがとうございます。このLINKの例に従って、ページの変更の問題を解決しました。

'#appAnotado'Omar の提案に従ってハッシュタグを追加しました。

<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"が基本です。

問題がページの変更だけだと思って申し訳ありません。

于 2013-10-03T18:03:05.340 に答える
1

単一ファイルの寺院でページをリンクするには、このようにページの ID の前にハッシュタグを追加します<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>
于 2013-10-01T16:51:08.297 に答える