How to add Ajax paging to widget? WordPress

jrcollins comments:

Hi, it's a new site, so not many categories at the moment but I will be adding more. I'm not sure what the total number will be.

jrcollins comments:

A slideshow is not really what I'm looking for.

jrcollins comments:

What about if I added a page using a custom page template and referenced the url in the pagination code? Would something like that work?

Rempty comments:

Yes and assign an ID to load the content using this:
http://api.jquery.com/load/

Rempty comments:

The steps to create ajax in wordpress, all this in the functions.php:

//First you need to define to your ajax path

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {
echo '<script type="text/javascript">
var ajaxurl = "' . admin_url('admin-ajax.php') . '";
</script>';
}




//Define the function to load ajax

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

function more_post_ajax(){
//assign the variable
$page=($_POST['pagecat'])?$_POST['pagecat']:1;
header("Content-Type: text/html");
//Do your querys etc

//Save your data in a variable
$out = '';
$out.='';
//return the html data
die($out);
}


Now the javascript, you must include a js in your header or footer

//You can define some variables
var pageNumber = 0;

function load_posts() {
//Sum 1 to current pageNumber
pageNumber++;
//String Url
var str = '&pageNumber=' + pageNumber ;
jQuery.ajax({
type: "POST",
dataType: "html",
url: ajaxurl,
data: str,
success: function (data) {
var $data = jQuery(data);
if ($data.length) {
//Where i put the result
jQuery("#my-posts").append($data);

} else {
//If there is no results here
}
},
error: function (jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}

});
return false;
}


In this example i am using a function, but you can use a event onclick, you can add some attr to the link with the page, etc
<a class="link-page" data-page="2" href="#">2</a>

jQuery(".link-page").click(function(ev){
ev.preventDefault();
pageNumber=jQuery(this).data('page');
var str = '&pageNumber=' + pageNumber ;
jQuery.ajax({
type: "POST",
dataType: "html",
url: ajaxurl,
data: str,
success: function (data) {
var $data = jQuery(data);
if ($data.length) {
//Where i put the result
jQuery("#my-posts").append($data);

} else {
//If there is no results here
}
},
error: function (jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}

});
return false;
});


jrcollins comments:

Could you please explain in more detail? I know some basic PHP but I'm a complete beginner when it comes to Javascript/JQuery and Ajax.

Rempty comments:

There is a misstypo
$page=($_POST['pagecat'])?$_POST['pagecat']:1;
to
$page=($_POST['pageNumber'])?$_POST['pageNumber']:1;

jrcollins comments:

Ok, thanks. I'll try that.

jrcollins comments:

I'm working on it. I'll get back to you again soon.

jrcollins comments:

Hi, I created a page using a custom template to display the categories but I can't get the paging to work. When I navigate to page 2, the content displayed is the same as the first page.

Rempty comments:

Hi
Are you using this for the AJAX load?

check what of this query vars have the page number:

echo get_query_var( 'page' );
echo get_query_var( 'paged' );

$catpage =get_query_var( 'paged' )?get_query_var( 'paged' ):1;

And use it in your query array

paged' => $catpage,

jrcollins comments:

It's a page so it should be get_query_var( 'page' );. When I try echo get_query_var( 'page' );, it return "0" on the first page and then nothing on any subsequent pages.

Rempty comments:

global $wp_query;
print_r($wp_query);

And check if there is the parameter page or paged

jrcollins comments:

