Skip to content

Instantly share code, notes, and snippets.

@Lonsdale201
Last active March 20, 2025 02:30
Show Gist options
  • Save Lonsdale201/d5427e41d7a37caf4ed022a52a3a50d1 to your computer and use it in GitHub Desktop.
Save Lonsdale201/d5427e41d7a37caf4ed022a52a3a50d1 to your computer and use it in GitHub Desktop.
JetFormBuilder - Formless Action success reload jetengine lisitng grid with ajax
(function($) {
'use strict';
/**
* Developer note:
* This code use the native "fetch" function to intercept AJAX calls
* for the 'remoovehouuse' endpoint. When it detects a successful (HTTP 200)
* response with `{"code":"success"}`, it automatically reloads all Listing Grids
* that have the class ".formless-ajax.elementor-widget-jet-listing-grid".
* Change the .formless-ajax if you want to use different class target
* Just add the .formless-ajax class to your lisitng grid widget
* Sample image https://prnt.sc/wesVrcH9cLrx
* This code work with jetFormBuilder + JetEngine + Formless aciton endpoints
* https://jetformbuilder.com/addons/formless-actions-endpoints/
*
* If you want to monitor a different AJAX action (endpoint),
* just replace "remoovehouuse" in the code with your own string. (AJAX SLUG)
* Sample image https://prnt.sc/5QemaxvQE5Jb
* Your formless Action type Set to WordPress AJAX
*/
/**
* Reloads a single JetEngine Listing Grid via AJAX.
*
* @param {jQuery} $widget - The widget container, e.g. .elementor-widget-jet-listing-grid
*/
function reloadListingGrid($widget) {
// Get the listing's "nav" data object from the rendered grid items
const navData = $widget.find('.jet-listing-grid__items').data('nav');
if (!navData) {
// If there's no nav data, we can't reload this widget
return;
}
// Prepare JetEngine's built-in AJAX parameters
const args = {
handler: 'get_listing',
container: $widget.find('.elementor-widget-container'),
masonry: false,
slider: false,
append: false,
query: navData.query,
widgetSettings: navData.widget_settings
};
// Use JetEngine's ajaxGetListing to refresh the grid
window.JetEngine.ajaxGetListing(args, function(response) {
// Replace the old listing HTML with the new one
const $container = $widget.children('.elementor-widget-container');
const $result = $(response.data.html);
$container.html($result);
// Re-initialize JetEngine scripts on the new content
window.JetEngine.widgetListingGrid($widget);
window.JetEngine.initElementsHandlers($container);
});
}
// Store the original fetch function for later use
const originalFetch = window.fetch;
/**
* Replace the global fetch with our patched version.
* If it finds "remoovehouuse" in the URL, it checks for a success response.
* On success, reloads the relevant Listing Grid(s).
*/
window.fetch = function(...args) {
// The first argument should be the URL (string or Request object).
const requestUrl = args[0];
const isRemooveHouse =
(typeof requestUrl === 'string' && requestUrl.includes('remoovehouuse'));
// If it's not our target endpoint, skip the custom logic
if (!isRemooveHouse) {
return originalFetch.apply(this, args);
}
// Otherwise, fetch and then parse the response
return originalFetch.apply(this, args).then(response => {
// We only proceed if HTTP status is OK
if (response.ok) {
const responseClone = response.clone();
// Attempt to parse JSON
return responseClone.json().then(data => {
// Check if the server responded with { code: 'success' }
if (data.code && data.code === 'success') {
// Reload all Listing Grids that have the custom classes .formless-ajax add this class to your lisitng grid
const $grids = $('.formless-ajax.elementor-widget-jet-listing-grid');
if ($grids.length) {
console.log('[ListingReload] "remoovehouuse" success. Reloading grids...');
$grids.each(function() {
reloadListingGrid($(this));
});
} else {
console.log('[ListingReload] "remoovehouuse" success, but no grids found to reload.');
}
}
return response;
}).catch(() => {
// If JSON parse fails, just return the original response
return response;
});
}
return response;
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment