jQuery scrollbar plugin not working on Ajax loaded content

Question

The problem is this:

I have a simple, two fields form which I submit with Ajax. Upon completion I reload two div's to reflect the changes.

Everything is working perfect except a jQuery plugin. It's a simple plugin that can be called with simple

function(){
    $('.myDiv').scrollbars();
}

It's simple and easy to use, but it doesn't work on Ajax loaded content. Here is the code I use to post form and reload div's:

$(function() {
    $('#fotocoment').on('submit', function(e) {
        $.post('submitfotocoment.php', $(this).serialize(), function (data) {
            $(".coment").load("fotocomajax.php");
        }).error(function() {

        });
        e.preventDefault();
    });
});

I've tried creating a function and calling it in Ajax succes:, but no luck. Can anyone show me how to make it work ? How can that simple plugin can be reloaded or reinitialized or, maybe, refreshed. I've studied a lot of jQuery's functions, including ajaxStop, ajaxComplete ... nothing seems to be working or I'm doing something wrong here.

have you added jquery.scrollbars.css file on your web page correctly? — vijayP, Aug 13 '13 at 13:05
You're not getting the point.Plugin is working smoothly but not when I reload the content with Ajax. — Lucian Minea, Aug 13 '13 at 16:27

score 2 · Answer 1 · answered Aug 13 '13 at 13:59

2

If you're loading elements dynamically after DOM Document is already loaded (like through AJAX in your case) simple binding .scrollbars() to element won't work, even in $(document).ready() - you need to use "live" event(s) - that way jQuery will "catch" dynamically added content:

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler); // jQuery 1.7+

Source: jQuery Site

answered Aug 13 '13 at 13:59

Michał Prajsnar

662
3
8

I checked that myself, but I still don't understand how to implement it in my current code. I understand the usage of the function, but I don't know where or how to put it inside the code. If you could give me something more on that, I would really appreciate. – Lucian Minea Aug 13 '13 at 15:44
@LucianMinea Try this: `$('document').delegate('.myDiv', 'change', function() { $(this).scrollbars(); });` – Michał Prajsnar Aug 14 '13 at 13:40
@LucianMinea ... although I'm not sure if 'change' event will work on div data change, so You may want to check this topic out: [link](http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery) – Michał Prajsnar Aug 14 '13 at 13:51
Prajsnar I've tried that, placed it in main document, on .ready() event, in success function of .post() and even in the file that is actually loaded with .load(). Nothing works :( . If you can look again at the main code, it's smaller now. – Lucian Minea Aug 14 '13 at 15:14

score 1 · Answer 2 · answered Aug 14 '13 at 07:52

Even if I am totally against using such plugins, which tries to replicate your browser's components, I'll try to give some hints.

I suppose you are using this scrollbars plugin. In this case you may want to reinitialize the scrollbars element, and there are many ways to do this. You could create the element again like in the following example

<div class="holder">
  <div class="scrollme">
    <img src="http://placekitten.com/g/400/300" />
  </div>
</div>

.....

$('.scrollme').scrollbars();

...

fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
    $('.holder').html(fakedata);
    $('.scrollme').scrollbars();
});

If you want to update the contents of an already initialized widget instead, then things gets more complicated. Once your plugin initialize, it moves the content in some custom wrappers in order to do its 'magic', so make sure you update the correct element, then trigger the resize event on window, pray and hopefully your widget gets re-evaluated.

If it doesn't help, then try to come up with some more details about your HTML structure.

Now I understand the procedure. I've changed the code, actually I managed to make it smaller, after 2 hours of reading and testing and I've updated the original post. If you can take a look now, and give me a hint about where can I implement that fake response it will be great. I just want to reinitialize those scrollbars, that'a all. The .coment div is the one I need those scrollbars reinitialized. — Lucian Minea, Aug 14 '13 at 14:35

score 1 · Answer 3 · edited Aug 16 '13 at 17:52

If I understand you correctly, try this:

var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');

$(function () {
    $('#fotocoment').on('submit', function (e) {
        $.post('submitfotocoment.php', $(this).serialize(), function (data) {
            $(".coment").load("fotocomajax.php");
            api.reinitialise();
        }).error(function () {

        });
        e.preventDefault();
    });
});

reinitialise - standart api function, updates scrolbars.

score 1 · Accepted Answer · answered Aug 16 '13 at 15:26

I want to thank everyone of you who took their time to answer me with this problem I have. However, the answer came to me after 4 days of struggle and "inventions" :), and it's not a JS or Jquery solution, but a simple logic in the file.

Originally, I call my functions and plugins at the beginning of the document in "head" tag, like any other programmer out here (there are exceptions also ).

Then my visitors open my blog read it and they want to post comments. But there are a lot of comments, and I don't want to scroll the entire page, or use the default scroll bars, simply because they're ugly and we don't have cross browser support to style that, just yet.

So I .post() the form with the comment, and simply reload the containing all of them. Naturally .scrollbars() plugin doesn't work. Here come the solution.

If I put this :

<script>$('.showcoment').scrollbars();</script>

in the beginning of my loaded document (with load() ), will not work, because is not HTML and it's getting removed automatically. BUT !!! If i do this:

<div><script>$('.showcoment').scrollbars();</script></div>

at the same beginning of loaded document, MAGIC .... it works. The logic that got me there I found it in the basics of javascript. If your script is inside an HTML element, it will be parsed without any problem.

Thank you all again, and I hope my experience will help others.

jQuery scrollbar plugin not working on Ajax loaded content

4 Answers4