Wordpress and Ajax Render


Wordpress and ajax load data on partial view file and render


HTML trigger ajax action


<button
class="ajax-update"
data-url="<?php echo admin_url('admin-ajax.php?action=filter_all'); ?>"
 >Load data</button>
<div class="ajax-screen">To fetch here</div>

JS call with ajax 


$("body").delegate(".li-all","click", function(){
me = $(this);
var ajaxUrl = me.attr("data-url");

if (ajaxUrl != undefined) {
$.ajax({
"url":ajaxUrl,
"data":{
},
"type":"POST",
dataType: 'html',
success:function(response){
$(".ajax-screen").html(response);
}
});
}
});

Wp end point for ajax call


add_action("wp_ajax_filter_all", "go_filter_all");
add_action("wp_ajax_nopriv_filter_all", "go_filter_all");

function go_filter_all() {
       // load html from partial view file
      // we can receive param  from GET and POST as required
get_template_part( 'template-parts/content', 'screen' );
}

Share this

Related Posts

Previous
Next Post »