Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Lewis Logan 21 posts 132 karma points
    Feb 13, 2019 @ 16:29
    Lewis Logan
    1

    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

  • Nicholas Westby 1883 posts 6259 karma points c-trib
    Feb 13, 2019 @ 17:26
    Nicholas Westby
    100

    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 the Responsive.Plain JavaScript.cshtml file here: https://github.com/rhythmagency/formulate/blob/4d264e92d0ee8f20506c20f117498ea2853aaa74/src/Website/Views/Partials/Formulate/Responsive.Plain%20JavaScript.cshtml#L226-L244

    Which ends up rendering like this:

    Screenshot of Formulate setting form data on the window object.

    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.

  • Lewis Logan 21 posts 132 karma points
    Feb 14, 2019 @ 09:57
    Lewis Logan
    0

    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:

    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!

    Kind Regards, Lewis

Please Sign in or register to post replies

Write your reply to:

Draft