Question

i creating a drag&drop cart in virtuemark. but i have a problem in this javascript jquery script and i spent all a day to find error in these codes:

function addToCart( jQueryitem ) {
        var jQuerylist = jQuery( "ul", jQueryhv_cart_items ).length ?
        jQuery( "ul", jQueryhv_cart_items ) :
            jQuery( "<ul class='gallery ui-helper-reset'/>" ).appendTo( jQueryhv_cart_items );

        //ajax add to cart
        var hvvid = jQueryitem.attr("id");
        var hvvcatid = jQueryitem.attr("catid");

        jQuery.get("index.php?quantity[]=1&addtocart=Thêm vào giỏ hàng&option=com_virtuemart&view=cart&task=add&virtuemart_product_id[]="+hvvid+"&virtuemart_category_id[]="+hvvcatid,function(data,status){
            //alert("Data: " + data + "\nStatus: " + status);
        });

        //@hoangvi: find product has the same id with hvvid
        //if founded update product quantity
        //otherwise add product to cart
        var total_li = jQuerylist.find("li").length;
        for (var i=0; i<total_li; ++i) {
            var current_li = jQuerylist.find("li")[i];
            //alert(jQuery('<div/>').append(current_li.clone()).html());
            var li_hidden = current_li.find("span.hv_hidden");
            //alert(jQuery('<div/>').append(li_hidden.clone()).html());
            var id = li_hidden.attr("id");
            //alert(id);
            if (id == hvvid) { //founded
                var quantity = li_hidden.attr('quantity');
                //alert(quantity);
                quantity = quantity+1;
                li_hidden.attr('quantity',quantity);
                return;
            }
        }

        //add product to cart
        var jQueryitem2 = jQuery('<li class="ui-widget-content ui-corner-tr"></li>');
        var jQueryitem_img = jQuery("<div />").append(jQueryitem.find( 'img' ).clone()).html();

        jQueryitem2.append( jQueryitem_img ).append('<span>SL: 1</span> ' )
        .append('<span class="hv_hidden" id="' + hvvid + '" quantity="1"> </span> ');
        jQueryitem2.appendTo( jQuerylist ).fadeIn(function() {
            jQueryitem2
                .animate({ width: "48px" })
                .find( "img" )
                    .animate({ height: "36px" });
        });
        jQueryitem2.append()
    //});
}

i think this problem in these codes:

        //@hoangvi: find product has the same id with hvvid
        //if founded update product quantity
        //otherwise add product to cart
        var total_li = jQuerylist.find("li").length;
        for (var i=0; i<total_li; ++i) {
            var current_li = jQuerylist.find("li")[i];
            //alert(jQuery('<div/>').append(current_li.clone()).html());
            var li_hidden = current_li.find("span.hv_hidden");
            //alert(jQuery('<div/>').append(li_hidden.clone()).html());
            var id = li_hidden.attr("id");
            //alert(id);
            if (id == hvvid) { //founded
                var quantity = li_hidden.attr('quantity');
                //alert(quantity);
                quantity = quantity+1;
                li_hidden.attr('quantity',quantity);
                return;
            }
        }

because it work normally when i delete the above code(but cannot update product quantity when i add two product has same id). i think this is a syntax error because it make jquery cant work normally. the html code like this:

<ul class="gallery ui-helper-reset">
                                <li class="ui-widget-content ui-corner-tr" style="width: 48px;"><img src="/chovietnam.com/images/stories/virtuemart/product/resized/vantech-vt-3500i_90x90.jpg" alt="vantech-vt-3500i" class="featuredProductImage" border="0" style="height: 36px;"><span>SL: 1</span> <span class="hv_hidden" id="24" quantity="1"> </span> </li><li class="ui-widget-content ui-corner-tr" style="width: 48px;"><img src="/chovietnam.com/images/stories/virtuemart/product/resized/lenovo-g460small_90x90.jpg" alt="lenovo-g460small" class="featuredProductImage" border="0" style="height: 36px;"><span>SL: 1</span> <span class="hv_hidden" id="21" quantity="1"> </span> </li><li class="ui-widget-content ui-corner-tr" style="width: 48px;"><img src="/chovietnam.com/images/stories/virtuemart/product/resized/designer-handbag-223093101833428290_90x90.jpg" alt="designer-handbag-223093101833428290" class="featuredProductImage" border="0" style="height: 36px;"><span>SL: 1</span> <span class="hv_hidden" id="19" quantity="1"> </span> </li></ul>

anyone can help me solve this problem, thanks

Answer 1

The error is in the lines below.

var current_li = jQuerylist.find("li")[i]' // This gets the DOM Object

var li_hidden = current_li.find("span.hv_hidden");

current_li is a DOM Object and not a jQuery Object

So current_li should be $(current_li)

Convert that into a jQuery Object before you use .find()