1

私は Jquery Mobile を初めて使用し、この問題を解決するためにあらゆることを試しました。最初のページは index.php です。このページは、json から情報を取得する js からボタンをロードします。2 ページ目 (FichaTecnica.php) には、そのワインの情報が表示されます (すべてスペイン語です。申し訳ありません)。問題は、ブラウザでページを更新して情報をロードする必要があり、最初のページに戻ると、ボタンをロードするために更新する必要があることです。

どんな助けでも大歓迎です。

ありがとう。

インデックス.php

<div data-role="page" id="main">      
    <div data-role="header">         
        <h1>
            Page 1
        </h1>     
    </div>     

    <div data-role="content">
        <div>
            <img src="images/Vinos separador [Negro].png" />
        </div>
        <div data-role="controlgroup" data-role="controlgroup" id="buttonGroup">
        </div>


        <div>
            <img src="images/P Venta Separador [Negro].png" />
        </div>
        <div data-role="controlgroup" data-role="controlgroup" id="buttonGrouploc">
        </div>



    </div>     

    <div data-role="footer">              
    </div> 
</div>             

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/variedadeslist.js"></script>

最初のページにボタンをロードする Js ファイル

        var url="http://localhost/CavaOnline/json_variedades.php";      
        var buttonHtmlString = "", pageHtmlString = "";

        var jsonResults;

    $.getJSON(url,function(data){
        jsonResults = data.items;
        displayResults();       
    });


    function displayResults() {

        for (i = 0; i < jsonResults.length; i++) {
            buttonHtmlString += '<a data-transition="slide" href="FichaTecnica.php?id=' + jsonResults[i].id + '" id="'+ jsonResults[i].id +'" data-role="button">' + jsonResults[i].nombre + '</a>';
        }

        $("#buttonGroup").append(buttonHtmlString);
        $("#buttonGroup a").button();   
    }

2ページ目「FichaTecnica.php」

    <div data-role="page" id="pagina2">
        <div data-role="header">
            <h1>
                Header
            </h1>
        </div>

        <div data-role="content">

            <div>

                 <div data-role="collapsible" data-collapsed="false">
                <h1>El Vino</h1>
                <div id="descripcion">

                </div>
                </div>

                <div data-role="collapsible" data-collapsed="false">
                <h1>Cata</h1>
                <div id="cata">

                </div>
                </div>

            </div>

            <a data-role="button" id="botonMarcas"></a>

        </div>

        <div data-role="footer">
            <h1>
                footer
            </h1>
        </div>            
    </div>

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/descripcionlist.js"></script>

2ページ目に情報を読み込むJS

$('#pagina2').live('pageinit',function(event){

var id =  getUrlVars()["id"];


$.getJSON('http://localhost/CavaOnline/json_variedades.php?id='+id, function(variedades) {


$.each(variedades, function(index, variedad) {

    $('#descripcion').append('<p>'+variedad[id - 1].descripcion+'</p>');
    $('#cata').append('<p>'+variedad[id - 1].cata+'</p>');
    $('#botonMarcas').append().attr("href", 'FichaTecnica.php?id=' + variedad[id - 1].id);


});

});

function getUrlVars() {

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

for(var i = 0; i < hashes.length; i++)

{

    hash = hashes[i].split('=');

    vars.push(hash[0]);

    vars[hash[0]] = hash[1];

}

return vars;

}

4

3 に答える 3

0

ページを正しく構築していないため (他の要素が読み込まれた後に JS を下部に含めることにより)、最初のページが正しく読み込まれていません。したがって、JavaScript はページが更新された後にのみ有効になります。その時点で JS は DOM に既に存在するからです。

基本的なページ マークアップは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
</head> 

<body> 
    ...content goes here...
</body>
</html>

また、ページを変更するカスタム JS (pageint など) を含める場合は、jQuery が読み込まれた後、jQuery Mobile が読み込まれる前に読み込む必要があります (その JS ファイルを 2 つの頭の間に挿入します)。

于 2012-09-25T22:01:33.390 に答える
0

ページを取り込む前に、pageinit コードを接続しておくことをお勧めします。したがって、最初のページの一部として JS を含めるようにしてください。

次のように paginit を接続します。

$(document).on('pageinit', '#pagina2', function(e) {
    /* TODO: Page 2 init code */
});
于 2012-09-25T20:26:23.150 に答える
0

同様の問題があり、リンクに data-ajax=false を追加して修正しました。

参照: http://api.jquerymobile.com/pagecontainer/

于 2014-11-14T02:40:53.757 に答える