Jump to content

Form Block Wrapper Observe Changes

Recommended Posts

Please see Form Block Wrapper Observe Changes.

Synopsis

Observe changes to the form wrapper of a form block and call custom callbacks as nodes are added or removed from the DOM.

Note

This code is a base for other effects.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 9 months later...

I have updated my code.

From the changes...

  • restructured the code
  • fix for user callbacks not running
  • bumped version to 0.3.0

The code should now cycle through all the added and removed nodes as provided by MutationObserver. Previously this wasn't the case. That was were the issue came up, SS made changes and things broke. For those writing code against my code. One important change. You now need to do checking for your node of interest in your callback. For example if you want to check for the new react based form to come on the DOM you'd do something like the following.

<script>

  var myNamedFunction = ( $node ) => {
  
    console.log ( 'myNamedFunction : ', $node );
    
    const b = ! $node.hasClass ( 'react-form-contents' );
    
    if ( b ) return; // bail if not react form
    
    };
    
  </script>

I am in the process of updating my effects that depend on this code. If you've used one of those check their posts in this forum.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.