0WP_Query Object ( [query_vars] => Array ( [page] => 0 [pagename] => popular-categories [error] => [m] => [p] => 0 [post_parent] => [subpost] => [subpost_id] => [attachment] => [attachment_id] => 0 [name] => popular-categories [static] => [page_id] => 0 [second] => [minute] => [hour] => [day] => 0 [monthnum] => 0 [year] => 0 [w] => 0 [category_name] => [tag] => [cat] => [tag_id] => [author] => [author_name] => [feed] => [tb] => [paged] => 0 [meta_key] => [meta_value] => [preview] => [s] => [sentence] => [title] => [fields] => [menu_order] => [embed] => [category__in] => Array ( ) [category__not_in] => Array ( ) [category__and] => Array ( ) [post__in] => Array ( ) [post__not_in] => Array ( ) [post_name__in] => Array ( ) [tag__in] => Array ( ) [tag__not_in] => Array ( ) [tag__and] => Array ( ) [tag_slug__in] => Array ( ) [tag_slug__and] => Array ( ) [post_parent__in] => Array ( ) [post_parent__not_in] => Array ( ) [author__in] => Array ( ) [author__not_in] => Array ( ) [ignore_sticky_posts] => [suppress_filters] => [cache_results] => 1 [update_post_term_cache] => 1 [lazy_load_term_meta] => 1 [update_post_meta_cache] => 1 [post_type] => [posts_per_page] => 2 [nopaging] => [comments_per_page] => 50 [no_found_rows] => [order] => DESC ) [tax_query] => [meta_query] => WP_Meta_Query Object ( [queries] => Array ( ) [relation] => [meta_table] => [meta_id_column] => [primary_table] => [primary_id_column] => [table_aliases:protected] => Array ( ) [clauses:protected] => Array ( ) [has_or_relation:protected] => ) [date_query] => [post_count] => 1 [current_post] => -1 [in_the_loop] => [comment_count] => 0 [current_comment] => -1 [found_posts] => 1 [max_num_pages] => 0 [max_num_comment_pages] => 0 [is_single] => [is_preview] => [is_page] => 1 [is_archive] => [is_date] => [is_year] => [is_month] => [is_day] => [is_time] => [is_author] => [is_category] => [is_tag] => [is_tax] => [is_search] => [is_feed] => [is_comment_feed] => [is_trackback] => [is_home] => [is_404] => [is_embed] => [is_paged] => [is_admin] => [is_attachment] => [is_singular] => 1 [is_robots] => [is_posts_page] => [is_post_type_archive] => [query_vars_hash:WP_Query:private] => d68ed96762d3f3d3a7357f7bdbeff887 [query_vars_changed:WP_Query:private] => [thumbnails_cached] => [stopwords:WP_Query:private] => [compat_fields:WP_Query:private] => Array ( [0] => query_vars_hash [1] => query_vars_changed ) [compat_methods:WP_Query:private] => Array ( [0] => init_query_flags [1] => parse_tax_query ) [query] => Array ( [page] => [pagename] => popular-categories ) [queried_object] => WP_Post Object ( [ID] => 198 [post_author] => 1 [post_date] => 2016-09-20 01:52:10 [post_date_gmt] => 2016-09-20 01:52:10 [post_content] => [post_title] => Popular Categories [post_excerpt] => [post_status] => publish [comment_status] => closed [ping_status] => closed [post_password] => [post_name] => popular-categories [to_ping] => [pinged] => [post_modified] => 2016-09-20 09:48:33 [post_modified_gmt] => 2016-09-20 09:48:33 [post_content_filtered] => [post_parent] => 0 [guid] => http://www.myhomespa.net/?page_id=198 [menu_order] => 0 [post_type] => page [post_mime_type] => [comment_count] => 0 [filter] => raw ) [queried_object_id] => 198 [request] => SELECT wp_posts.* FROM wp_posts WHERE 1=1 AND (wp_posts.ID = '198') AND wp_posts.post_type = 'page' ORDER BY wp_posts.post_date DESC [posts] => Array ( [0] => WP_Post Object ( [ID] => 198 [post_author] => 1 [post_date] => 2016-09-20 01:52:10 [post_date_gmt] => 2016-09-20 01:52:10 [post_content] => [post_title] => Popular Categories [post_excerpt] => [post_status] => publish [comment_status] => closed [ping_status] => closed [post_password] => [post_name] => popular-categories [to_ping] => [pinged] => [post_modified] => 2016-09-20 09:48:33 [post_modified_gmt] => 2016-09-20 09:48:33 [post_content_filtered] => [post_parent] => 0 [guid] => http://www.myhomespa.net/?page_id=198 [menu_order] => 0 [post_type] => page [post_mime_type] => [comment_count] => 0 [filter] => raw ) ) [post] => WP_Post Object ( [ID] => 198 [post_author] => 1 [post_date] => 2016-09-20 01:52:10 [post_date_gmt] => 2016-09-20 01:52:10 [post_content] => [post_title] => Popular Categories [post_excerpt] => [post_status] => publish [comment_status] => closed [ping_status] => closed [post_password] => [post_name] => popular-categories [to_ping] => [pinged] => [post_modified] => 2016-09-20 09:48:33 [post_modified_gmt] => 2016-09-20 09:48:33 [post_content_filtered] => [post_parent] => 0 [guid] => http://www.myhomespa.net/?page_id=198 [menu_order] => 0 [post_type] => page [post_mime_type] => [comment_count] => 0 [filter] => raw ) )
There's both "page" and "paged".

jrcollins comments:

Ok, I tried it with "paged" and it's working now.

jrcollins comments:

I meant I got the paging to work on the page using the custom template. I don't have Ajax paging on the widget working yet.

jrcollins comments:

I put this in my functions.php file:
//First you need to define to your ajax path

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {
echo '<script type="text/javascript">
var ajaxurl = "' . admin_url('admin-ajax.php') . '";
</script>';
}


//Define the function to load ajax

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

function more_post_ajax(){

//assign the variable

$page=($_POST['pageNumber'])?$_POST['pageNumber']:1;
header("Content-Type: text/html");
//Do your querys etc

//Save your data in a variable
$out = '';
$out.='';
//return the html data
die($out);
}

jrcollins comments:

You have the Javascript in a function too. Would it be better to place in a separate file and link to it?

Rempty comments:

You don't need use the functions.php or any function i added before, because you created your own pagination in other page.

You must use this
http://api.jquery.com/load/
If you see the example
"Load another page's list items into an ordered list."
load all li from a external URL http://api.jquery.com/resources/load.html
and insert in the ol with ID new-projects



//A example of how apply to your requeriments.

<!--This is the DIV i'll replace with the results -->
<div id="container_results">
<!-- Here go all your categories listed-->
</div>
<div class="pagination">
<a class="link-class" href="url-categorypage/page/1">1</a>
<a class="link-class" href="url-categorypage/page/1">2</a>
<a class="link-class" href="url-categorypage/page/1">3</a>
... etc
</div>

Example of your page with paginations
<header/>
<div id="results_pagination">
<!-- Here Results of Pagination-->
</div>
<footer/>

Javascript (use a js or add it to your header or footer):

jQuery(document).ready(function(){
//Attach the click event to the "a links"
jQuery("a.link-class").click(function(ev){
ev.preventDefault();
//i guess that the href have the url of the next page
var url= jQuery(this).attr("href");
//Where you want to show the results, use div id;
var container_results=jQuery("#container_results");
//Here "#results_pagination" is the ID of the div that contain the results of your custom pagination page
container_results.load(url+" #results_pagination" );
});
});


Rempty comments:

Here a live example

https://plnkr.co/edit/uc50xFBUyQ2oMqKUnsl9?p=preview

"You can see the used files in the left sidebar"

jrcollins comments:

Ok, maybe if we start from the beginning again. As of now I have the custom page set up and have added the page links to the widget.

This is the HTML markup for displaying the categories:
<div id="gridwrap" class="block1 block1_grid">
<div class="row">
<article></article>
</div>
</div>

and this is the HTML markup for the page navigation:
<div id="gridwrap" class="block1 block1_grid">
<div class="row">
<article></article>
</div>
</div>

<div class="ft-paginate">
<nav class="navigation">
<div id="navwrap" class="nav-links">
<a>page links</a>
</div>
</nav>
</div>

jrcollins comments:

Sorry, I posted the HTML for the categories display twice.

jrcollins comments:

So far in my functions.php file I have the following code:

//First you need to define to your ajax path
add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {
echo '<script type="text/javascript">
var ajaxurl = "' . admin_url('admin-ajax.php') . '";
</script>';
}

//Define the function to load ajax

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

function more_post_ajax() {

//assign the variable
$page=($_POST['pageNumber'])?$_POST['pageNumber']:1;
header("Content-Type: text/html");

//Do your querys etc
//Save your data in a variable

$out = '';
$out.='';

//return the html data

die($out);
}

Rempty comments:

You dont need the code in the functions.php
Only the javascript, check the example.

jrcollins comments:

Here's a link to the [[LINK href="http://shoutkey.com/every"]]homepage[[/LINK]]. You can see the category widget at the bottom of the page.

jrcollins comments:

I tried placing the in the header.php file to test but it's not working:
<script>
jQuery(document).ready(function(){
//Attach the click event to the "a links"
jQuery("a.catlink").click(function(ev){
ev.preventDefault();
//i guess that the href have the url of the next page
var url= jQuery(this).attr("href");
//Where you want to show the results, use div id;
var container_results=jQuery("#gridwrap");
//Here "#results_pagination" is the ID of the div that contain the results of your custom pagination page
container_results.load(url+" #gridwrap_1" );
});
});
</script>

Rempty comments:

I'll check tomorrow in the morning is really late in my country

jrcollins comments:

Ok, thanks.

jrcollins comments:

I enqueued the script in the footer using:
function add_ajax_script() {
wp_register_script('ajax-implementation', '/wp-content/themes/codilight-child/scripts/ajax-implementation.js', array('jquery'), null, true);
wp_enqueue_script('ajax-implementation');
}

add_action( 'wp_enqueue_scripts', 'add_ajax_script' );

These are the contents of the file:
jQuery(document).ready(function(){
//Attach the click event to the "a links"
jQuery("a.catlink").click(function(ev){
ev.preventDefault();
//i guess that the href have the url of the next page
var url= jQuery(this).attr("href");
//Where you want to show the results, use div id;
var container_results=jQuery("#gridwrap");
//Here "#results_pagination" is the ID of the div that contain the results of your custom pagination page
container_results.load(url+" #gridwrap_1" );
});
});
When I click on the page link in the widget it takes me to the categories page.

Rempty comments:

there is an error in the js

$container_results.load($url + "#gridwrap_1");
change to
container_results.load($url + "#gridwrap_1");

jrcollins comments:

Ok, I tried that but now when I click to the next page nothing happens. I checked the console and it's showing this error:
Uncaught ReferenceError: $url is not defined ajax-implementation.js:10

Rempty comments:

change $url to url

Rempty comments:

change
container_results.load(url + "#gridwrap_1");
to
container_results.load(url + " #gridwrap_1");

jrcollins comments:

It's sort of working but it's loading the whole page instead of just the #gridwrap_1 element.

Rempty comments:

change
container_results.load(url + "#gridwrap_1");
to
container_results.load(url + " #gridwrap_1");

jrcollins comments:

That did it! Now I just have to fix the page links so they're working properly. Thanks for your help. I've already upvoted your answer. Is there anything else I need to do?

Rempty comments:

Your Welcome.
Please click
"Vote to award prize"

jrcollins comments:

Done. Thanks again.