binding .js to ajax reload activity WordPress
- SOLVED
site in question:
http://demo.theanointedone.com/blog/
Scenario:
This is a page that loads the most recent posts and also the most recent custom post-types 'photogallery'. For the photogallery posts, I am applying some .js to allow the post to show up as a rotating gallery on this page within the loop.
I recently added some ajax to allow the 'load more' posts function. This way the page does not have to refresh when the user wants to see more posts.
Problem:
I do not know how to bind my gallery .js script to the incoming ajax posts. This means when you click 'load more' and photogallery posts try to load, that there is no gallery .js applied to them.
What I need:
I need to have my gallery .js added to my ajax 'load more' function, so that when new photogallery posts are loaded the corresponding gallery .js loads as well.
Scripts used:
1. Here is the photogallery .js which is included in the header of this page.
jQuery(function($) {
$('.cboxcustomLoadedContentphotogalleryarchive').each(function() {
var $this = $(this), $ss = $this.closest('.type-photogallery');
var prev = $ss.find('.prev'), next = $ss.find('.next');
$this.cycle({
<?php
$cslider_fx_3 = 'fade';
$cslider_speed_3 = '1000';
$cslider_speed_3 = $woo_options['woo_panel_3_animation_speed'] * 1000;
$cslider_timeout_3 = '7000';
$cslider_timeout_3 = $woo_options['woo_panel_3_timeout'] * 1000;
?>
fx: '<?php echo $cslider_fx_3; ?>',
speed: '<?php echo $cslider_speed_3; ?>',
timeout: '<?php echo $cslider_timeout_3; ?>',
pager: '#photogallery-nav-archive',
prev: prev,
next: next,
pause: 1
}).cycle('pause');
$('.play').each(function() {
$(this).click(function() {
$(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('resume');
});
});
$('.pause').each(function() {
$(this).click(function() {
$(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('pause');
});
});
});
});
2. Here is my 'load more' ajax request function:
/*** Ajax Blog Posts Loader ***/
$('#pagination a').live('click', function(e){
e.preventDefault();
$(this).addClass('loading').text('LOADING...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#loop',
dataType: "html",
success: function(out){
result = $(out).find('#loop .hentry');
nextlink = $(out).find('#pagination a').attr('href');
$('#loop').append(result.fadeIn(300));
$('#pagination a').removeClass('loading').text('LOAD MORE');
if (nextlink != undefined) {
$('#pagination a').attr('href', nextlink);
} else {
$('#pagination').remove();
}
}
});
});
Here is what another developer suggested, though I do not know how to properly implement it:
-An easy approach could be.
let us say, we define a javascript function make_slideshow() where all your code resides.
sso, it should be something like
function make_slideshow(){
//all the slideshow code goes here
}
jQuery(document).ready(){
//call the make_slideshow to bind to all the initial loaded items
make_slideshow();
}
Now, In the ajax side, the script which send the new post items, we may define an action say <?php do_action("new_post_items");?> ad the end of loop.
and ask the js to be loaded/reacted
//php functions
add_action("new_post_items","reenable_slideshow");
function reenable_slideshow(){
?>
<script type='text/javascript'>
make_slideshow();
</script>
<?php
}
Something like this will make it work, as every time new post items are loaded, it rebinds the slideshow.
another approach, which you may use because this is a theme, you can avid adding action, and directly put the code of "reenable_slideshow" in the ajax script which send the post items.
What I need:
Please provide me the combined .js script that I can simply cut n paste into my theme.
thank you
Answers (2)
John Cotton answers:
Perhaps I'm missing the point here, but you acknowledge that you can put the gallery code into a makeSlideShow function.
So why not do that and then just add a extra line at the end of the success function for the ajax call?
success: function(out){
result = $(out).find('#loop .hentry');
nextlink = $(out).find('#pagination a').attr('href');
$('#loop').append(result.fadeIn(300));
$('#pagination a').removeClass('loading').text('LOAD MORE');
if (nextlink != undefined) {
$('#pagination a').attr('href', nextlink);
} else {
$('#pagination').remove();
}
makeSlideShow();
}
That will get called when everything has loaded.
shawn comments:
I've tried that but it didn't work. Maybe I did it a bit wrong. Just in case here is what I had tried.
In my theme functions.php file:
function make_slideshow() { ?>
<script type='text/javascript'>
jQuery(function($) {
$('.cboxcustomLoadedContentphotogalleryarchive').each(function() {
var $this = $(this), $ss = $this.closest('.type-photogallery');
var prev = $ss.find('.prev'), next = $ss.find('.next');
$this.cycle({
<?php
$cslider_fx_3 = 'fade';
$cslider_speed_3 = '1000';
$cslider_speed_3 = $woo_options['woo_panel_3_animation_speed'] * 1000;
$cslider_timeout_3 = '7000';
$cslider_timeout_3 = $woo_options['woo_panel_3_timeout'] * 1000;
?>
fx: '<?php echo $cslider_fx_3; ?>',
speed: '<?php echo $cslider_speed_3; ?>',
timeout: '<?php echo $cslider_timeout_3; ?>',
pager: '#photogallery-nav-archive',
prev: prev,
next: next,
pause: 1
}).cycle('pause');
$('.play').each(function() {
$(this).click(function() {
$(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('resume');
});
});
$('.pause').each(function() {
$(this).click(function() {
$(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('pause');
});
});
});
});
</script>
<?php }
In my scripts.js file (used to call most of my javascript within the theme)
$('#pagination a').live('click', function(e){
e.preventDefault();
$(this).addClass('loading').text('LOADING...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#loop',
dataType: "html",
success: function(out){
result = $(out).find('#loop .hentry');
nextlink = $(out).find('#pagination a').attr('href');
$('#loop').append(result.fadeIn(300));
$('#pagination a').removeClass('loading').text('LOAD MORE');
if (nextlink != undefined) {
$('#pagination a').attr('href', nextlink);
} else {
$('#pagination').remove();
}
<?php makeslideshow(); ?>
}
});
});
When I don't wrap the makeslideshow() in the php brackets above, then I get a function undefined error.
I have the website in this current configuration right now, and while the new gallery posts still load, they are not loading the .js, which you can see upon clicking 'load more'.
John Cotton comments:
Er....no.
All that script is client-side javascript. It doesn't need to be anywhere near the PHP code.
I've done it roughly below - but you should be error-checking your woo-options theme values just in case they are not numeric. I've also changed all the $ references to jQuery since that's what WordPress starts with (unless aliased back).
Also, there was no need to put $ in front of your js vars (unless it's a style thing??)
Theme:
?>
<script type='text/javascript'>
function make_slideshow() {
jQuery('.cboxcustomLoadedContentphotogalleryarchive').each(function() {
var this = jQuery(this), ss = this.closest('.type-photogallery');
var prev = ss.find('.prev'), next = ss.find('.next');
this.cycle({
fx: 'fade',
speed: <?php echo $woo_options['woo_panel_3_animation_speed'] ?> * 1000,
timeout: <?php echo $woo_options['woo_panel_3_timeout'] ?> * 1000,
pager: '#photogallery-nav-archive',
prev: prev,
next: next,
pause: 1
}).cycle('pause');
jQuery('.play').each(function() {
jQuery(this).click(function() {
jQuery(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('resume');
});
});
jQuery('.pause').each(function() {
jQuery(this).click(function() {
jQuery(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('pause');
});
});
});
});
</script>
Scripts.js:
$('#pagination a').live('click', function(e){
e.preventDefault();
$(this).addClass('loading').text('LOADING...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#loop',
dataType: "html",
success: function(out){
result = $(out).find('#loop .hentry');
nextlink = $(out).find('#pagination a').attr('href');
$('#loop').append(result.fadeIn(300));
$('#pagination a').removeClass('loading').text('LOAD MORE');
if (nextlink != undefined) {
$('#pagination a').attr('href', nextlink);
} else {
$('#pagination').remove();
}
makeslideshow();
}
});
shawn comments:
Not sure why, but when I make the change in my template-blog.php file from
<script type='text/javascript'>
jQuery(function($) {
to what you are saying:
<script type='text/javascript'>
function make_slideshow() {
Then it breaks even the original loaded galleries.
I did try copying in exactly what you had above, and it didn't work either for the original galleries 'pre-load-more' even.
As to the $ signs... It is probably because I use them throughout the js files, but they 'seem' to be necessary now. I'm not really sure.
These past few weeks are my first introduction to .js so my base understanding is still rather weak. I just happen to read a lot, and try new things.
My template-blog.php file goes as follows:
<?php
/*
Template Name: Blog
*/
?>
<?php get_header(); ?>
<script type='text/javascript'>
jQuery(function($) {
$('.cboxcustomLoadedContentphotogalleryarchive').each(function() {
var $this = $(this), $ss = $this.closest('.type-photogallery');
var prev = $ss.find('.prev'), next = $ss.find('.next');
$this.cycle({
<?php
$cslider_fx_3 = 'fade';
$cslider_speed_3 = '1000';
$cslider_speed_3 = $woo_options['woo_panel_3_animation_speed'] * 1000;
$cslider_timeout_3 = '7000';
$cslider_timeout_3 = $woo_options['woo_panel_3_timeout'] * 1000;
?>
fx: '<?php echo $cslider_fx_3; ?>',
speed: '<?php echo $cslider_speed_3; ?>',
timeout: '<?php echo $cslider_timeout_3; ?>',
pager: '#photogallery-nav-archive',
prev: prev,
next: next,
pause: 1
}).cycle('pause');
$('.play').each(function() {
$(this).click(function() {
$(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('resume');
});
});
$('.pause').each(function() {
$(this).click(function() {
$(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('pause');
});
});
});
});
</script>
<script type='text/javascript' src='http://demo.theanointedone.com/wp-content/themes/Tilt-Shift/includes/js/jquery.metadata.v2.js'></script>
<?php global $woo_options;
$i = 1;
?>
................. blah blah blah
And of course my scripts.js file is at:
http://demo.theanointedone.com/wp-content/themes/Tilt-Shift/includes/js/scripts.js?ver=3.0.1
John Cotton comments:
<blockquote>Then it breaks even the original loaded galleries.</blockquote>
Well, you've got to put a call in to makeSlideShow()....sorry, I thought you'd realise that.
I've tidied up the js (you had a var called this and that could lead to trouble, also you don't need the .each loop around the .click functions.
You still need to error check the PHP values, but see if this works first:
<script type='text/javascript'>
function make_slideshow() {
jQuery('.cboxcustomLoadedContentphotogalleryarchive').each(function() {
var ss = jQuery(this).closest('.type-photogallery');
var prev = ss.find('.prev'), next = ss.find('.next');
jQuery(this).cycle({
fx: 'fade',
speed: <?php echo $woo_options['woo_panel_3_animation_speed'] ?> * 1000,
timeout: <?php echo $woo_options['woo_panel_3_timeout'] ?> * 1000,
pager: '#photogallery-nav-archive',
prev: prev,
next: next,
pause: 1
}).cycle('pause');
jQuery('.play').click(function() {
jQuery(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('resume');
});
jQuery('.pause').click(function() {
jQuery(this).parents('.type-photogallery').find('.cboxcustomLoadedContentphotogalleryarchive').cycle('pause');
});
});
}
make_slideshow();
</script>
shawn comments:
I pasted the code exactly as you said into my template-blog.php file right after the header.
http://demo.theanointedone.com/blog/
Now you will see the first gallery -- Angelina Jolie is no longer loading the js properly.
John Cotton comments:
I get errors from the vimeo script so nothings runs in either Firefox or Chrome for me...
shawn comments:
Wow I don't get those errors.
I sent you a message through this site with ftp info, probably much easier for you that way.
I've just now put the site back to where I had it before, so it works in all browsers that I try.
