The BlockRevealers popup is not receiving any response from the Gravity Form AJAX functionality

Gravity form is functioning properly with magnific popup, but encountering issues with this block revealer. I have verified that the default form ajax works within the block revealer. Kindly review the HTML and JS code.

Block Revealer used - Block Revealer

HTML

<button id="event-rental-form-trigger" class="btn btn-primary" title="Click Me">Click Me</button>

 <div id="event-rental-modal" class="modal">

   <span id="event-rental-modal-close" class="i-close event-rental-modal-close"></span>

   <div class="form-block caps">
      <h2 class="text-center pad-bottom-sm">Event Rental Request</h2>
      <?php echo do_shortcode('[gravityform id=1 title=false description=false ajax=true]'); ?>
   </div><!-- .form-block -->

 </div><!-- .modal -->

JS

if ($('#event-rental-modal').length) {
var eventRentalModalEl = document.querySelector('#event-rental-modal'),
    eventRentalModalRevealer = new RevealFx(eventRentalModalEl),
    //deleteCtrl = modalEl.querySelector('#newsletter-form-trigger'),
    eventRentalModalCloseCtrl = eventRentalModalEl.querySelector('#event-rental-modal-close');

document.querySelector('#event-rental-form-trigger').addEventListener('click', function () {
  eventRentalModalEl.classList.add('modal--open');
  $('#site-wrapper').addClass('js-overlay');
  eventRentalModalRevealer.reveal({
    bgcolor: '#393E46',
    direction: 'tb',
    duration: 400,
    easing: 'easeOutCirc',
    onCover: function (contentEl, revealerEl) {
      contentEl.style.opacity = 1;
    },
    onComplete: function () {
      eventRentalModalCloseCtrl.addEventListener('click', closeEventRentalModal);
    }
  });
});

function closeEventRentalModal(ev) {
  eventRentalModalCloseCtrl.removeEventListener('click', closeEventRentalModal);
  $('#site-wrapper').removeClass('js-overlay');
  eventRentalModalEl.classList.remove('modal--open');
  eventRentalModalRevealer.reveal({
    bgcolor: ev.target.classList.contains('event-rental-modal-close') ? '#393E46' : '#FFB823',
    direction: 'bt',
    duration: ev.target.classList.contains('even-rental-modal-close') ? 200 : 400,
    easing: 'easeOutCirc',
    onCover: function (contentEl, revealerEl) {
      contentEl.style.opacity = 0;
    },
    onComplete: function () {
      modalEl.classList.remove('modal--open');
    }
  });
}

}

javascriptajaxwordpressgravity-forms-plugin

Answer №1

After much troubleshooting, I finally managed to resolve the issue at hand. The problem stemmed from the fact that the block reveal js was wrapping the div with another div having the class "block-revealer__content" for animation purposes, causing a conflict with the Javascript used by Gravity Forms.

