0

私がしたいのは、クリックしたオプションに応じて #newPage にコンテンツを動的にロードしたい JQuery Mobile を使用することです。以下は、私が試したコードで、#newPage に移動しますが、コンテンツは読み込まれません。私はできるだけ多くの情報を提供しようとし、何をしたいのかを行ごとにコメントしました。

サンプル XML:

<parentOption>
    <option1>
        <name>Stuff</name>
    </option1>
    <potion2>
        <name>More Stuff</name>
    </potion2>
    <option3>
       <name>Even More Stuff</name>
    </option3>
</parentOption>

Ajax 経由で XML ファイルに接続したとします。

<script>
    function parseXML(xml) { //Parse the XML
        $('selected').click(function(e) { //Once the link is clicked
            var selectedValue = $(this).value(); //Find the value of the clicked link
            e.preventDefault(); //Refresh the new page
            $(xml).find(selectedValue).each(function() { //take the XML info and select all of the elements equaling to the value of the selected link
                var nameValue = $(this).parent(); //Find the parent of the selected element
                $('#dynamicList').append('<li>' + $(nameValue).child('name').text() + '</li>'); //Write out the list on the new page
            });
            $('#dynamicList').listview('refresh');
        });
     }
 </script>
 <div data-role="page" id="home">
     <div data-role="content">
         <ul data-role="listview">
             <li><a class="selected" value="option1" href="#newPage">Option 1</a></li>
             <li><a class="selected" value="option1" href="#newPage">Option 2</a></li>
             <li><a class="selected" value="option1" href="#newPage">Option 3</a></li>
         </ul>
     </div>
</div>
<div data-role="page" id="newPage">
    <div data-role="content">
        <ul id="dynamicList" data-role="listview">

        </ul>
    </div>
</div>

最初のリンクをクリックした後の目的の出力は次のとおりです。

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview">
            <li><a class="selected" value="option1" href="#newPage">Option 1</a></li>
            <li><a class="selected" value="option1" href="#newPage">Option 2</a></li>
            <li><a class="selected" value="option1" href="#newPage">Option 3</a></li>
        </ul>
    </div>
 </div>
 <div data-role="page" id="newPage">
     <div data-role="content">
         <ul id="dynamicList" data-role="listview">
             <li>Stuff</li>
         </ul>
     </div>
</div>
4

1 に答える 1

1

私はあなたに実用的な例を作りました。ここを見てください: http://jsfiddle.net/Gajotres/AzXdT/。また、警告を与える必要があります。この例は、他のドメインから xml をロードできないため、jsFiddle でのみ機能します。ドメイン (ホスティング サーバー) から xml をロードする場合は、次のコードを使用します。

$.ajax({
    type: "GET",
    url: "sites.xml",
    dataType: "xml",
    success: function(xml) {

    }
});

可能であれば、XML の代わりに JSON を使用してください。理由は、複雑な XML はサイズが大きくなり、多くのデータ オーバーヘッドが発生する可能性があるためです。JSON は、この問題を解決するためのアイデアで作成されています。試してみたい場合は、別の例を作成しました: http://jsfiddle.net/Gajotres/8uac7/。この例はどこでも使用できるので、自由に遊んでください。

于 2012-12-16T10:27:01.387 に答える