0

jQuery、JS、および AJAX を使用するのはかなり新しいので、ご容赦ください。

DB の結果に基づいてコンテンツを生成するダイナミックを作成しようとしました。これは、jQuery/JS で生成したい HTML コードです。

<li class="box">
            <img class="picture" src="images/HotPromo/tagPhoto1.png"/>
            <p class="name"><b>Name</b></p>
            <p class="address">Address</p>
        </li>

これは、クラスといくつかの HTML 要素を含むリスト項目です。

だから私はこのようなことを試しました:

$.ajax({
            url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
            type: "GET",
            error : function(jq, st, err) {
                alert(st + " : " + err);
            },
            success: function(result){
                if(result.length == 0)
                {
                    //temp
                    alert("not found");
                }
                else{
                    for(var i = 0; i < result.length; i++)
                    {
                        //generate <li>
                        $('#list').append('<li class="box">');
                        $('#list').append('<img class="picture" src="images/HotPromo/tagPhoto1.png"/>');
                        $('#list').append('<p class="name"><b>Name</b></p>');
                        $('#list').append('<p class="address">Address</p></li>');
                    }

                    var i=0;
                 //THIS PART IS ALREADY WORKING
                    $(".box").each(function(){
                            var name, address, picture = "";
                        if(i < result.length)
                        {
                            alert("generated");


                            name = result[i].name;
                            address = result[i].address;
                            picture = result[i].boxpicture;
                        }

                        $(this).find(".name").html(name);
                        $(this).find(".address").html(address);
                        $(this).find(".picture").attr("src", picture);
                        i++;
                    });
                }
            }
            });

AJAX & CSS はclass="box".

私はいくつかの調査と試行を行いましたが、$('#list').append('<li><a href="#header">Back to top</a></li>');簡単に次のようなことができます。しかし、私のコードが機能しない理由がわかりません。

注 :上記の HTML を手動でコーディングしようとしましたが、データを生成するための AJAX は既に機能しています。したがって、唯一の問題は現在追加されているようです。

どんな助けでも大歓迎です。ありがとう

4

1 に答える 1

1

.append() は文字列連結操作として機能しません。dom 構造を作成して .append() 呼び出しに渡す必要があります

試す

$('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');

しかし、コードは次のように単純でなければなりません

$.ajax({
    url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
    type: "GET",
    error : function(jq, st, err) {
        alert(st + " : " + err);
    },
    success: function(result){
        if (result.length == 0) {
            // temp
            alert("not found");
        } else {

            var $list = $('#list');
            $.each(result, function(idx, item) {
                $list.append('<li class="box box' + idx
                             + '"><img class="picture" src="'
                             + item.boxpicture
                             + '"/><p class="name">' + item.name
                             + '</p><p class="address">'
                             + item.address + '</p></li>');
            })
        }
    }
});
于 2013-07-27T07:10:50.000 に答える