How to rerender elementor posts widget with an ajax call?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Add AJAX endpoint for retrieving updated posts content
function get_updated_posts_content() {
    // Add your logic to retrieve and return the updated content for the posts widget
    // For example, you can use WP_Query to fetch the posts
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
    );
    $posts_query = new WP_Query($args);

    ob_start();
    if ($posts_query->have_posts()) {
        while ($posts_query->have_posts()) {
            $posts_query->the_post();
            // Display the post content here
        }
    }
    $content = ob_get_clean();

    echo $content;

    wp_die();
}

add_action('wp_ajax_get_updated_posts_content', 'get_updated_posts_content');
add_action('wp_ajax_nopriv_get_updated_posts_content', 'get_updated_posts_content');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Custom JavaScript function to make an AJAX call to retrieve the updated posts content
function getUpdatedPostsContent() {
    jQuery.ajax({
        url: ajaxurl,
        type: 'post',
        data: {
            action: 'get_updated_posts_content',
        },
        success: function(response) {
            // Update the posts widget content with the updated data
            jQuery('.elementor-posts').html(response);
        }
    });
}

// Add event listener to trigger the AJAX call
jQuery(document).ready(function() {
    // For example, trigger the AJAX call when a button with the class 'refresh-posts' is clicked
    jQuery('.refresh-posts').on('click', function() {
        getUpdatedPostsContent();
    });
});