locked
Dynamicaly created html not rendering in jquery RRS feed

  • Question

  • User-257070954 posted

    In my application i am listing all product available in that shop. For that i am doing loop products array. In between checking customer

    already added that product to his cart or not. If he already added i want to give two buttons +, -  to add or minus product from cart else i am giving one button to Add to cart.

    For that i am looping one more array that contained product he added to cart.But here my problem is buttons not rendering to screen and no error also.
    When i do debug its going to those part as expected. But these those buttons not showing, remaining html rendering as expected. Below giving my code 


    $.each(obj, function (key, value) {
                    
                    ProductHtml += "<div id=divParenList" + value.Id + ";>"
                        + "<span id = spnProdListProdName" + value.Id + ">" + value.ProductName + "</span> "
                        + "<span id = spnProdListBarnd" + value.Id + ">" + value.Brand + "</span>"
                        + "<span id = spnProdListPrice" + value.Id + ">" + value.Price + "</span> <br>"
                        + "<span id = spnProdListQty" + value.Id + " > <input type=text id=txtProdListQty" + value.Id + "  /></span> <br>"
                    $.each(CartArray, function (Index, Cartvalue) {
                        if (parseInt(Cartvalue.Id) == value.Id) {
                               console.log(" product available")
                                + "<input type=button id=btnAddProduct-" + value.Id + " value = + onClick =  ChangeQty(value.Id, BookedQty)/>"
                                +"<input type=button id=btnReduceProduct-" + value.Id + " value =-  onClick =  ChangeQty(value.Id, BookedQty) />"
                        } else {
                               + "<input type=button id=btnAddCart-" + value.Id + " value = Add onClick = AddToCart(this.id) />"
                               console.log("no product")                    }
                    })
                        + "<input type=hidden id=hdnProdListProductId" + value.Id + " value = " + value.Id + " />"
                        + "</div > ";
                })

    Friday, June 19, 2020 9:55 AM

All replies

  • User1535942433 posted

    Hi binustrat,

    Accroding to your description and codes, as far as I think,you need to add ProductHtml to your  page such as form.

    Just like this:

    $("#form1").html(ProductHtml);

    Best regards,

    Yijing Sun

    Monday, June 22, 2020 8:37 AM
  • User-474980206 posted

    you have a couple error. your nested $.each() is just auto inc some strings. the code after does the same. You probably wanted to concat all the string together. try:

    $.each(obj, function (key, value) {
                    
                    ProductHtml += "<div id=divParenList" + value.Id + ";>"
                        + "<span id = spnProdListProdName" + value.Id + ">" + value.ProductName + "</span> "
                        + "<span id = spnProdListBarnd" + value.Id + ">" + value.Brand + "</span>"
                        + "<span id = spnProdListPrice" + value.Id + ">" + value.Price + "</span> <br>"
                        + "<span id = spnProdListQty" + value.Id + " > <input type=text id=txtProdListQty" + value.Id + "  /></span> <br>";
                    $.each(CartArray, function (Index, Cartvalue) {
                        if (parseInt(Cartvalue.Id) == value.Id) {
                               console.log(" product available")
                                ProductHtml  += "<input type=button id=btnAddProduct-" + value.Id + " value = + onClick =  ChangeQty(value.Id, BookedQty)/>"
                                +"<input type=button id=btnReduceProduct-" + value.Id + " value =-  onClick =  ChangeQty(value.Id, BookedQty) />";
                        } else {
                               ProductHtml += "<input type=button id=btnAddCart-" + value.Id + " value = Add onClick = AddToCart(this.id) />";
                               console.log("no product")                    }
                    })
                    ProductHtml += "<input type=hidden id=hdnProdListProductId" + value.Id + " value = " + value.Id + " />"
                        + "</div > ";
                })

    Monday, June 22, 2020 3:25 PM