4

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+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><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
                    {
                        dealObject.dealID = $(this).attr('id'); 
                        dealObject.restaurantid = $(this).attr('data-restaurantid');
                        dealObject.name = $(this).find('h1').html(); 
                        dealObject.image = $(this).attr('data-image');
                        //dealObject.dname = $(this).find('input').html();
                        dealObject.dname = $(this).find('input').val();

                        $.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' + dealObject.dname);
        $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
        $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
        //$('#index2 [data-role="content"]').find('#description').html(dealObject.dname);
        $('#index2 [data-role="content"]').find('#name').html(dealObject.dname);
    });

    var dealObject = {
        dealID : null,
        restaurantid : null,
        name : null,
        image : null,
        dname : null
    }    
</script>

以下は、コンテンツ div の最後までの Index 2 html の抜粋です。

 <div data-role="page" id="index2">

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

    <div data-role="content">

        <?php
    if( !isset( $_SESSION ) ){
     session_start();
        }

    if( isset( $_SESSION['username'] ) ){
        echo ".";
        } ?>   

        <label for="name">Deal Name:</label>
        <input type="text" value="" name="name" id="name"/>
        <label for="desc">Description</label>
        <input type="text" value="" name="desc" id="desc"/>  
        <a data-role="button" id="submit-button" data-theme="b">Submit</a>

        <img src="" width="100px" height="100px" id="deal-img">
        <h1 id="title"></h1>
        <h3 id="description"></h3>
        <p id="name"></p>
       </div>
4

3 に答える 3

0

申し訳ありませんが、私はそれを十分によく見ていませんでした....おそらく、複数の入力タイプ=「テキスト要素」があるためです...これは、複数の要素に一致することを意味します。私の理論を確認するには、これを試すことができるはずです...

dealObject.dname = $(this).find('input').eq(0).val();

.eq(0) を追加することにより、id='name' を持つ最初の input type='text' 要素に対してのみ実行する必要があります

于 2013-02-19T00:39:04.383 に答える
0 
dealObject.dname = $(this).find('input').html();

input type='text' 要素の innerHTML に設定していますか? input type='text' 要素の innerHTML は、常に空の文字列として返されます。

.val() を使用する必要があると思います

dealObject.dname = $(this).find('input').val();
于 2013-02-18T23:46:28.323 に答える
0

問題が見つかりました。name は js オブジェクト内の変数名として使用できません。

変化する：

var dealObject = {
    dealID : null,
    restaurantid : null,
    name : null,
    image : null,
    dname : null
}

このようなものに：

var dealObject = {
    dealID : null,
    restaurantid : null,
    shortname : null,
    image : null,
    dname : null
}

これも使用します：

$('#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);
于 2013-02-19T13:10:59.120 に答える