ul标签使用jquery绑定错误

时间:2015-10-28 11:51:22

标签: javascript jquery asp.net

我正在开发一个asp.net应用程序,我必须使用ul标签。这是我的设计视图

<ul class="products_list" id="ulProductCart">                                       
        <li>
            <div class="clearfix">                  
                <img class="f_left m_right_10" src="" alt="">

                <div class="f_left product_description">
                    <a href="#" class="color_dark m_bottom_5 d_block"></a>
                    <span class="f_size_medium"></span>
                </div>

                <div class="f_left f_size_medium">
                    <div class="clearfix">
                        1 x <b class="color_dark">$99.00</b>
                    </div>
                    <button class="close_product color_dark tr_hover"><i class="fa fa-times"></i></button>
                </div>
            </div>
        </li>
</ul>

我正在使用jquery来绑定这个ul标签。以下是我的jquery代码绑定到ul标签

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        id = 1;
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/Default.aspx/BindCart",
            data: "{'UID':'" + id + "'}",
            dataType: "json",
            async: true,
            success: OnImageSuccess,
            error: OnImageError,
            failure: function (response) {
                alert('Fail');
            }
        });
        function OnImageSuccess(response) {                
            var ulProductCart = document.getElementById("ulProductCart");

            $.each(response.d, function (key, value) {
                ulProductCart.append("<li><div><img src=" + value.ImgProduct + " style=width:50px height:50px /><div><a>" + value.ProductName + "</a><span>" + value.ProductCode + "</div><div><div>1*<b>" + value.Price + "</b></div><button><i></i></button></div>  </div></li>");

            })
            alert('succeed');

        }
        function OnImageError(response) {
            alert(response.d);
        }
    });
</script>

我的网络方法是:

    [System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod(enableSession: true)]
    public static Products[] BindCart(string UID)
    {
        DataTable dt = new DataTable();
        List<Products> details = new List<Products>();            

        //HtmlAnchor a = new HtmlAnchor();
        //a.InnerHtml

        dt = new ProductImages().SelectProductsWithImagesByProductID(Convert.ToInt64(UID));

        foreach (DataRow dtrow in dt.Rows)
        {
            Products Products = new Products();
            Products.ProductCode = dtrow["ProductCode"].ToString();
            Products.ProductName = dtrow["ProductName"].ToString();
            Products.ImgProduct = dtrow["ImgProduct"].ToString();
            Products.Price = Convert.ToDecimal(dtrow["Price"].ToString());
            details.Add(Products);
        }
        return details.ToArray();
    }

我上面的代码从数据库中获取了相应的数据,但是当它绑定ul标签时,dows没有得到bind.Also它转到onImageSuccess Mrthod在jquery中使用但我的ul标签没有得到绑定。

1 个答案:

答案 0 :(得分:-1)

以下行中的问题

var ulProductCart = document.getElementById("ulProductCart"); // not a jQuery object

append是一个jQuery函数,所以你需要使用jquery选择器。

使用它:

var ulProductCart = $("#ulProductCart");

示例:

function OnImageSuccess(response) {                
               // var ulProductCart = document.getElementById("ulProductCart");
     var ulProductCart = $("#ulProductCart"); 
                $.each(response.d, function (key, value) {
                    ulProductCart.append("<li><div><img src=" + value.ImgProduct + " style=width:50px height:50px /><div><a>" + value.ProductName + "</a><span>" + value.ProductCode + "</div><div><div>1*<b>" + value.Price + "</b></div><button><i></i></button></div>  </div></li>");

                })
                alert('succeed');

            }