I am using swup.js for page transition and changing content via AJAX. Unfortunately Gravity forms does not seem to be handling the AJAX request well and my form is not working after transitioning.
I am using the following to reinitialize my scripts on page load:
document.addEventListener('swup:pageView', (event) => {
// code
})
Is there any function I could reinitialize in javascript so Gravity forms would reinitialize on each page transition? Could not find anything in the documentation.
I know the date of the post is far, but this question just popped to me and in case you could not find the answer,
try using this code, this will watch any changes applies to the DOM of the body and will trigger whatever you want:
<script>
$(document).on('DOMSubtreeModified', 'body', function (el) {
console.log('body content changed');
// append you init code here
});
</script>
Tell me if this is working or not.
Ended up using SwupFormsPlugin and Contact Form 7 with the following
document.addEventListener('DOMContentLoaded', function (event) {
var domain = window.location.origin // HACK: makes link selector relative
var isMobile = window.innerWidth < 800
if (isMobile) {
} else {
var swup = new Swup({
plugins: [
new SwupOverlayTheme({
color: '#eff6fb',
duration: 3000,
direction: 'to-bottom',
}),
new SwupBodyClassPlugin(),
new SwupFormsPlugin({ formSelector: 'form.wpcf7-form' }),
new SwupScrollPlugin({
doScrollingRightAway: false,
animateScroll: true,
scrollFriction: 0.3,
scrollAcceleration: 0.04,
}),
],
FORM_SELECTOR: 'form.wpcf7-form',
LINK_SELECTOR: 'a[href*="'.concat(
domain,
'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
),
})
swup()
}
})
function domReady (callback) {
document.readyState === 'interactive' || document.readyState === 'complete'
? callback()
: document.addEventListener('DOMContentLoaded', callback)
}
export { domReady }
Home it helps anyone