Elementor widgets don't work after AJAX call (admin-ajax)
Elementor widgets don't work after AJAX call (admin-ajax)
I'm about to develop a Wordpress site with Elementor and we want to be able to pull in content from other pages into slide-in drawers / pop-up modals on click using AJAX.
I've gotten it to work with several different approaches including regular jQuery .ajax and .load and also using jQuery .ajax with Wordpress's admin-ajax.
However, after I pull in the other page's content, none of the Elementor widgets from that second page work correctly because it doesn't pull in their javascript.
I have actually used jQuery .load to literally pull in the entire page but that seems like a really bad idea because it also brings in the , and duplicates of many of the styles and scripts.
Anybody have any creative ideas for how to get this fully working? Any help is very much appreciated.
Here's my latest js and php from my admin-ajax attempt:
$('.pjax-link a').click(function(e){
e.preventDefault();
let currentPage = $(this).attr('href');
$.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
dataType: 'html',
data: {
action: 'weichie_load_more',
paged: currentPage,
},
success: function (response) {
$('#pjax-container').append(response);
}
});
});
PHP:
function weichie_load_more() {
$post_ID = url_to_postid( $_POST['paged'] );
$ajaxposts = new WP_Query( array( 'page_id' => $post_ID ) );
$response = '';
if($ajaxposts->have_posts()) {
while($ajaxposts->have_posts()) : $ajaxposts->the_post();
$response .= the_content();
endwhile;
} else {
$response = '';
}
echo $response;
exit;
}
add_action('wp_ajax_weichie_load_more', 'weichie_load_more');
add_action('wp_ajax_nopriv_weichie_load_more', 'weichie_load_more');
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)•Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand