elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.
https://elementor.com/
GNU General Public License v3.0
6.48k stars 1.41k forks source link

Elementor Popup JS conflict with Mautic error handling #11413

Open Aerendir opened 4 years ago

Aerendir commented 4 years ago

Prerequisites

Context

I have a page built with Elementor.

Clicking a button, this page opens a popup built with Elementor.

The popup contains a form to compile.

The form is built in Mautic and then embedded in the popup using the Manual Copy.

Error

If I submit the form with empty values Mautic should show an error message under the field (removing the rule display: none from the span used to show the error).

But, instead of doing this, I’m redirected to the same page, but with the error appended as query string.

Something like this:

https://www.example.com/my-page/?mauticError=Errors%3A<br%20%2F>

  1. L'e-mail%20contiene%20degli%20errori.<%2Fli>
  2. Devi%20accettare%20il%20trattamento%20dei%20tuoi%20dati%20personali%20o%20non%20ci%20sarà%20possibile%20farti%20accedere%20al%20"Video%20Studio"<%2Fli><%2Fol>#com_vender

    Expected behavior

    The form shows the errors without reloading

    Steps to reproduce

    It requires an active installation of Mautic.

    1. Create a popup in Elementor
    2. Create a page that open the popup clicking a button
    3. Create a form in Mautic with a mandatory email field
    4. Set the form to redirect after submission
    5. Manually embed the form in the Elementor popup
    6. Try to send an empty form

    Isolating the problem

    • [x] This bug happens with only Elementor plugin active (and Elementor Pro).
    • [x] This bug happens with a default WordPress theme active.
    • [x] I can reproduce this bug consistently using the steps above.

    What I tried

    1. First of all, I tried to preview the form directly in Mautic: the preview works correctly
    2. I then tried to embed the form in a blank post (via Manual Copy) and the form works correctly

    Conclusions

    I think there is a problem with the Elementor’s Popup JS.

    Previewing the popup in Elementor, in fact, the form correctly displays the errors.

    Only when I use it in a page the error is displayed.

    So it seems the js code that open the popup creates a conflict.

    Testing the same form in the Mautic’s preview and in a blank Wordpress post, instead, correctly checks the invalidity of the email and show correctly the errors.

    Only when the form is in a popup the error happens.

    Environment

    System Info ``` == Server Environment == Operating System: Linux Software: Apache MySQL version: MySQL Community Server (GPL) v5.6.47 PHP Version: 7.2.24 PHP Max Input Vars: 12000 PHP Max Post Size: 150M GD Installed: Yes ZIP Installed: Yes Write Permissions: All right Elementor Library: Connected == WordPress Environment == Version: 5.4.1 Site URL: https://www.commercianti.online Home URL: https://www.commercianti.online WP Multisite: No Max Upload Size: 150 MB Memory limit: 1024M Permalink Structure: /%category%/%postname%/ Language: it-IT Timezone: Europe/Rome Debug Mode: Inactive == Theme == Name: eCommerceRS Version: 0.15 Author: Aerendir Child Theme: Yes Parent Theme Name: Hello Elementor Parent Theme Version: 2.3.0 Parent Theme Author: Elementor Team == User == Role: administrator WP Profile lang: it_IT User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 == Active Plugins == Anti-Spam by CleanTalk Version: 5.138 Author: СleanTalk Caldera Forms Version: 1.8.11 Author: Caldera Labs eCommerceRS.NET Version: Author: Elementor Version: 2.9.8 Author: Elementor.com Elementor Pro Version: 2.9.4 Author: Elementor.com Google Tag Manager for Wordpress Version: 1.11.4 Author: Thomas Geiger HTML Editor Syntax Highlighter Version: 2.4.2 Author: James Bradford Imagify Version: 1.9.9 Author: WP Media iThemes Sync Version: 2.1.5 Author: iThemes Lazy Load - Optimize Images Version: 2.3.3 Author: WP Rocket LuckyWP Table of Contents Version: 2.1.2 Author: LuckyWP Rank Math SEO Version: 1.0.42.3 Author: Rank Math Social Warfare Version: 4.0.1 Author: Warfare Plugins Sucuri Security - Auditing, Malware Scanner and Hardening Version: 1.8.24 Author: Sucuri Inc. ThirstyAffiliates Version: 3.9.2 Author: Caseproof UpdraftPlus - Backup/Restore Version: 1.16.24 Author: UpdraftPlus.Com, DavidAnderson W3 Total Cache Version: 0.13.3 Author: BoldGrid Wordfence Security Version: 7.4.7 Author: Wordfence WP Crontrol Version: 1.8.3 Author: John Blackbourn & crontributors == Elements Usage == footer : 3 global : 1 html : 1 image : 1 social-icons : 1 text-editor : 5 wp-widget-nav_menu : 1 header : 4 global : 1 image : 1 page : 6 image : 2 text-editor : 2 popup : 2 facebook-page : 1 heading : 1 html : 1 text-editor : 3 single : 2 author-box : 1 divider : 1 html : 2 post-comments : 1 post-info : 1 theme-post-content : 1 theme-post-featured-image : 1 theme-post-title : 1 widget : 0 html : 25 wp-page : 3 button : 1 facebook-page : 1 heading : 3 icon-list : 1 image : 1 posts : 1 text-editor : 4 == Log == Log: showing 20 of 272020-03-14 17:47:02 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.9.3', 'to' => '2.9.6', )] 2020-03-23 18:19:58 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.8.5', 'to' => '2.9.1', )] 2020-03-23 18:20:04 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.8.5', 'to' => '2.9.1', )] 2020-03-23 18:21:03 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.8.5', 'to' => '2.9.1', )] 2020-03-23 18:22:03 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.8.5', 'to' => '2.9.1', )] 2020-03-23 18:25:03 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.8.5', 'to' => '2.9.1', )] 2020-03-25 20:04:50 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.9.6', 'to' => '2.9.7', )] 2020-03-25 20:05:03 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.9.6', 'to' => '2.9.7', )] 2020-04-03 11:20:03 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:41 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:44 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:48 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:49 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:51 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:52 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:53 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-04-03 11:20:58 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.1', 'to' => '2.9.2', )] 2020-05-07 16:25:34 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor', 'from' => '2.9.7', 'to' => '2.9.8', )] 2020-05-07 16:25:34 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.2', 'to' => '2.9.3', )] 2020-05-16 18:34:43 [info] Elementor data updater process has been completed. [array ( 'plugin' => 'Elementor Pro', 'from' => '2.9.3', 'to' => '2.9.4', )] PHP: showing 6 of 6PHP: 2020-03-23 20:00:22 [warning X 1][/home/waecomme/public_html/wp-content/plugins/elementor-pro/modules/assets-manager/asset-types/icons/custom-icons.php::180] unlink(online-shop.svg): No such file or directory [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2020-03-23 20:02:39 [warning X 1][/home/waecomme/public_html/wp-content/plugins/elementor-pro/modules/assets-manager/asset-types/icons/icon-sets/fontello.php::32] file_get_contents(/home/waecomme/php_sessions/fontello-d7773dfc/fontello-d7773dfc/css/.css): failed to open stream: No such file or directory [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2020-03-23 20:06:28 [warning X 1][/home/waecomme/public_html/wp-content/plugins/elementor-pro/modules/assets-manager/asset-types/icons/icon-sets/fontello.php::32] file_get_contents(/home/waecomme/php_sessions/fontello-5bd33017/fontello-5bd33017/css/.css): failed to open stream: No such file or directory [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2020-03-24 19:30:14 [notice X 1][/home/waecomme/public_html/wp-content/plugins/elementor-pro/modules/posts/widgets/posts.php::31] Undefined index: posts_post_type [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2020-03-24 19:31:50 [notice X 4][/home/waecomme/public_html/wp-content/plugins/elementor/includes/template-library/sources/local.php::692] ob_end_clean(): failed to delete buffer. No buffer to delete [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] PHP: 2020-03-25 17:47:38 [error X 2][/home/waecomme/public_html/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php::259] Uncaught Error: Call to a member function update_meta() on boolean in /home/waecomme/public_html/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php:259 Stack trace: #0 /home/waecomme/public_html/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php(180): ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->save_conditions(NULL, Array) #1 [internal function]: ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->ajax_save_theme_template_conditions(Array, Object(Elementor\Core\Common\Modules\Ajax\Module)) #2 /home/waecomme/public_html/wp-content/plugins/elementor/core/common/modules/ajax/module.php(171): call_user_func(Array, Array, Object(Elementor\Core\Common\Modules\Ajax\Module)) #3 /home/waecomme/public_html/wp-includes/class-wp-hook.php(288): Elementor\Core\Common\Modules\Ajax\Module->handle_ajax_request('') #4 /home/waecomme/public_html/wp-includes/class-wp-hook.php(312): WP_Hook->apply_filters('', Array) #5 /home/waecomme [array ( 'trace' => ' #0: Elementor\Core\Logger\Manager -> shutdown() ', )] JS: showing 10 of 10JS: 2020-03-26 17:58:55 [error X 5][https://www.commercianti.online/wp-content/plugins/elementor/assets/lib/e-select2/js/e-select2.full.min.js?ver=4.0.6-rc.1:1:74235] Cannot read property \'destroy\' of undefined JS: 2020-04-01 15:01:37 [error X 1][https://www.commercianti.online/wp-content/plugins/elementor/assets/js/editor.min.js?ver=2.9.7:31:161932] Cannot read property \'html\' of undefined JS: 2020-04-01 16:21:02 [error X 1][https://www.commercianti.online/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5:22:19954] View (cid: \"view17892\") has already been destroyed and cannot be used. JS: 2020-04-01 16:21:02 [error X 1][https://www.commercianti.online/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5:22:19954] View (cid: \"view17226\") has already been destroyed and cannot be used. JS: 2020-04-01 16:21:02 [error X 1][https://www.commercianti.online/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5:22:19954] View (cid: \"view8002\") has already been destroyed and cannot be used. JS: 2020-04-01 22:40:47 [error X 1][https://www.commercianti.online/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5:22:19954] View (cid: \"view43627\") has already been destroyed and cannot be used. JS: 2020-04-15 14:29:32 [error X 11][https://www.commercianti.online/wp-content/plugins/elementor/assets/js/editor.min.js?ver=2.9.7:7:57120] Blocked a frame with origin \"https://www.commercianti.online\" from accessing a cross-origin frame. JS: 2020-04-15 14:59:45 [error X 5][https://www.commercianti.online/wp-content/plugins/elementor/assets/js/editor.min.js?ver=2.9.7:7:0] Permission denied to access property \"elementorFrontend\" on cross-origin object JS: 2020-05-16 17:09:53 [error X 2][https://www.commercianti.online/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5:22:19954] View (cid: \"view1172\") has already been destroyed and cannot be used. JS: 2020-05-16 17:09:56 [error X 1][https://www.commercianti.online/wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5:22:19954] View (cid: \"view3000\") has already been destroyed and cannot be used. ```
Corsnec commented 2 years ago

Hello,

I have exactly the same problem.

MilaGuilherme commented 2 years ago

I also have the same problem.

StarAle commented 2 months ago

Hello... I've found a "workaround" for this bug. This my procedure:

  1. DO NOT use Mautic shortcode inside Elementor popup;
  2. Instead use an Elementor's HTML widget;
  3. In Mautic module create a HTML field and write a JavaScript validation for your fields in your Mautic module using the "onValidate()" method that you can find here: https://devdocs.mautic.org/en/5.x/form_hooks/validation_hooks.html
  4. Go to your Mautic module and use "manual copy" of code;
  5. Insert that code inside Elementor HTML widget;

In this way it seems that Mautic do not call the server for fileds validations and it use, instead, your JavaScript code. This is my code, inserted in HTML field of my Mautic module (this is NOT a good JS code, but that's it):

<script> 
var formName = 'modulodownloadguidasalento2024';
if (typeof MauticFormCallback == 'undefined') {
    console.log('MauticFormCallback UNDEFINED');
    var MauticFormCallback = {};
}
var rsm_today = new Date();
var rsm_date = rsm_today.getFullYear()+'-'+(rsm_today.getMonth()+1)+'-'+rsm_today.getDate();
var rsm_time = rsm_today.getHours() + ":" + rsm_today.getMinutes() + ":" + rsm_today.getSeconds();

MauticFormCallback[formName] = {
    onValidate: function () {
        console.log('START VALIDATION');
        document.getElementById('mauticform_modulodownloadguidasalento2024_error').innerHTML = '';
        let name = document.getElementById('mauticform_input_modulodownloadguidasalento2024_nome1').value;
        let surname = document.getElementById('mauticform_input_modulodownloadguidasalento2024_cognome').value;
        let email = document.getElementById('mauticform_input_modulodownloadguidasalento2024_email').value;
        let atPosition = email.search("@");
        let privacy = document.getElementById('mauticform_checkboxgrp_checkbox_privacy_policy1_10').checked;

        if (name.length<3 || surname.length<3 || email.length<10 || atPosition == -1 || !privacy) {
            document.getElementById('mauticform_modulodownloadguidasalento2024_error').innerHTML = 'Compila correttamente i campi...';
            return false;
        } else {
            document.getElementById('mauticform_input_modulodownloadguidasalento2024_hiddendate').value = rsm_date;
            return true;
        }
    },
    onValidateStart: function () {
        document.getElementById('mauticform_input_modulodownloadguidasalento2024_hiddendate').value = rsm_date;
    }, 
};
</script>

I hope this can help someone. Regards.