1

検索エンジン用のモバイル インターフェイスを構築しています。メインの CGI スクリプトは、結果のリストを として返します<ul>。次に、各リスト項目を反復処理し、別の CGI スクリプトに Ajax リクエストを送信して詳細情報を収集し、ネストされた として挿入する JQM スクリプトを作成します<ul>。メカニックは機能しますが、ディスプレイが期待どおりに表示されないという問題があります。

最初に私のコードを示し、次に私が期待するもの、最後に実際に見ているものを示します。

これは、メインの CGI スクリプトが生成する HTML の切り捨てられたバージョンです (Firebug からのものなので、jQuery がそれをうまく処理した後)、実際には多数のリスト要素がありますが、図として 1 つを示しています。 :

<ul id="searchresults" data-role="listview" class="ui-listview">
    <li id="64076268" class="result_item ui-li ui-li-static ui-btn-up-b ui-li-has-count">
        <a href="#indexPage&amp;ui-page=searchresults-0">
            <h1 class="ui-li-heading">Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
            <p class="creator ui-li-desc">Tom Christiansen brian d foy; Larry Wall; Larry Wall</p>
            <p class="ui-li-desc">c2012</p>
            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">2 versions</span>
        </a>
    </li>
</ul>

要素は<a>jQuery によって生成されています。理由がわかりません。私が期待しているのはこれです：

<ul id="searchresults" data-role="listview" class="ui-listview">
    <li id="64076268" class="result_item ui-li ui-li-static ui-btn-up-b ui-li-has-count">
        <h1 class="ui-li-heading">Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
        <p class="creator ui-li-desc">Tom Christiansen brian d foy; Larry Wall; Larry Wall</p>
        <p class="ui-li-desc">c2012</p>
        <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">2 versions</span>
        <ul class="frbr">
            <li>
                <h1>Programming Perl</h1>
            </li>
            <li>
                <h1>Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
            </li>
        </ul>
    </li>
</ul>

私が理解しているように、これにより、ネストさ<ul>れた が、ユーザーが親をクリックしたときに表示される別のページとしてレンダリングされるはず<li>です。それは確かにリストビューのjQueryドキュメントがそれを説明する方法です。

ネストされたリストを取得して親に追加するjQueryは次の<li>とおりです。

$(document).ready(function(){

    $(".result_item").each(function() {

        var me = $(this);

        $.ajax({
            type: "GET",
            url: "/m/ajax/get_frbrgroup_details.cgi",
            data: { frbrgroup: me.attr("id") },
            datatype: "text",
            cache: false,
            success: function(reply) {
                me.append(reply);
            },
            complete: function() {
                $("#searchresults").listview("refresh");
            }

        })
    });
});

そして最後に、私が期待しているものと実際に見ているもののスクリーンショット:

期待される

私が実際に見ているもの

私が行ったすべての調査から、私はすべてを正しく行っていると思うので、これに光を当てることができる人はいますか? ありがとう ：）

4

1 に答える 1

0

ついにこれを理解した。JQMが最初にレンダリングされたときにページを処理するときに、ネストされたページを親から移動するという事実を見逃してい<ul>ました。そのため、親<li>のlistview（ "refresh"）と同様に、追加でページをターゲットにしようとして失敗しました。<ul>。そこで、ネストされ<ul>たIDに一意のIDを指定して、JQMがそれを親から移動した後で<li>も、追加と更新でターゲットに設定できるようにします。うまくいくようです！:)

于 2012-11-12T09:43:22.677 に答える