CODEWITHSUNDEEP
javascriptjqueryajax
Tyler Durden
Tyler Durden

Reputation: 93

mCustomScrollbar not working on jquery append

In my html i am trying to update the cart data via ajax calls. In html

<div id="cart_list"></div>

And inside script

$(document).ready(function(){
  jQuery.get("/show_header/",
          function(data) {
          show_cart(data)
         });

})

And this is the show_cart function

function show_cart(data){
     $("#cart_list").append(
        '<div  class="dropdown  cartMenu ">'+
        '<a href="#" class="dropdown-toggle" data-toggle="dropdown"></a>'+
        '<div class="dropdown-menu col-lg-6 col-xs-12 col-md-6 " style="width: 184%;">'+
        '<div id="scroll_cart" class="w100 miniCartTable scroll-pane">'+
        '<table>'+
        '<tbody>'+
        cart_string+
        '</tbody>'+
        '</table>'+
        '</div>'+
        '<div class="miniCartFooter text-right">'+
        '<h3 class="text-right subtotal"> Subtotal:₹ '+ data.header_data.price +' </h3>'+
        '<a class="btn btn-sm btn-danger" href="/cart/"> <i class="fa fa-shopping-cart"> </i> VIEW CART </a>'+
        '<a href="/payment/" class="btn btn-sm btn-primary"> CHECKOUT </a> </div>'+
        '</div>'+
        '</div>'
      )
    }

(cart_string is generated inside function show_cart. But i removed those steps since i think its not relevant here).

But the scrollbar is not working anymore. I tried the other answers in this section and nothing seems to work.

I tried giving the div with the scroll class an id "scroll_cart" and tried the following line inside show_cart function. But no change. 

$("#scroll_cart").mCustomScrollbar("update");

What is the right way to enable scrollbar for the div?

Upvotes: 1

Views: 5932

Answers (3)

Deepa Rokhade
Deepa Rokhade

Reputation: 621

please make sure in your HTML file you have included jquery.mCustomScrollbar.concat.min.js

Upvotes: 0

Ali Rasouli
Ali Rasouli

Reputation: 1911

please see this reference

codes:

  $('#scroll_cart').mCustomScrollbar("destroy");
  $('#scroll_cart').append('some text');
  $('#scroll_cart').mCustomScrollbar();

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

You need to use $("#scroll_cart").mCustomScrollbar("update"); after creating the elements.

ie, after show_cart() function.

Because the element $("#scroll_cart") should be present on the dom at the time of binding.

$(document).ready(function() {
    jQuery.get("/show_header/",
        function(data) {
            show_cart(data);
            $("#scroll_cart").mCustomScrollbar("update");
        });

})

Upvotes: 2

Related Questions