-
-
Save Lonsdale201/d5427e41d7a37caf4ed022a52a3a50d1 to your computer and use it in GitHub Desktop.
JetFormBuilder - Formless Action success reload jetengine lisitng grid with ajax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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