Updating posts widget with AJAX

[jm2503]

Start a discussion

I am trying to set up a dynamic filter for posts widget in Elementor using Ajax. I did rewrite the code same as in ajax_render_widget() function from Widgets_Manager class. query_posts() function doesn't affect the updated render

Code below:

$posts_widget_html = $document->render_element($posts_widget);

returns html content for posts belonging to previous query (not the updated query i have put into query_posts()). What is missing in my code? Thank You in advance.

[jm2503]

function render_posts() 
{
	$postId = $_REQUEST["postId"];
	$elementId = $_REQUEST["elementId"];
	$categoryId = $_REQUEST["categoryId"];

    $document = \Elementor\Plugin::$instance->documents->get( $postId );

    if ( ! $document ) {
	return new \WP_Error(
	    'document_not_exist',
	    __( 'Document doesn\'t exist', 'elementor-pro' ),
	    [ 'status' => 404 ]
	);
    }

    $element_data = $document->get_elements_data();
	$widget = \Elementor\Utils::find_element_recursive( $element_data, $elementId );
		
	if ( empty( $widget ) ) {
		
	return new \WP_Error(
	    'Element_not_exist',
	    __( 'Posts widget doesn\'t exist', 'elementor-pro' ),
	    [ 'status' => 404 ]
	);
    }
	
	$test = query_posts(
			[
				'post_type' => 'post',
				'cat' => $categoryId,
			]
	);

    \Elementor\Plugin::$instance->documents->switch_to_document( $document );
    $html = $document->render_element($widget);

	wp_send_json_success($html);
	wp_die();
}

[pingram3541]

Thanks for this.

For anyone coming across this don't forget to update the front end widget's inner html with $html from response.success.

Oddities...if using ajax pagination you will want to update the url (history) as well as strip the admin ajax url from the pagination links. They are otherwise broken without doing this.

Once the fix is applied, ie links look like"/you-path/?e-loop..." they will now work but the first attempt (post filter) performs a page reload (successfully) but it's not ajax, I suspect the Elementor ajax click handler for the widget needs to be reinitialized but subsequent pagination link clicks do result in rendering via the ajax method. So again, it's a weird quirk but not a deal breaker atm.

Would love any input on how to reinit the ajax handler on the loop widget after being replaced in the dom. Thx again for this snippet.