I always get the same post. I don't see why I always get the same post (the first) and not all post. Somebody?
How can I get the second post or the third, etc?
function my_lateral_fluid() {
$data = array();
$args = array(
"post_type" => "portfolio",
"posts_per_page" => -1
);
$portfolio_query = new WP_Query($args);
while($portfolio_query -> have_posts() ){
$portfolio_query -> the_post();
$data = '
<div id="all-content" class="container abs-position">
<div id="primary" class="content-area-ajax text-center">
<main id="main" class="site-main" role="main">
<article id="post-'. get_the_ID().'"'. post_class().'>
<h1 class="entry-title">'.get_the_title().'</h1>
<div class="entry-content">'.get_the_content().'</div>
</article>
</main>
</div>
</div>
';
}
wp_reset_postdata();
echo '<div id="postdata">'.$data.'</div>';
wp_die();
}
HERE THE lateral-fluid.js
var origHeight= 0;
jQuery(function($){
jQuery('.more-info').click(function() {
origHeight = jQuery('#show').height();
//var postid = $(this).attr('data-postid');
var page = jQuery(this).attr('data-href');
jQuery.ajax({
url: ajaxFluid.ajaxurl,
type: 'get',
page: page,
data: {
action: 'lateral_fluid'
},
success: function( data ) {
console.log(data);
var $response = $(data);
var postdata = $response.filter('#postdata').html();
//ajax load data
jQuery('#ajax-inserted1').html(postdata);
//animate portfolio grid to left
jQuery('#remove').removeClass('to-screen').addClass('to-left');
},
complete: function(){
//animate post to screen from right to left
jQuery('.entry-content a img, .entry-content img').load(function () {
jQuery('#ajax-inserted1, .controlls').removeClass('to-right').addClass('to-screen');
//HEIGHT CONTENT CALCULATION
var newHeight = jQuery('#ajax-inserted1 #primary').height()+100;
var el = jQuery('.show-container');
el.css({'height': newHeight + 'px'});
//STELLAR REFRESH
setTimeout(stellarRefresh, 500);
function stellarRefresh() {
jQuery.stellar('refresh');
}
});
}
});
});
jQuery('#close-portfolio').click(function() {
jQuery('#ajax-inserted1').removeClass('to-screen').addClass('to-right');
jQuery('#remove').removeClass('to-left').addClass('to-screen');
jQuery('.controlls').removeClass('to-screen').addClass('to-right');
//ORIGINAL HEIGHT
jQuery('.show-container').css({'height': origHeight + 'px'});
setTimeout(ajaxEmpty, 500);
function ajaxEmpty() {
jQuery('#ajax-inserted1').empty();
}
});
});
Inside the have_posts() loop, you overwrite $data each time and then only output it after the loop completes which only shows the last post in the loop (latest post).
Either append each post to $data (using $data .= <html code>) or move echo '<div id="postdata">'.$data.'</div>'; inside the while loop.
Hello you have used normal variable.
When loop continue old data will be replace by your new post.
So either you can make
$data='';
while($portfolio_query -> have_posts() ){
$data.= '
<div id="all-content" class="container abs-position">
rest code will be same.
Try with this:
function my_lateral_fluid() {
$data = '';
$args = array(
"post_type" => "portfolio",
"posts_per_page" => -1
);
$portfolio_query = new WP_Query($args);
if ( $portfolio_query -> have_posts() ) {
while( $portfolio_query -> have_posts() ){
$portfolio_query -> the_post();
$data .= '
<div id="all-content" class="container abs-position">
<div id="primary" class="content-area-ajax text-center">
<main id="main" class="site-main" role="main">
<article id="post-'. get_the_ID().' " '. post_class().'>
<h1 class="entry-title">'.get_the_title().'</h1>
<div class="entry-content">'.get_the_content().'</div>
</article>
</main>
</div>
</div>
';
}
}
wp_reset_postdata();
die($data);
}
And in your ajax action use my_lateral_fluid instead of lateral_fluid. Also since you've defined jQuery(function($){...}); you can use $ instead of jQuery everywhere in your code.
In your ajax call you want to append your data in the <div id="postdata"></div>;.
Related
I found this example on the internet that comes pretty close to what I want to do.
I have some ACF fields with the latitude and longitude of some markers, I am trying to show all the markers of the custom post type place in the same map.
But I only get 1, what am I doing wrong?
I think is something related with the marker div
<?php /* Template Name: Demo Page Template */ get_header(); ?>
<h1 class="main-title"><?= post_type_archive_title(); ?></h1>
<section class="list-cases">
<div class="container">
<div class="row position-relative">
<?php
$args = array(
'post_type' => 'lugar',
'posts_per_page' => 10,
);
$query = new WP_Query( $args );
?>
<?php $counter = 1; ?>
<?php while( $query->have_posts() ) : $query->the_post() ?>
<div class="item-case-<?= $counter ?> col-md-12" data-hover="<?= $counter ?>" data-aos="fade-up"
data-aos-duration="2000">
<div class="case-container">
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
<p><?php the_field('subtitle') ?></p>
<p><?php the_field('address') ?></p>
<p><strong>Latitud:</strong> <?php the_field('lat') ?></p>
<p><strong>Longitud:</strong> <?php the_field('lon') ?></p>
</div>
</div>
<?php $counter++; ?>
<?php endwhile; wp_reset_postdata(); ?>
</div>
</div>
</section>
<style>
#map,
#acf-map {
height: 500px;
}
</style>
<div id="map" style="width: 600px;">
</div>
<div class="marker" data-lat="<?php echo the_field('lat') ?>" data-lng="<?php the_field('lon'); ?>"
data-title="<?php the_field('subtitle') ?>" data-url="<?php echo 'link'; ?>"
data-category="<?php echo 'category'; ?>"></div>
<script>
$(document).ready(function () {
var map = L.map('map').setView([39.8410802, -0.1191397], 8);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoiamFtYWxkb2xzIiwiYSI6ImNrYmF2bGowOTBycGEyeG84b2F2NGlsYWkifQ.9rqymFnsW79aCkAFGCo0XQ'
}).addTo(map);
var marker = [];
$.each($('.marker'), function () {
var lat = $(this).attr('data-lat');
var lng = $(this).attr('data-lng');
var name = $(this).attr('data-title');
var link = $(this).attr('data-url');
console.log('Marker es: ' + marker);
marker = [name, lat, lng, link];
console.log('Y ahora es: ' + marker);
console.log(marker);
});
var markers = [marker];
console.log(markers);
console.log(markers.length);
for (var i = 0; i < markers.length; i++) {
marker = new L.marker([markers[i][1], markers[i][2]])
.bindPopup(markers[i][0])
.addTo(map);
}
});
</script>
Please make sure that you are echo-ing the custom field values.
Example: data-lat="<?php echo get_field('lat'); ?>" and data-lat="<?php echo get_field('lon'); ?>"
You need to put the div.marker into the loop to display multiple markers with the custom lat-long values.
<?php while( $query->have_posts() ) : $query->the_post() ?>
<div class="marker"
data-lat="<?php echo get_field( 'lat' ) ?>"
data-lng="<?php echo get_field( 'lon' ); ?>"
data-title="<?php echo get_field( 'subtitle' ) ?>"
data-url="<?php echo 'link'; ?>"
data-category="<?php echo 'category'; ?>" >
</div>
<?php endwhile; wp_reset_postdata(); ?>
Also, I would modify your javascript so it will look like this:
var markers = [];
$.each($('.marker'), function () {
var marker = [];
var lat = $(this).attr('data-lat');
var lng = $(this).attr('data-lng');
var name = $(this).attr('data-title');
var link = $(this).attr('data-url');
console.log('Marker es: ' + marker);
marker = [name, lat, lng, link];
console.log('Y ahora es: ' + marker);
console.log(marker);
markers.push( marker );
});
console.log(markers);
console.log(markers.length);
for (var i = 0; i < markers.length; i++) {
marker = new L.marker([markers[i][1], markers[i][2]])
.bindPopup(markers[i][0])
.addTo(map);
}
I'm loading wordpress posts via an AJAX script, everything works great until I try to prevent the latest post from being included in the query. When I try to pass offset=1 to the query I get the same posts repeating everytime the 'More posts' link is clicked.
Here's my custom page template, the first loop creates a single hero post that sits above the AJAX loop:
<?php
/*
Template Name: Home
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="latest-popular">
<a class="active-link">Most recent</a> Most popular
</div>
<section class="hero-image">
<?php $my_query = new WP_Query('orderby=menu_order&posts_per_page=1');
while ($my_query->have_posts()) : $my_query->the_post();
?>
<figure><?php the_post_thumbnail(); ?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><figcaption <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
<h2><?php the_field('description'); ?></h2>
<p class="credit"><?php the_field('credit'); ?></p>
<span class="length"><?php the_field('running_time'); ?> minutes</span>
</figcaption></a><?php if( $field = get_field('exclusive') ): ?><section id="exc" <?php post_class(); ?>></section><?php endif; ?><!-- <section class="award"></section> -->
</figure>
<?php endwhile; ?>
</section>
</main><!-- #main -->
</div><!-- #primary -->
<!-- Ajax Load More script block -->
<section id="ajax-load-more">
<ul class="listing" data-path="<?php echo get_template_directory_uri(); ?>" data-post-type="post" data-display-posts="10" data-post-not-in="<?php echo $postsNotIn; ?>" data-button-text="More Posts" >
<!-- Load Ajax Posts Here -->
</ul>
</section>
<!-- /Ajax Load More -->
<!-- Ajax -->
<script>
$(function() {
if($("#ajax-load-more").length){
var page = 1,
$loading = true,
$finished = false,
$window = $(window),
$el = $('#ajax-load-more'),
$content = $('#ajax-load-more ul'),
$path = $content.attr('data-path');
if($path === undefined){
$path = '/wp-content/themes/my-theme/ajax-load-more.php';
}
//Define button text
if($content.attr('data-button-text') === undefined){
$button = 'More posts';
}else{
$button = $content.attr('data-button-text');
}
$el.append('<p id="load-more" class="more"><span class="loader"></span><span class="load-more-link">'+$button+'</span></p>');
//Load posts function
var load_posts = function(){
$('#load-more').addClass('loading');
$('#load-more span.text').text("Loading...");
$.ajax({
type : "GET",
data : {
postType : $content.attr('data-post-type'),
category : $content.attr('data-category'),
author : $content.attr('data-author'),
taxonomy : $content.attr('data-taxonomy'),
tag : $content.attr('data-tag'),
postNotIn : $content.attr('data-post-not-in'),
numPosts : $content.attr('data-display-posts'),
pageNumber : page,
},
dataType : "html",
url : $path+"/ajax-load-more.php",
beforeSend : function(){
if(page != 1){
$('#load-more').addClass('loading');
$('#load-more span.text').text("Loading...");
}
},
success : function(data){
$data = $('<span>'+data+'</span>');// Convert data to an object
//alert(data);
if(data.length > 1){
$data.hide();
$content.append($data);
$data.fadeIn(500, function(){
$('#load-more').removeClass('loading');
$('#load-more span.text').text($button);
$loading = false;
});
} else {
$('#load-more').addClass('done');
$('#load-more span.text').text($button);
$loading = false;
$finished = true;
}
},
error : function(jqXHR, textStatus, errorThrown) {
$('#load-more').removeClass('loading');
$('#load-more span.text').text($button);
//alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
}
$('#load-more').click(function(){
if(!$loading && !$finished && !$(this).hasClass('done')) {
$loading = true;
page++;
load_posts();
}
});
load_posts();
}
});
</script>
<?php get_footer(); ?>
And the PHP that includes the AJAX loop:
<?php
// Our include
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
// Our variables
$postType = (isset($_GET['postType'])) ? $_GET['postType'] : 'post';
$category = (isset($_GET['category'])) ? $_GET['category'] : '';
$author_id = (isset($_GET['author'])) ? $_GET['taxonomy'] : '';
$taxonomy = (isset($_GET['taxonomy'])) ? $_GET['taxonomy'] : '';
$tag = (isset($_GET['tag'])) ? $_GET['tag'] : '';
$exclude = (isset($_GET['postNotIn'])) ? $_GET['postNotIn'] : '';
$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 6;
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
$args = array(
'post_type' => $postType,
'category_name' => $category,
'author' => $author_id,
'posts_per_page' => $numPosts,
'paged' => $page,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_status' => 'publish',
);
// EXCLUDE POSTS
// Create new array of excluded posts
/* Example array from parent page:
$features = array();
foreach( $posts as $post):
setup_postdata($post);
$features[] = $post->ID;
endforeach;
if($features){
$postsNotIn = implode(",", $features);
}
*/
// QUERY BY TAXONOMY
if(empty($taxonomy)){
$args['tag'] = $tag;
}else{
$args[$taxonomy] = $tag;
}
query_posts($args);
?>
<?php
// our loop
if (have_posts()) :
$i =0;
while (have_posts()):
$i++;
the_post();?>
<!-- Do stuff -->
<?php endwhile; endif; wp_reset_query(); ?>
As I mentioned above, adding offset=1 causes the same posts to be called every time the 'more posts' link is clicked, I need the latest post in the loop to be excluded, can anyone shed some light on what I'm doing wrong please?
You must use the data-post-not-in attribute and pass an array of post IDs as Offset does not work with pagination.
Check out the readme on the github repo # https://github.com/dcooney/wordpress-ajax-load-more
An example would be:
$features = array('7238', '6649', '6951'); // Array of posts to exclude
if($features){
$postsNotIn = implode(",", $features); //Implode the posts and set a variable to pass to our data-post-not-in param.
}
And then when you would call the Ajax like this:
<ul class="listing" data-path="<?php echo get_template_directory_uri(); ?>" data-post-type="post" data-display-posts="10" data-post-not-in="<?php echo $postsNotIn; ?>" data-button-text="More posts">
Offset has a tendency to break pagination. There's a great article about this on the codex which should solve your problem. Please see: http://codex.wordpress.org/Making_Custom_Queries_using_Offset_and_Pagination
I have this slider in a wordpress theme that it's not working. I have done all the settings right and it won't slide. Automatically or manually. From what I see eveyrthing seems tobe correct. I have also followed all the manufacturer instructions but can't seem to sort it out. Here is the website: www.casavulturului.com
<?php if ( !$paged && get_option('woo_featured') == "true" ) { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#loopedSlider").loopedSlider({
<?php
$autoStart = 0;
$slidespeed = 600;
if ( get_option("woo_slider_auto") == "true" )
$autoStart = get_option("woo_slider_interval") * 1000;
else
$autoStart = 0;
if ( get_option("woo_slider_speed") <> "" )
$slidespeed = get_option("woo_slider_speed") * 1000;
?>
autoStart: <?php echo $autoStart; ?>,
slidespeed: <?php echo $slidespeed; ?>,
autoHeight: true
});
});
</script>
<?php } ?>
<div id="sliderWrap">
<div class="innerwrap">
<div id="loopedSlider">
<?php $img_pos = get_option('woo_featured_img_pos'); ?>
<?php $saved = $wp_query; query_posts('suppress_filters=0&post_type=slide&order=ASC&orderby=date&showposts=20'); ?>
<?php if (have_posts()) : $count = 0; $postcount = $wp_query->post_count; ?>
<div class="container">
<div class="slides">
<?php while (have_posts()) : the_post(); ?>
<?php if (!woo_image('return=true')) continue; // Don't show slides without image ?>
<?php $count++; ?>
<div id="slide-<?php echo $count; ?>" class="slide">
<div class="slide-content <?php if($img_pos == "Left") { echo "fr"; } else { echo "fl"; } ?>">
<h2 class="slide-title">
<?php the_title(); ?>
<?php if ($postcount > 1) echo '<span class="controlsbg"> </span>'; ?>
</h2>
<p><?php the_content(); ?></p>
</div><!-- /.slide-content -->
<?php if (woo_image('return=true')) { ?>
<div class="image <?php if($img_pos == "Left") { echo "fl"; } else { echo "fr"; } ?>">
<?php woo_image('width=515&height=245&class=feat-image&link=img'); ?>
</div>
<?php } ?>
<div class="fix"></div>
</div>
<?php endwhile; ?>
</div><!-- /.slides -->
<?php if($count > 1) { ?>
<ul class="nav-buttons <?php if($img_pos == "Left") { echo "right"; } else { } ?>">
<li id="p"></li>
<li id="n"></li>
</ul>
<?php } ?>
</div><!-- /.container -->
<div class="fix"></div>
<?php else : ?>
<p class="note"><?php _e( 'Please add some "Slides" to the featured slider.', 'woothemes' ); ?></p>
<?php endif; $wp_query = $saved;?>
</div><!-- /#loopedSlider -->
</div>
</div><!-- /#sliderWrap -->
JQUERY Code:
(function(jQuery) {
jQuery.fn.loopedSlider = function(options) {
var defaults = {
container: '.container',
slides: '.slides',
pagination: '.pagination',
containerClick: false, // Click container for next slide
autoStart: 0, // Set to positive number for auto start and interval time
restart: 0, // Set to positive number for restart and restart time
slidespeed: 100, // Speed of slide animation
fadespeed: 100, // Speed of fade animation
autoHeight: false // Set to positive number for auto height and animation speed
};
this.each(function() {
var obj = jQuery(this);
var o = jQuery.extend(defaults, options);
var pagination = jQuery(o.pagination+' li a',obj);
var m = 0;
var t = 1;
var s = jQuery(o.slides,obj).children().size();
var w = jQuery(o.slides,obj).children().outerWidth();
var p = 0;
var u = false;
var n = 0;
var interval=0;
var restart=0;
jQuery(o.slides,obj).css({width:(s*w)});
jQuery(o.slides,obj).children().each(function(){
jQuery(this).css({position:'absolute',left:p,display:'block'});
p=p+w;
});
jQuery(pagination,obj).each(function(){
n=n+1;
jQuery(this).attr('rel',n);
jQuery(pagination.eq(0),obj).parent().addClass('active');
});
if (s!=1) { // WooThemes add
jQuery(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
} // WooThemes add
if (s>3) {
jQuery(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
}
if(o.autoHeight){autoHeight(t);}
jQuery('.next',obj).click(function(){
if(u===false) {
animate('next',true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
jQuery('.previous',obj).click(function(){
if(u===false) {
animate('prev',true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
if (o.containerClick) {
jQuery(o.container ,obj).click(function(){
if(u===false) {
animate('next',true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
}
You're using the slide on the "#loopedslider" element:
jQuery("#loopedSlider").loopedSlider({
But that div holds a container with slides, instead of the slides itself. So you have two options:
1) remove the container
OR
2) switch the slider to the element holding the slides:
jQuery(".slides").loopedSlider({
I'm using the jquery cycle to create a slideshow in my Wordpress template. The "pager" is creating buttons that overlay the slideshow and rollover advances the slides. The trouble I'm running into is that I need the rollover to stay the same, but I also need to set an href so that clicking on the buttons takes the user to a specific page.
I need to retrieve the variable $target from my slideshow for the href.
I need the onclick to make the button clickable.
As I stated above, I'm new at this and it's quite possible that this is terrible code/can't be done/I'm a moron.
My jquery:
<script src="<?php bloginfo('stylesheet_directory'); ?>/scripts/jquery.cycle.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
if ( $('.slides > .slide').size() > 1 ) {
$('.slides')
.cycle({
timeout: 6000,
speed: 1000,
pager: '#slides #mainNav',
pauseOnPagerHover: 200,
pagerEvent: 'mouseover',
pause: true,
pagerAnchorBuilder: function(idx, slide) {
var slideImage = $(slide).find('img');
var slideTitle = slideImage.attr('title');
var slideURL = "<?php echo $target; ?>";
return '<li>' + slideTitle + /* '<br /><span class="description">' + slideDescr + '</span>*/'</li>';
}
});
}
});
</script>
and my Wordpress slideshow:
<?php if ( is_front_page() && $slides = get_posts(array('numberposts' => -1, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'slide')) ) : ?>
<div id="mainImg">
<div id="slides">
<div class="slides">
<?php foreach ($slides as $slide) : ?>
<?php $title = $slide->post_title; ?>
<?php $content = wpautop($slide->post_content); ?>
<?php $description = get_post_meta($slide->ID, 'description', true); ?>
<?php $thumb = get_the_post_thumbnail($slide->ID, 'slide', array('title' => $title, 'alt' => $description)); ?>
<?php $url = get_post_meta($slide->ID, '_slide_url', true); ?>
<?php $target = (get_post_meta($slide->ID, '_slide_url_blank', true)) ? 'target="_blank"' : ''; ?>
<div class="slide">
<?php if ($url) : ?>
<a href="<?php echo $url; ?>" <?php echo $target; ?>><?php echo $thumb; ?></a>
<?php else: ?>
<?php echo $thumb; ?>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<div id="mainNav"></div>
</div>
</div><!--end mainImg-->
<?php endif; ?>
Thank you in advance for your help.
Where you have:
var slideURL = "<?php echo $target; ?>"
Replace it with:
var slideURL = $(slide).find('a').attr('target');
What you are doing above is getting the slide object, finding the 'a' tag in the slide, and then getting the "target" attribute of the 'a' tag. This value is then assigned to the slideURL variable (which will either be '_blank' or undefined). For more information on how to use jQuery to get HTML elements and/or their attributes, you should familiarise yourself more with jQuery's Traversing and Attributes methods.
You should never mix Javascript code with PHP or even HTML code anyway. Read up more on "Unobtrusive JavaScript".
I'm trying to make a pagination system, and to make it work on every page I'm using the $query_string variable, which supposedly contains all the information about the category, etc.
So I'm doing something like this:
add_action('wp_ajax_and_action', 'get_posts_page');
add_action('wp_ajax_nopriv_and_action', 'get_posts_page');
function get_posts_page() {
$query_string = $_POST['query_string'];
global $wpdb;
query_posts($query_string . '&posts_per_page=10&post_status=publish&offset='.$_POST['off']);
It's in my functions.php file. I've globalized the $query_string variable in my header.php file. The $_POST['query_string'] is coming from a javascript function (also in my functions.php file) which I've set to be in wp_head (so the head of the document I assume). It's posting a bunch of data to the PHP function:
$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
action: 'and_action',
off: offset+number,
pagenumber: page_number,
query_string: '<?php echo $query_string; ?>'
}, function(data) {
However, upon further inspection it shows the query_string variable as null.
So when I do: <?php echo $query_string ?> nothing returns. Any ideas why that might be? Thanks :)
Updated
Heres an Update
functions.php
The Javascript:
add_filter('wp_head', 'javascript_page');
function javascript_page() {
?>
<script type="text/javascript">
$(document).ready(function() {
var number = 10;
var offset = 0;
var page_number = 2;
var busy = false;
/* Bind the scroll function to an event */
$(window).bind('scroll', function(e) {
/* If the scroll height plus the window height is more than the document height minus 10, continue */
if($(window).scrollTop() + $(window).height() > $(document).height() - 10 && !busy) {
busy = true;
/* Quick message so you know more stuff is loading */
$('.loading-more').html('Click to load more posts..');
$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
action: 'and_action',
off: offset+number,
pagenumber: page_number,
query_string: '<?php echo $query_string; ?>'
}, function(data) {
offset = offset+number;
$('.empty-div').append('<div class="pages"><p>Welcome to <strong>Page '+page_number+'</strong></p></div><hr />'+data);
busy = false;
page_number += 1;
});
}
});
$('.loading-more').bind('click', function(e) {
busy = true;
$('.loading-more').html('<em>Loading more posts..</em>')
/* Quick message so you know more stuff is loading */
$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
action: 'and_action',
off: offset+number,
pagenumber: page_number,
query_string: '<?php echo $query_string; ?>'
}, function(data) {
offset = offset+number;
$('.empty-div').append('<div class="pages"><p>Welcome to <strong>Page '+page_number+'</strong></p></div><hr />'+data);
busy = false;
page_number += 1;
$('.loading-more').html('Click to load more posts..');
});
});
});
</script>
The PHP function:
add_action('wp_ajax_and_action', 'get_posts_page');
add_action('wp_ajax_nopriv_and_action', 'get_posts_page');
function get_posts_page() {
$query_string = $_POST['query_string'];
global $wpdb;
query_posts($query_string . '&posts_per_page=10&post_status=publish&offset='.$_POST['off']);
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-meta">
<span class="%1$s">Posted on</span> <?php the_date('F jS'); ?>
- <a class="comment-link" href="<?php the_permalink(); ?>#comment"><?php comments_number('Leave a Response!', '1 Response', '% Responses'); ?></a>
</div><!-- .entry-meta -->
<br />
<a class="post-thumbnail-thing" href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(); ?></a>
<div class="entry-content">
<?php the_content( __( '<span class="alignright">
<span class="button-css">Continue Reading →</span>
</span>', 'twentyten' ) ); ?><br /><hr />
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php
endwhile; endif;
die();
}
header.php
<?php global $query_string; ?>
As I've said, the main problem is $query_string is null :(
Your globalizing $query_string inside of your header.php file, but you need to globalize it inside of your function javascript_page() inside of functions.php
Here's a video explaining what I'm doing
function javascript_page() {
global $query_string;
?>
<script type="text/javascript">