CODEWITHSUNDEEP
jqueryajax
AkilaH
AkilaH

Reputation: 43

jQuery mCustomScrollbar not working on ajax content

    $(window).load(function(){
                $("#content_1").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });

// ajax code
function beauty_of_ceylon() {
  $('.content-text').html('<p style="position:absolute;"><img src="images/ajax-loader.gif" /></p>');
  $('.content-text').load("packages/beauty-of-ceylon.php");
}

Upvotes: 3

Views: 32108

Answers (8)

Dishan TD
Dishan TD

Reputation: 8748

I did this:

Destroy it when ajax before send and clear your div. Please check comments:

$(document).ready(function(){
    $(".YOUR-CONTENT-DIV").mCustomScrollbar({
        theme:"dark",
    });
    
    
    $.ajax({
        url: "YOUR AJAX URL",
        type: "post",
        data: data,
        beforeSend: function() {
            $(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy"); //Destroy
            $('.YOUR-CONTENT-DIV').html('<div class="loading">Loading ...</div>'); //clear html because it will show normal scroll bar
        },
        success: function(data) {
            $('.YOUR-CONTENT-DIV').html(data);
        },
        complete: function () { 
            $(".YOUR-CONTENT-DIV").mCustomScrollbar({
                theme:"dark",
            });               
        }
    }); 
});

Upvotes: 12

Ali Rasouli
Ali Rasouli

Reputation: 1911

please see this reference

codes:

  $('#content_1').mCustomScrollbar("destroy");
  $('#content_1').append('some text or another things');
  $('#content_1').mCustomScrollbar();

Upvotes: 1

Amit-Rlogical
Amit-Rlogical

Reputation: 21

First of destroy the mCustomScrollbar.

$(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy");

Put the your HTML data

$('.YOUR-CONTENT-DIV').html('HTML');

Create a mCustomScrollbar for div

setTimeout(function() {

$(".YOUR-CONTENT-DIV").mCustomScrollbar({
    theme:"dark"
  });
}, 300);

Upvotes: 1

dud3
dud3

Reputation: 419

Simply Embed the script into the JSON/AJAX call content, such as:

1.JSON/AJAX back-end script (myscript.vendor, such as Ruby, PHP...)

var myHTMLContent = '<script>
    $(".popover-n-content").mCustomScrollbar({
        theme:"dark",
        scrollInertia:100
    });
    </script>
    <div>

    <-- Manipulate -->
    <other_html_tags>
    ...
    </other_html_tags>
    </div>';

2.Calling the script "myscript.vendor"

$.ajax({
    url: "/get/myscript.vendor",
    type: "post",
    dataType: "html",
    success: function (data) {
        $('#data').html(data);
    }
});

Upvotes: 1

user2320561
user2320561

Reputation: 44

$('.content-text').load("packages/beauty-of-ceylon.php", function () {
    $("#content_1").mCustomScrollbar({
        scrollButtons:{
            enable:true
        }
    });
    $content = '<button id="update" onclick="$('#content_1').mCustomScrollbar('update');" style="display:none"></button>';
    $('.content-text').append($content);
    setTimeout("$('#update').click();",10);
});

It work for me :D

Upvotes: 2

Kishorevarma
Kishorevarma

Reputation: 956

when you load pages through ajax window.load wont be called , so mCustomScrollBar is not initialized.when page loads by ajax document ready will be triggered.

try the below code.

$(document).ready(function(){
    $("#content_1").mCustomScrollbar({
                scrollButtons:{
                    enable:true
                }
            });
});

Upvotes: 0

Kristjan O.
Kristjan O.

Reputation: 914

It's been a while so I'm guessing that you found a solution already. If not, your code is correct, to one point. After you do a .load, use it's callback function to initiate this command:

$(selector).mCustomScrollbar("update");

On their website it says that whenever you update the content, you must call this function so the mCustomScrollbar recalculates height of content, scrollbar etc.

http://manos.malihu.gr/jquery-custom-content-scroller/

Upvotes: 2

Byron
Byron

Reputation: 51

I believe .load() is asynchronous, which means it continues running the script during the .load() call. So you have to call the mCustomScrollbar in the callback function, otherwise the content won't be there yet. So try this

$('.content-text').load("packages/beauty-of-ceylon.php", function () {
    $("#content_1").mCustomScrollbar({
        scrollButtons:{
            enable:true
        }
    });
});

Upvotes: 5

Related Questions