To fix this, I implemented some custom jQuery functions which resolved the issue seamlessly.

 $('.modal-trigger').on('click', function () {
   var modalID = $(this).attr('id');
   var animatingColor  = '#393E46';

   if($('.' + modalID).hasClass('tour-schedule-modal')){
     var animatingColor  = '#FFB823';
   }

   var commonModalRevealItem = document.querySelector('.' + modalID);
   var commonModalRevealer = new RevealFx(commonModalRevealItem);

   $('#popup-overlay').addClass('js-active');

   commonModalRevealer.reveal({
     bgcolor: animatingColor,
     direction: 'tb',
     duration: 300,
     easing: 'easeOutCirc',
     onCover: function (contentEl, revealerEl) {
       commonModalRevealItem.classList.add('modal--open');
       contentEl.style.opacity = 1;
     }
   });

   $('.' + modalID).find('.modal-close').on('click', function () {
     closeModal();
   });

   $('#popup-overlay').on('click', function () {
     closeModal();
   });


   function closeModal() {
     $('.modal').remove('modal--open');
     commonModalRevealer.reveal({
       bgcolor: animatingColor,
       direction: 'bt',
       duration: 300,
       easing: 'easeOutCirc',
       onCover: function (contentEl, revealerEl) {
         contentEl.style.opacity = 0;
       },
       onComplete: function () {
         commonModalRevealItem.classList.remove('modal--open');
         if ($('.' + modalID + ' .modal-inner').parent().hasClass('block-revealer__content')) {
           $('.' + modalID + ' .modal-inner').unwrap();
           $('.modal .block-revealer__element').remove();
         }
         $('#popup-overlay').removeClass('js-active');
       }
     });
   }


   var gfScript = new Function($('.' + modalID + ' script').text());
   gfScript();`

});

.modal-trigger - Trigger button for opening popup

modalID - ID of the button (popup associated with same id as class )

Gravity form reloading code

var gfScript = new Function($('.' + modalID + ' script').text());

gfScript();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The concept of variables within the jQuery each function

Can someone provide assistance? I want the variables id, zIndex, and width inside the function to be defined after jQuery.each is called, with their values coming from the array passed to the function MyFunction: console.log(id); //ID IS NOT DEFINED con ...

javascriptjquery

Revamping status and backend systems

Seeking advice on the most effective method to execute a HTTP PUT request within my react application. A Post component is responsible for fetching data from https://jsonplaceholder.typicode.com/posts/1 and displaying it. There's another component na ...

javascriptreactjs

Custom order functionality in WordPress is malfunctioning

I am currently developing a website where I have created a custom post type for products. I want to give customers the ability to choose how the products are ordered when browsing a category. The script I tested on the default WordPress theme works fine, b ...

phpwordpress

The collaboration of Nodemon and Redwood-Broker

I have been running Nodemon in my express app without any special configuration. In my package.json file, I only have the following: "scripts": { "start:dev": "nodemon app/app.js" } ... Everything runs smoothly until I make changes and Nodemon attempts ...

javascriptmacosexpressnodemon

Craft a function within the recompose library

As I was exploring the compose function in recompose library by @acdlite to combine boundary conditions for Higher Order Components, I came across two different implementations of the compose function: const compose = (...funcs) => funcs.reduce((a, b) ...

javascriptreactjsfunctional-programmingreducehigher-order-functions

"Radio button is set as default option, however the dropdown menu is not displaying

I am experiencing an issue with a credit card payment form on my website. Unlike similar websites where the dropdown list of credit cards automatically displays when the page loads, on this site the list does not show until a second click occurs on the alr ...

javascripthtmlforms

Authorization based on user roles in Node.js or Express.js

Are there any modules available for implementing role-based authorization in node.js or Express js? For example, having roles such as Super Admin, Admin, Editor, and User? ...

javascriptnode.jsexpressauthorizationuser-roles

Retrieving information from a database using Ajax in CakePHP

Seeking assistance on how to retrieve data from a database using an ajax call. Having trouble finding reliable resources. Any guidance would be much appreciated. Thank you. ...

phpajaxcakephpcakephp-1.3

Pass numerous URL parameters through an ajax get request

Currently, I am working on developing an ajax page for my project. In this page, I need to send an ajax request with multiple URL parameters. These parameters should be retrieved from HTML text boxes. Strangely, when I pass the parameters using code direct ...

htmlajaxparametersget

A guide on looping through objects using key-value pairs in javascript

Currently, I am putting together a JSON API using express and node. The code is almost fully functional, but I am stuck on how to display the key name in the output. Here's what I have accomplished so far... for (var k in req.body) { if (req.body ...

javascriptnode.jsobjectexpressjavascript-objects

Adding variables and appending using jQuery

When using the append method to add HTML content dynamically to a div, I encountered an issue while trying to insert an iframe. Specifically, I needed to pass a variable's value to this frame for it to function properly. Here is the code snippet: va ...

phpjavascriptjqueryiframeappend

Having Trouble Assigning a Value to a Dropdown Menu in AngularJS

I am working with a DropDown feature where I am using ng-repeat to bind values to the options. My goal is to set the selected value based on the 'value' field only. Below is the code snippet: <div ng-controller="myCtrl"> <select ng ...

javascriptjqueryangularjs

Is the history object automatically passed to child components within the Router in react-router-dom?

Is it normal for the Router component to automatically pass down the history object to child components? To showcase this concept, consider the following code snippet: App.js ; const App = () => { return ( <> <h1>Hello</h1&g ...

javascriptreactjsreact-router-dom

ng-if is failing to function properly, whereas ng-show is successful

My goal was to showcase items in a list using Angular js, aiming to arrange the items neatly with 3 items per row by utilizing the following code: <div class='row-fluid' ng-repeat="region in regions" ng-show="$index % 3 == 0"> &l ...

javascriptangularjs

What's the best way to showcase information from a document on the screen?

Every time I visit the '/gallery' route, the data from the 'posts.json' file is retrieved. By utilizing the 'fs' module and the read() method, the data is read from the file and stored in the this.pictures array. However, upon ...

javascriptnode.jsexpressecmascript-6routes

Using the data argument with jQuery .load() method does not perform a POST request

The documentation states that when using load() with a second (data) argument, the data should be posted. However, it seems like this is not working as expected. $('#open').load('ajax/open_map.php',$('.frm_open').serialize()) ...

jqueryajax

Exploring the Power of Modules in NestJS

Having trouble with this error - anyone know why? [Nest] 556 - 2020-06-10 18:52:55 [ExceptionHandler] Nest can't resolve dependencies of the JwtService (?). Check that JWT_MODULE_OPTIONS at index [0] is available in the JwtModule context. Possib ...

javascripttypescriptmodulenode-modulesnestjs

Tips for Locating an Element by Its Attribute in JQuery

I currently have a variable that holds a list of selects, and my goal is to filter out only those with a 'dependsOn' attribute set to 'EventType'. My initial attempt below doesn't seem to work as intended and returns a count of 0: ...

javascriptjqueryhtmlcssselect

Using VueJS to transfer data from the main element to child components via router-view

Typically, when I need a variable that multiple child components should access, I usually store it in the data object of my root Vue element and then pass it down to child components through properties. However, since I've started using vue-router, m ...

javascriptvue.jsvue-componentvue-routervuex

Troubleshooting: Why is the express.js container not accepting connections on an exposed/published port while using boot2docker?

An issue I am facing involves a basic hello world express.js application running inside a docker container on port 8080. The Dockerfile exposes this port in the image, and when the image is run, the port is published as well. However, when attempting to ma ...

javascriptnode.jsportdockerlinux-containers