0

この Jquery リスト要素は、コーディングを独学するために使用しているサンプル アプリで使用されています。リストにさまざまな値がレンダリングされています。問題は、ユーザーが選択したリストの項目を見つけようとしているということです。その結果、データベースに戻って、その項目に関連するすべての情報を画面に表示することができます。

これまでに試した方法は次のとおりです。

<script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/test/login/json4.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
                $(document).on('click', '#'+dat.dealid, 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>

すべてのリスト項目から Json 配列が作成され、画面にレンダリングされます。私がなんとかしたことは、ユーザーが選択を行うと、新しいページ (インデックス 2) に移動し、インデックス 2 では、選択された項目に関連付けられているデータベース フィールド ID が示されます。

ここ数日、そのID番号を取得してデータベース側に戻す方法を見つけようとしてきましたが、うまくいきませんでした.新しいコードを追加すると、元のリストが壊れてしまいます.または何も起こらない！

誰かが私を助けることができれば、本当に感謝しています! 私の立場にあるほとんどの人が学ばなければならないコアレッスンのように思えるので、ここから何をすべきか教えてくれる人がいれば、それは素晴らしいことです!

助けてくれてありがとう！皆さん、良い週末を！

4

2 に答える 2

1

次のようにする必要があります。

$(document).on('pagebeforeshow', '#index', function(){
    $("#list").empty();
    var url="http://localhost/ce/json4.php";
    $.getJSON(url,function(json){
        //loop through deals                
        $.each(json.deals,function(i,dat){
            $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>");
            $(document).on('click', '#'+dat.dealid, function(event){  
                if(event.handled !== true) // This will prevent event triggering more then once
                {
                    dealObject.dealID = $(this).attr('id'); 
                    dealObject.dealName = $(this).find('h6').html();
                    dealObject.description = $(this).find('h5').html(); 

                    $.mobile.changePage( "offer.php", { transition: "slide"} );
                    event.handled = true;
                }
            });            
        });
        $("#list").listview('refresh');
    });
});

$(document).on('pagebeforeshow', '#index2', function(){       
    $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
    $('#index2 [data-role="content"]').find('input#name').val(dealObject.dealName);
    $('#index2 [data-role="content"]').find('input#did').val(dealObject.dealID);


});

var dealObject = {
    dealID : null,
    dealName : null,
    description: null
}
于 2013-02-20T14:46:23.223 に答える
0

localStorageを使用してitemIDを一時的に保存し、次のページで取得できます。

localStorage['itemID'] = $(this).attr('id');

次に、＃index2でそれを取得します。

itemID = localStorage['itemID'];
于 2013-02-17T16:15:28.363 に答える