Search code examples
jqueryajaxjquery-mobilepage-init

JQuery Mobile - Script being duplicated on page

I have recently started experimenting with jQuery mobile on a little project and have run into a problem. I'm very much a newbie using this framework and would appreciate any advice you can offer

The script in question that is causing the trouble is a custom scrollbar http://manos.malihu.gr/jquery-custom-content-scroller/

The idea being that when a menu item is clicked, it triggers a slide in panel which contains the custom scrollbar. The problem is that when I load the site for the first time, the scrollbar shows fine. If I then navigate to another page and return to the first page, the scrollbar seems to have duplicated. If I repeat the process again, then it appears a third and fourth time.

This issue seems to be occurring only on desktop, where AJAX loading is being used. And its only on the 'first' page that its occurring. Ideally I want to keep AJAX loading if I can, but this seems to be the source of the problem because using rel=""external" on links seems to solve the problem. Obviously that forces a page reload, which I'd like to avoid if possible

<!DOCTYPE html>
<html>
<head>

//containing Jquery mobile js and css as well as bootstrap and a few smaller extras

</head>   

<body>

<div data-role="page" class="padded-bottom" id="member-page">

//slide in panels are included here

<div data-role="header" class="top-bar">

//contains the menu

</div><!-- /header -->

<section data-role="content" class="mid" style="height:auto;">

//page content

</section>

//footer content

<script>

$(".content-scrollbar").mCustomScrollbar({
advanced:{updateOnContentResize:true}
}); 

</script>

//other minor footer scripts

</div><!-- page -->

</body>
</html>`

This is a basic layout of my 'first page'. However subsequent pages on the site are layed out near enough identical and this is where I think I maybe going wrong. When I navigate away from the 'first' page and return there, the loading spinner no longer displays, assuming that page may have been cached in some way, I'm not sure but that's when the problem occurs.

Sorry if I've rambled on but I'd really appreciate some advice on this, its driving me insane and I'd love to find away around it. Thanks

Solution

  • Please try :

    $(".content-scrollbar").mCustomScrollbar("update");

    to update the ui after ajax

    or perhaps

    $(".content-scrollbar").mCustomScrollbar("destroy");

    before initializes the plugin

    I hope i could helped

    Edit 1

    if($(".mCustomScrollbar").length > 0){
    $(".content-scrollbar").mCustomScrollbar("destroy");
}


$(".content-scrollbar").mCustomScrollbar({
    advanced:{updateOnContentResize:true}
});