I have recently started using the latest version of Formulate instead of Umbraco Forms on an existing website and am having one issue due to what I assume is an issue of compatibility with another feature of the website.
I am using a JavaScript plugin called Barba.js to smooth out page transitions through fades. Barba achieves by loading pages in containers. It achieves transitions through loading a container with the requested page, fading the current page out, loading the new page and fading back in. So technically no full page navigation takes place. As a result any JavaScript methods that run on page load have to be manually loaded again through Barba's callback.
I currently have a simple form using plain JS (I have tried using the angularJS provided also) setup containing one field and button that sends an email out currently rendered to the page on load. This form exists on all my pages which works on first load or refresh. On page transition the new page is loaded but the new form is not rendered.
I have tried running the required JS file on Barba.js's callback (or just manually) but no form renders. I have not been able to get a form to render after a page transition.
Is there a function or anyway to force the rendering of a form? Is there some variables that need to be cleared to allow the plain js to be ran again?
You could perhaps also store that data in a secondary window object, then restore it to that object. If you run the Formulate JavaScript again after that, it may just be able to render the forms again.
Thanks for the quick response, from this I realised the new form's key wasn't being pushed through.
I think i've manage to come up with a solution. I've grabbed the function appended in the html and ran this inside a function I call after each transistion. It looks something like:
function Formulate_RenderForm() {
//Clear window array to avoid duplicates
window["formulate-plain-js-forms"] = [];
//Get Form Data from all form scripts
var renderFunc = $('*[id^="formulate-form-"]');
// Rerun functions
renderFunc.each(function () {
eval(renderFunc.text());
}); ... }
Please let me know if you know of any better solutions, otherwise thanks for you help!
Formulate and Barba.js Page transitions
Hi,
I have recently started using the latest version of Formulate instead of Umbraco Forms on an existing website and am having one issue due to what I assume is an issue of compatibility with another feature of the website.
I am using a JavaScript plugin called Barba.js to smooth out page transitions through fades. Barba achieves by loading pages in containers. It achieves transitions through loading a container with the requested page, fading the current page out, loading the new page and fading back in. So technically no full page navigation takes place. As a result any JavaScript methods that run on page load have to be manually loaded again through Barba's callback.
I currently have a simple form using plain JS (I have tried using the angularJS provided also) setup containing one field and button that sends an email out currently rendered to the page on load. This form exists on all my pages which works on first load or refresh. On page transition the new page is loaded but the new form is not rendered.
I have tried running the required JS file on Barba.js's callback (or just manually) but no form renders. I have not been able to get a form to render after a page transition.
Is there a function or anyway to force the rendering of a form? Is there some variables that need to be cleared to allow the plain js to be ran again?
Kind Regards, Lewis
I think Formulate may be clearing out the
window["formulate-plain-js-forms"]variable once it renders all the forms contained in it. This variable gets populated by theResponsive.Plain JavaScript.cshtmlfile here: https://github.com/rhythmagency/formulate/blob/4d264e92d0ee8f20506c20f117498ea2853aaa74/src/Website/Views/Partials/Formulate/Responsive.Plain%20JavaScript.cshtml#L226-L244Which ends up rendering like this:
You could perhaps also store that data in a secondary window object, then restore it to that object. If you run the Formulate JavaScript again after that, it may just be able to render the forms again.
You may also have to recreate the DOM elements for the forms so that Formulate knows where to insert the forms (supposing Barba.js removes that DOM element without restoring it). That DOM element happens to be a script tag, but I'm pretty sure it can be any kind of tag so long as it has the appropriate ID: https://github.com/rhythmagency/formulate/blob/4d264e92d0ee8f20506c20f117498ea2853aaa74/src/Website/Views/Partials/Formulate/Responsive.Plain%20JavaScript.cshtml#L226-L227
Disclaimer: I've never used Barba.js and I don't know how it works, so you'll have to do some testing to see if this will work for you.
Hi Nicholas,
Thanks for the quick response, from this I realised the new form's key wasn't being pushed through. I think i've manage to come up with a solution. I've grabbed the function appended in the html and ran this inside a function I call after each transistion. It looks something like:
Please let me know if you know of any better solutions, otherwise thanks for you help!
Kind Regards, Lewis
is working on a reply...