Help getting repaint to work on ajax added content

[sincero]

Im trying to figure out how to get the scroll bar to 'repaint' after content is added to my container via ajax. Im working with wordpress and I used the line:

$('#mydiv').scrollbar('repaint');

right after the ajax call, but i get nothing. think you could help me out?

Thanks :)

[thomd]

Hi sincero,

actually a .scrollbar('repaint') should do the job.
What do you mean with "... right after the ajax call ..."? The repaint-callback needs to be within the success callback.
If you send me the code snippet you are using or a link to your site, I'm going to review it.

Regards,
Thomas

[sincero]

Hello & thanks for replying. I think I figured it out, but in my opinion, it's sloppy lol. I kinda worked around it with an onmpuseout repaint. But like you said, I want it to do it after the success of the added content.

I'm going to send you the Ajax part of my Wordpress/buddypress function that's adding the dynamic content right now

Thanks for this, I really appreciate it

On Nov 13, 2011, at 6:38 PM, [email protected] wrote:

Hi sincero,

actually a .scrollbar('repaint') should do the job.
What do you mean with "... right after the ajax call ..."? The repaint-callback needs to be within the success callback.
If you send me the code snippet you are using or a link to your site, I'm going to review it.

Regards,
Thomas

---

Reply to this email directly or view it on GitHub:
#17 (comment)

[sincero]

its a total of 3 parts i'll need it in each is for a diferent call:

/* #1 Load more updates at the end of the page */
if ( target.parent().hasClass('load-more') ) {
jq("#content li.load-more").addClass('loading');

if ( null == jq.cookie('bp-activity-oldestpage') )
jq.cookie('bp-activity-oldestpage', 1, {path: '/'} );

var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;

jq.post( ajaxurl, {
action: 'activity_get_older_updates',
'cookie': encodeURIComponent(document.cookie),
'page': oldest_page
},
function(response)
{
jq("#content li.load-more").removeClass('loading');
jq.cookie( 'bp-activity-oldestpage', oldest_page, {path: '/'} );
jq("#content ul.activity-list").append(response.contents);

target.parent().hide();
}, 'json' );

return false;
}
});

// #2 Activity "Read More" links
jq('.activity-read-more a').live('click', function(event) {
var target = jq(event.target);
var link_id = target.parent().attr('id').split('-');
var a_id = link_id[3];
var type = link_id[0]; /* activity or acomment */

var inner_class = type == 'acomment' ? 'acomment-content' :
'activity-inner';
var a_inner = jq('li#' + type + '-' + a_id + ' .' + inner_class + ':first'
);
jq(target).addClass('loading');

jq.post( ajaxurl, {
action: 'get_single_activity_content',
'activity_id': a_id
},
function(response) {
jq(a_inner).slideUp(300).html(response).slideDown(300);
});

return false;
});

/* #3 AJAX send reply functionality */
jq("input#send_reply_button").click(
function() {
var order = jq('#messages_order').val() || 'ASC',
offset = jq('#message-recipients').offset();

var button = jq("input#send_reply_button");
jq(button).addClass('loading');

jq.post( ajaxurl, {
action: 'messages_send_reply',
'cookie': encodeURIComponent(document.cookie),
'_wpnonce': jq("input#send_message_nonce").val(),

'content': jq("#message_content").val(),
'send_to': jq("input#send_to").val(),
'subject': jq("input#subject").val(),
'thread_id': jq("input#thread_id").val()
},
function(response)
{
if ( response[0] + response[1] == "-1" ) {
jq('form#send-reply').prepend( response.substr( 2, response.length ) );
} else {
jq('form#send-reply div#message').remove();
jq("#message_content").val('');

if ( 'ASC' == order ) {
jq('form#send-reply').before( response );
} else {
jq('#message-recipients').after( response );
jq(window).scrollTop(offset.top);
}

jq("div.new-message").hide().slideDown( 200, function() {
jq('div.new-message').removeClass('new-message');
});
}
jq(button).removeClass('loading');
});

return false;
}
);

and those are the ones

On Sun, Nov 13, 2011 at 10:46 PM, Rashamere [email protected] wrote:

Hello & thanks for replying. I think I figured it out, but in my opinion,
it's sloppy lol. I kinda worked around it with an onmpuseout repaint. But
like you said, I want it to do it after the success of the added content.

I'm going to send you the Ajax part of my Wordpress/buddypress function
that's adding the dynamic content right now

Thanks for this, I really appreciate it

On Nov 13, 2011, at 6:38 PM, thomd<
[email protected]>
wrote:

Hi sincero,

actually a .scrollbar('repaint') should do the job.
What do you mean with "... right after the ajax call ..."? The
repaint-callback needs to be within the success callback.
If you send me the code snippet you are using or a link to your site,
I'm going to review it.

Regards,
Thomas

---

Reply to this email directly or view it on GitHub:
#17 (comment)

[thomd]

Hi sincero,

I did some investigations to check if dynamic content works together with the scrollbar plugin. Unfortunatelly it does not - at least not without some extra refactoring on your given code.
The reason for this is, that after applying the scrollbar, the content is in a new container "scrollbar-pane" and not in the original container anymore. As a consequence dynamic content is appended in the wrong container.

To solve this usecase, I have do some refactorings of the plugin (e.g. change the HTML structure of the scrollbar components).

The objective of ths plugin is still to use it an unobtrusive manner: you should not be forced to change a given HTML structure or CSS definitions to apply a custom scrollbar.

Regards,
Thomas

[sincero]

Hello there! Actually I got it to work in the Ajax call, for two of the three I listed. The other one, I'll see if I can find a work around. I still appreciate the help though ;) you can close this as fixed too. I have one more question though, do you have any plans to update this to the newest jquery? I ran the latest version, and the scroll bar crashed.

Thanks!

Iamsincere

On Nov 23, 2011, at 5:50 AM, [email protected] wrote:

Hi sincero,

I did some investigations to check if dynamic content works together with the scrollbar plugin. Unfortunatelly it does not - at least not without some extra refactoring on your given code.
The reason for this is, that after applying the scrollbar, the content is in a new container "scrollbar-pane" and not in the original container anymore. As a consequence dynamic content is appended in the wrong container.

To solve this usecase, I have do some refactorings of the plugin (e.g. change the HTML structure of the scrollbar components).

The objective of ths plugin is still to use it an unobtrusive manner: you should not be forced to change a given HTML structure or CSS definitions to apply a custom scrollbar.

Regards,
Thomas

---

Reply to this email directly or view it on GitHub:
#17 (comment)