loading loops with ajax - so can b reloaded with query adjustment WordPress
- SOLVED
Hello,
I have been having an major issues with a dual [[LINK href="http://bxslider.com/"]]bx-slider[[/LINK]] slider plugin, and adjusting the number of slides that a visible.
This is becuase bx-slider counts the number of child nodes, and ignores inlines styles such as display: none. So when I've tried to adjust the number of visible slides using jquery show/hide - but when It comes to refreshing the slideshow function, it is still calculating all the child nodes!!!
This is why I need to remove the markup entirely, in order for bx-slider to get the right calculations.
I have tried detaching nodes and but am struggling to re-attach the nodes upon visibility change.
So I've come up with an idea - using ajax instead to re-load my entire slideshows with the new number slides.
Can this be done? See my code and querys below...
----------------------
<!-- THE QUERY, THIS CONTROLS BOTH LOOPS -->
<?php
$bikeGroup = $post->post_name;
$bikes = new WP_Query(array(
'post_type' => $bikeGroup,
'order' => 'DESC',
'orderby' => 'title',
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'bike_visibility',
'value' => 1,
'compare' => '='
)
)
));
?>
<!-- FILTER BUTTONS, THESE ARE THE BUTTONS THAT NEED TO RELOAD THE QUERY -->
<?php if (is_page('on-road')) { ?>
<a href="#" title="View Supersport" onclick="bikeFilter('supersport')">Supersport</a>
<a href="#" title="View Street" onclick="bikeFilter('street')">Street</a>
<a href="#" title="View Cruiser" onclick="bikeFilter('cruiser')">Cruiser</a>
<a href="#" title="View Scooter" onclick="bikeFilter('scooter')">Scooter</a>
<?php } elseif (is_page('off-road')) { ?>
<a href="#" title="Motocross" onclick="bikeFilter('motocross')">Motocross</a>
<a href="#" title="Enduro" onclick="bikeFilter('enduro')">Enduro</a>
<a href="#" title="Kids" onclick="bikeFilter('kids')">Kids</a>
<?php } ?>
<!-- FIRST PAGER SLIDESHOW MINI -->
<?php if ($bikes->have_posts()) : ?>
<div id="bike-mini-slider">
<?php while ($bikes->have_posts()) : $bikes->the_post(); ?>
<div class="bike" data-group="<?php echo $group[0]->slug; ?>">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<!-- SECOND SLIDESHOW MAIN, INCLUDES SCRIPT FOR BOTH SLIDESHOWS -->
<?php if ($bikes->have_posts()) : ?>
<div id="bike-main-slider">
<?php while ($bikes->have_posts()) : $bikes->the_post(); ?>
<div class="bike" data-group="<?php echo $group[0]->slug; ?>">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</div>
<script>
$(document).ready(function() {
var miniSlider;
bikeSliderNav = function () {
miniSlider = $('#bike-mini-slider').bxSlider({
auto: false,
controls: true,
speed: 800,
displaySlideQty: 5,
moveSlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true
});
};
var mainSlider;
bikeSlider = function () {
mainSlider = $('#bike-main-slider').bxSlider({
auto: false,
controls: true,
speed: 800,
infiniteLoop: false,
hideControlOnEnd: true
});
};
bikeSliderNav();
bikeSlider();
});
</script>
<?php endwhile; unset($bikes); endif; ?>
-----------------
So my question is can the contents of both these loops be reloaded, but with a query adjustment?
So when my filter buttons are clicked, it adds this to the query...
'group' - 'supersport'
The addition to the query above is my custom taxonomy 'group' with the term which is referenced in the onClick
Also these two loops are not next to each other, they appear separate on the page.
-----------------
I'm guessing to make these load reload using ajax, do I have to put these into seperate php file so they can be reloaded.
I've never done this before so help through the whole process would great if pos.
-----------------
Best working answer and help to get working gets all the prize!
Thanks
Answers (1)
Daniel Yoen answers:
Maybe like this :
ajax call :
<script type="text/javascript">
function bikeFilter(type)
{
var types = type;
jQuery.ajax({
type: 'GET',
url: 'http://example.com/query.php',
data:
{
vartype : types,
},
dataType: 'html',
success: function(data)
{
jQuery("#bike-main-slider"").append(data);
}
});
}
</script>
query.php
<?php
$query = $_GET['vartype'];
$bikes = new WP_Query(array(
'post_type' => $query,
'order' => 'DESC',
'orderby' => 'title',
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'bike_visibility',
'value' => 1,
'compare' => '='
)
)
));
if ($bikes->have_posts()) : while ($bikes->have_posts()) : $bikes->the_post(); ?>
<div class="bike" data-group="<?php echo $group[0]->slug; ?>">
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
replace :
<?php if ($bikes->have_posts()) : ?>
<div id="bike-main-slider">
<?php while ($bikes->have_posts()) : $bikes->the_post(); ?>
<div class="bike" data-group="<?php echo $group[0]->slug; ?>">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</div>
<script>
$(document).ready(function() {
var miniSlider;
bikeSliderNav = function () {
miniSlider = $('#bike-mini-slider').bxSlider({
auto: false,
controls: true,
speed: 800,
displaySlideQty: 5,
moveSlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true
});
};
var mainSlider;
bikeSlider = function () {
mainSlider = $('#bike-main-slider').bxSlider({
auto: false,
controls: true,
speed: 800,
infiniteLoop: false,
hideControlOnEnd: true
});
};
bikeSliderNav();
bikeSlider();
});
</script>
<?php endwhile; unset($bikes); endif; ?>
with :
<div id="bike-main-slider"></div>
<script>
$(document).ready(function() {
var miniSlider;
bikeSliderNav = function () {
miniSlider = $('#bike-mini-slider').bxSlider({
auto: false,
controls: true,
speed: 800,
displaySlideQty: 5,
moveSlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true
});
};
var mainSlider;
bikeSlider = function () {
mainSlider = $('#bike-main-slider').bxSlider({
auto: false,
controls: true,
speed: 800,
infiniteLoop: false,
hideControlOnEnd: true
});
};
bikeSliderNav();
bikeSlider();
});
</script>
Hope this help
Josh Cranwell comments:
This looks really interesting - thanks.
I will try this now,
Though if I have other php varibles inside query.php, will they work as they should when they are loaded?
$bikeType = $post->post_name;
$ajaxquery = $_GET['vartype'];
$bikes = new WP_Query(array(
'post_type' => $bikeType,
'order' => 'DESC',
'orderby' => 'title',
'group' => $ajaxquery,
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'app_visibility',
'value' => 1,
'compare' => '='
)
)
));
Also, I am having to load 2 loops at the same time, so would I write it like this...
<script type="text/javascript">
function bikeFilter(type) {
var types = type;
jQuery.ajax({
type: 'GET',
url: '<?php bloginfo('template_url'); ?>/bike-minislider.php',
data:
{
vartype : types,
},
dataType: 'html',
success: function(data)
{
jQuery("#bike-mini-slider"").append(data);
}
}).ajax({
type: 'GET',
url: '<?php bloginfo('template_url'); ?>/bike-mainslider.php',
data:
{
vartype : types,
},
dataType: 'html',
success: function(data)
{
jQuery("#bike-main-slider"").append(data);
}
});
}
</script>
Am I right track with the above?
Thanks
Daniel Yoen comments:
yes, they will work.
for ajax multi call, maybe like this :
$.ajax({});
$.ajax({});
please check this for better performance
[[LINK href="http://stackoverflow.com/questions/4368946/javascript-callback-for-multiple-ajax-calls"]][[/LINK]]
Daniel Yoen comments:
Sorry for the link :
http://stackoverflow.com/questions/4368946/javascript-callback-for-multiple-ajax-calls
Josh Cranwell comments:
Hi Daniel, sorry got pulled off into a meeting.
Though this look promising but I get 500 Internal Error.
<script type="text/javascript">
function bikeFilter(type) {
var types = type;
$.ajax({
type: 'GET',
url: '<?php bloginfo('template_url'); ?>/bike-minislider.php',
data:
{
vartype : types,
},
dataType: 'html',
success: function(data){
jQuery("#bike-mini-slider").append(data);
}
})
$.ajax({
type: 'GET',
url: '<?php bloginfo('template_url'); ?>/bike-mainslider.php',
data:
{
vartype : types,
},
dataType: 'html',
success: function(data){
jQuery("#bike-main-slider").append(data);
}
});
}
</script>
I think it finds the bike-mainslider.php and bike-minislider.php but fails on the php running for some reason? I have split the loops into 2 different querys in each php file like this...
<?php
$bikeType = $post->post_name;
$ajaxQuery = $_GET['vartype'];
$miniSlider = new WP_Query(array(
'post_type' => $bikeType,
'order' => 'DESC',
'orderby' => 'title',
'group' => $ajaxQuery,
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'app_visibility',
'value' => 1,
'compare' => '='
)
)
));
?>
and
<?php
$bikeType = $post->post_name;
$ajaxQuery = $_GET['vartype'];
$mainSlider = new WP_Query(array(
'post_type' => $bikeType,
'order' => 'DESC',
'orderby' => 'title',
'group' => $ajaxQuery,
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'app_visibility',
'value' => 1,
'compare' => '='
)
)
));
?>
Should the run OK, not sure why there breaking?
Thansk
Josh Cranwell comments:
<?php
$bikeType = $post->post_name;
$ajaxQuery = $_GET['vartype'];
$mainSlider = new WP_Query(array(
'post_type' => $bikeType,
'order' => 'DESC',
'orderby' => 'title',
'group' => $ajaxQuery,
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'app_visibility',
'value' => 1,
'compare' => '='
)
)
));
?>
and
<?php
$bikeType = $post->post_name;
$ajaxQuery = $_GET['vartype'];
$miniSlider = new WP_Query(array(
'post_type' => $bikeType,
'order' => 'DESC',
'orderby' => 'title',
'group' => $ajaxQuery,
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'app_visibility',
'value' => 1,
'compare' => '='
)
)
));
?>
Daniel Yoen comments:
you must include wp function in external file, put this line in bike-minislider.php/bike-mainslider.php file at the top :
<?php
/* Short and sweet */
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
?>
or
<?php
require('/the/path/to/your/wp-blog-header.php');
?>
Hope this help
Josh Cranwell comments:
Dan this is unbelievably good!!! Has totally fixed my problem.
How ever, I am struggling with one thing tho, the code below is inside my ajax loaded php files
And I could not get 'wp-blog-header.php' to work?
wp-load.php seem to work but I'm not sure if its safe?
My problem I am having is <strong>$bikeType</strong> variable must be working, because it is displaying the correct bikes.
But my conditional statement below is always showing 'on-road'. Why would this be happening? My two post types are defo 'on-road' and 'off-road'?
Not sure why this is not using the <strong>$bikeType</strong> variable but the query is?
Don't suppose you may know why?
define('WP_USE_THEMES', false);
require ('/home/sites/example.co.uk/www/wp/wp-load.php');
$bikeType = $post->post_name;
$ajaxQuery = $_GET['vartype'];
$miniSlider = new WP_Query(array(
'post_type' => $bikeType,
'order' => 'DESC',
'orderby' => 'title',
'group' => $ajaxQuery,
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => 'app_visibility',
'value' => 1,
'compare' => '='
)
)
));
if ( $bikeType = 'on-road' ) {
$bikeProfile = get_bloginfo('template_url') . '/images/bike-profiles/1000-2013.png';
} else if ( $bikeType = 'off-road' ) {
$bikeProfile = get_bloginfo('template_url') . '/images/bike-profiles/450-2013.png';
}
Many Thanks
Josh Cranwell comments:
I just worked out this variable are not working in the ajax content...
$bikeType = $post->post_name;
Daniel Yoen comments:
you may forget global $post;
put this line :
global $post:
after :
define('WP_USE_THEMES', false);
require ('/home/sites/example.co.uk/www/wp/wp-load.php');
hope this help
Daniel Yoen comments:
$bikeType is variable ?
Josh Cranwell comments:
Thanks, got it working. All works great!