Ajax Pagination on User Meta Data - ajax

Question

How can I set a pagination link in my AJAX if my script search user depends on user meta-data. The pagination works fine but the problem is with the pagination link not working. Can someone please help me figure out how to set the pagination link properly?
This is my AJAX script:
function nanny_search_ajax1() {
$search_in = $_POST['search_in'];
$search_type = $_POST['search_type'];
$start_date = $_POST['start_date'];
$keyword = $_POST['keyword'];
if($search_in=='nanny'){
$search_in ='interested';
}
else{
$search_in ='lookgin';
}
$start_value = $start_date;
$start_compare = '=';
$nanny_result = '';
$nanny_error = '';
$number = 2;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$offset = ($paged - 1) * $number;
$args = array(
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'user_start',
'value' => $start_value,
'compare' => $start_compare
)
),
'offset'=>$offset,
'number'=>$number,
);
$users = get_users();
$query = get_users($args);
$total_users = count($users);
$total_query = count($query);
$total_pages = intval($total_users / $number) + 1;
$query = get_users($args);
if (!empty($query)) {
foreach ($query as $user) {
$profile_picture = wp_get_attachment_url(get_user_meta($user->ID, 'be_custom_avatar', true));
$profile_picture = get_avatar($user->ID, 100);
if($search_in=='nanny'){
$interested = get_user_meta($user->ID, 'interested', true);
}
else{
$interested = get_user_meta($user->ID, 'lookgin', true);
}
$user_date = get_user_meta($user->ID, 'user_start', true);
$aboutme = get_user_meta($user->ID, 'aboutme', true);
$user_link = get_author_posts_url($user->ID);
$nanny_result .= "<div class='nanny-babysiter-box'>";
if ($profile_picture != '') {
$nanny_result .="<div class='nanny-babysiter-box-img'>$profile_picture</div>";
}
$nanny_result .="<div class='user-icons'><ul><li><a href='#'><i class='fa fa-circle-o'></i></a></li><li><a href='#'><i class='fa fa-envelope-o'></i></a></li><li><a href='#'><i class='fa fa-star'></i></a></li></ul></div>";
$nanny_result .="<div class='user-details'><div class='details-sub search-title'><a target='_blank' href='$user_link'><span>$user->display_name</span></a></div>";
$nanny_result .="<div class='details-sub'>$interested</div>";
if ($user_date != '') {
$nanny_result .="<div class='details-sub'><span>Start Date : </span>$user_date</div>";
}
if ($aboutme != '') {
$nanny_result .="<div class='details-sub'><span>About Me : </span></div>";
}
$nanny_result .="</div>";
if ($aboutme != '') {
$nanny_result .="<div class='details-sub'>$aboutme</span></div>";
}
$nanny_result .="</div>";
}
if ($total_users > $total_query) {
$nanny_result.='<div id="pagination" class="clearfix">';
$nanny_result.='<span class="pages">Pages:</span>';
$current_page = max(1, get_query_var('paged'));
$nanny_result.= paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%/',
'current' => $current_page,
'total' => $total_pages,
'prev_next' => false,
'type' => 'list',
));
$nanny_result.= '</div>';
}
} else {
$nanny_error = '<div>Unfortunately at present there is no one matching your exact search criteria. You may like to consider other candidates.</div>';
}
echo json_encode(array("nanny_result" => $nanny_result, "nanny_error" => $nanny_error));
die;
}
add_action('wp_ajax_nopriv_nanny_search_ajax1', 'nanny_search_ajax1');
add_action('wp_ajax_nanny_search_ajax1', 'nanny_search_ajax1');
Thank in advance.

Answer 1

I suspect your pagination links should be ajaxified as well, so you may be targeting them in javascript with smth like $('.prev-page').click(function(){ ... });. If this is your case - your pagination links are added to DOM after the page load and DOM parsing, so your click event is not binded to the target element. To bind javascript events to dynamically created/added DOM elements, use on() or delegate() methods, like $('.prev-page').on('click', function(){ ... }). See docs for details.