Created
May 18, 2024 19:29
-
-
Save Qubadi/7eb535d9bb74e21fe5236adabe04462f to your computer and use it in GitHub Desktop.
Smooth scroll to feedback message on Jetformbuilder form submission
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
Smooth scroll to feedback message on Jetformbuilder form submission | |
1. Copy the following JS code and create a JS snippet using your snippet plugins. Paste the code into the plugin and save it. | |
Description: | |
This script enhances the user experience of JetFormBuilder forms by automatically scrolling the view to display feedback | |
messages smoothly upon form submission. It utilizes jQuery and a MutationObserver to detect changes within the form, | |
ensuring that whether the form submission is successful or encounters errors, users are smoothly guided to the | |
feedback message. This feature is especially useful in long forms or on pages with substantial content, improving | |
visibility of form outcomes and reinforcing user interaction without manual scrolling. | |
__________________________________________________ | |
jQuery(document).ready(function($) { | |
function scrollToMessage() { | |
var message = $('.jet-form-builder-message--success, .jet-form-builder-message--error'); | |
if (message.length) { | |
$('html, body').animate({ | |
scrollTop: message.offset().top - 20 // Adjusted to add a little space above the message | |
}, 500); // Faster animation speed | |
} | |
} | |
// Scroll to the message if it exists when the page loads | |
scrollToMessage(); | |
// Use MutationObserver to handle AJAX submissions or dynamic content changes | |
var observer = new MutationObserver(function(mutations, obs) { | |
scrollToMessage(); | |
}); | |
observer.observe(document.body, { | |
childList: true, | |
subtree: true | |
}); | |
}); |
Is that any way possible to update listing grid without reload window ? ajax update or realtime update.
Explain more please before i say yes or no.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is that any way possible to update listing grid without reload window ? ajax update or realtime update.