1

Jquery を使用して以下のモバイル リストビューを作成しましたが、問題なくレンダリングされています。私が助けてほしいのは、特定のリスト要素をクリックしたときです。現在、新しいページに移動し、レストラン ID を表示するように設定しています。私が試してみたいことは、クリックされた特定のリストビューエントリの同じ情報が新しいページにレンダリングされることです。つまり、クリックされたリスト要素で以前に持っていたすべての情報が新しいページにレンダリングされます。簡単な段落。この動的なリストビューに頭を悩ませようとしているのは、私が問題を抱えているところです。誰でも助けてもらえますか？私は本当に感謝しています - データベース情報は完全に読み取られています!

<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>

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

    <style>
        img.fullscreen {
            max-height: 100%;
            max-width: 100%;
        }
        </style>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/test/json3.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.restaurantid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
                $(document).on('click', '#'+dat.restaurantid, function(event){  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    {
                        listObject.itemID = $(this).attr('id'); 
                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
        $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID);
    });

    var listObject = {
        itemID : null
    }    
</script>
</head>     
<body>    
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Current Deals</h1>
    </div>

    <div data-role="content">
        <div class="content-primary">
            <ul id="list" data-role="listview" data-filter="true"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li>
                <li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li>
            </ul>
        </div>
    </div>
</div>

<!--New Page --> 

<div data-role="page" id="index2">
<div data-role="header">
        <h1> Find A Deal </h1> 
    </div>

    <div data-role="content">
        <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal </a>
    </div>

    <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="#index" data-icon="grid">My Deals</a></li>
            </ul>
        </nav>
    </footer>   
</div>
</body>
</html>
4

2 に答える 2

0

投稿したコードに基づく以下の例では、選択した ID がページ インデックスからページ インデックス 2 に渡されます。

<html>
    <head>
        <meta charset="utf-8" />
        <title>Find A Deal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style>
            img.fullscreen {
                max-height: 100%;
                max-width: 100%;
            }
        </style>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#index', function () {
                $("#list").empty();
                for (var i = 0; i < 5; i++) {
                    $("#list").append (
                        $(["<li><a id='id_",i ,"'><h1>H1_label_",i,"</h1><p>P_label_",i,"</p></a></li>"].join("")).
                        on('click', ['#id_',i].join (""), function(e){  
                            if(e.handled !== true) {
                                listObject.itemID = this.id;                                
                                $.mobile.changePage( "#index2", { transition: "slide"} );
                                e.handled = true;
                            }
                        })
                    );
                }
                $("#list").listview('refresh');
            });

            $(document).on('pagebeforeshow', '#index2', function () {

                //selected id on page transition
                alert(['selected id: ',listObject.itemID].join(""));
            });

            var listObject = {
                itemID: null
            }
        </script>
    </head>

    <body>
        <div data-role="page" id="index">
            <div data-role="header" data-position="fixed">
                 <h1>Current Deals</h1>

            </div>
            <div data-role="content">
                <div class="content-primary">
                    <ul id="list" data-role="listview" data-filter="true"></ul>
                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li>
                            <a href="http://localhost/findadeal/index.html" data-icon="home">Home</a>
                        </li>
                        <li>
                            <a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--New Page -->
        <div data-role="page" id="index2">
            <div data-role="header">
                 <h1> Find A Deal </h1> 
            </div>
            <div data-role="content">
                <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal</a>
                <p></p>
            </div>
            <footer data-role="footer" data-position="fixed">
                <nav data-role="navbar">
                    <ul>
                        <li>
                            <a href="index.html" data-icon="home">Home</a>
                        </li>
                        <li>
                            <a href="#index" data-icon="grid">My Deals</a>
                        </li>
                    </ul>
                </nav>
            </footer>
        </div>
    </body>
</html>
于 2013-02-13T20:04:15.433 に答える