Jquery Custom Content Scroller blanks Div content when populated with AJAX html

问题

I am using the Jquery Custom Content scroller from http://manos.malihu.gr/ which appears to be very popular. I initially tried to use it, then switched to Nicescroller which initially worked OK but then I hit a wall with its features and now am back here...

There is nothing complex that I am doing. The data comes from AJAX and is fed into a DIV and then the scroller is applied to the DIV on AJAX success. The DIV is actually used to display form error messages and the main HTML around it are Form fields. This I think is not relevant, but I want to give all the relevant info.

Here is the "success" portion of the AJAX call:

 success: function (data) {     
    $('#error_msg_div').html(data); 
    if (submit_status != "OK") //submit_status is a JS variable in data not set to OK  
    { //alert(..) here. At alert pause, error_msg_div shows AJAXed response data.
      //AJAXed response data has absolutely no reference to the DIV or the scroller 
      $("#error_msg_div").mCustomScrollbar({
        theme:"dark",
        scrollButtons:{
            enable:true
            },
        updateOnContentResize:true
      });  
    };
 },

Sample data from AJAX response (copied from firebug) is shown here:

  <div class='err_no' style='left:0px;top:5px;'>1:</div><div style='left:22px;top:5px;' class='err_msg'>First name must have 2 to 20 alphabets only.</div>
  <div class='err_no' style='left:0px;top:17px;'>2:</div><div style='left:22px;top:17px;' class='err_msg'>Middle initial can only be a single uppercase alphabet.</div>

So, what's the problem? AJAX response is OK. At the alert, the DIV is seen populated with the data. Just after that, the $("#error_msg_div").mCustomScrollbar({... blanks the div. There are no JS error messages shown in firebug.

I tried using the scroller using static data and it works fine. The only major difference is the use in my plain static HTML and here is that in the static test HTML file, the scroller was called as in:

 (function($){
     $(window).load(function(){
        $("#xxxxxxxxscroll_div").mCustomScrollbar({
          theme:"dark",
          scrollButtons:{
            enable:true
          },
        updateOnContentResize:true
      });
    });
  })(jQuery);

I have spent a lot of time on this. I like the scroller not to give up on it again. Once I figure this one out, I think the rest of the feature set will be easy to use. A follow up question, most likely not relevant, is when I "destroy" the scrollbar the mCustomScrollbar method on the Div still shows. This is just a side question... I am not a JS guru, but when the scroller doc states that the element is restored back to its pre-call status, I would have expected this method to go away. Right?

Thanks! I am relatively new to this forum. Please excuse me if the format or details are not appropriately worded.

来源：https://stackoverflow.com/questions/19345568/jquery-custom-content-scroller-blanks-div-content-when-populated-with-ajax-html

标签

jquery

ajax

scroller