Difference between dates mu-plugin does not display the form without AJAx

Hi @fergsarroca,

Thank you for reaching out to us.

Can you please export the form and share the same with us using Google Drive or pastebin.com? This will help us to take a closer look at the issue at our end.

I hope the following guide comes in handy: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

We look forward to hearing back from you.

Kind Regards,
Nebu John

Sure Nebu,

Here is the exported file:
https://drive.google.com/file/d/1zFGGUrNTN8PX2P7OttnUf0NpX4AsD_IO/view?usp=sharing

Thanks

• This reply was modified 1 year, 3 months ago by fergsarroca.

Hi @fergsarroca

Thank you for sharing the form.

The page with the form (on your site) is still this one, right?

https://europesurfschool.com/contact/

I’ve imported form to my setup and it works fine there – showing up on both desktop and mobile devices; also with the custom code (from that other ticket) added to site.

However, on your site I noticed something that doesn’t look quite right:

– there are two errors in browser console about some JS/jQuery objects not being defined
– and both also point to what appears to be Formiantor scripts but loaded in an unexpected way – they seem to be returned by an ajax as a base64 encoded content.

This is something that Forminator itself does not do out of the box (unless something is causing its or site’s ajax scripts to malfunction).

With that being said:

1. do you have any plugins or theme features or server-side tools active that are meant to optimize assets (JS specifically) delivery in any way? If yes
– what are those?
– would you be able to try to disable them temporarily and see what happens?

2. what happens if you temporarily switch site to one of default themes such as “Twenty Twenty-Three” or “Twenty Twenty-Four”?

3. did you try to regenerate Elmenetor assets on site? There’s an option to do this under “Elementor -> Tools” page in “General” tab.

Kind regards,
Adam

Yes, it’s still the same.

Thank you @wpmudev-support8 for checking the form; it wasn’t an issue, but I appreciate your assistance. There’s so much work in this form ??

Regarding the errors you mentioned, changing the theme didn’t affect it, regenerating Elementor assets didn’t help either. However, I found a conflict with Lightspeed. When I disabled it, the form worked perfectly on the Contact page. But when embedded in a pop-up, specifically with the mu-plugin, the calendar doesn’t appear, making it impossible to select dates and run the mu-plugin in the next “number-1” field.

Even when setting the dates manually, the “number-1” field dosn’t fill. I need to figure out if the mu-plugin can function within a pop-up and investigate Lightspeed’s compatibility. Lightspeed is crucial for passing Google’s PageSpeed Insights tests, so I can share those settings if needed.

Thank you again for your help.

Best regards,

Fernando

• This reply was modified 1 year, 3 months ago by fergsarroca.
• This reply was modified 1 year, 3 months ago by fergsarroca.
• This reply was modified 1 year, 3 months ago by fergsarroca.
• This reply was modified 1 year, 3 months ago by fergsarroca.

Hi @fergsarroca,

Glad to hear you have managed to rule out the conflict. Most probably the minification settings might be causing the issue within the LiteSpeed plugin.

You could try ruling it out by disabling the settings one by one within the plugin side and see what exact option is causing it. This should help in giving a better idea of how to move forward.

Best Regards,

Nithin

Hi @wpmudevsupport11,

Despite deactivating LiteSpeed, the problem persists. Specifically, when the form, with the mu-plugin, is embedded in a pop-up. The calendar doesn’t display, hindering the selection of dates. This make additionally, the mu-plugin not to operate in the “number-1”.

Even when attempting to manually set the dates, the “number-1” field remains unfilled.

Any further advice on how to resolve this would be greatly appreciated.

Best Regards,

Fernando

Hi @fergsarroca,

Sorry to hear it’s still an ongoing issue. Possible to share a screenshot of what exactly you notice on your side when the issue occurs in a small Sccreen?

At the moment, it appears the form is loading fine when I check your /contact form.

A screenshot would help in giving a better idea if the issue occurs when any specific fields are filled or not etc

You can share using the Google Drive as done before., looking forward to your response.

Kind Regards,

Nithin

Hi @wpmudevsupport11,

Thanks for the guidance. Just to clarify, the form operates perfectly on the page, but the trouble arises when it’s embedded within a pop-up. I’ve captured a screenshot illustrating the issue. You can take a look at it here.

As you can see in the screenshot, the calendar dropdown doesn’t appear, preventing users from setting the dates. This issue directly impacts the calculations in “number-1” field, which is crucial for the form’s operation..

Your assistance in resolving this matter is greatly appreciated.

Best regards,

Fernando

• This reply was modified 1 year, 2 months ago by fergsarroca.
• This reply was modified 1 year, 2 months ago by fergsarroca.

Hello Fernando,

Thank you for the clarification.

Could you please try adding the following CSS rules in your theme options, or in the form itself, under Appearance >> Custom CSS:

.select2-container {z-index: 9999999!important; } 
#ui-datepicker-div {z-index: 9999999!important; }

If that still doesn’t help, please let us know which plugin you’re using for displaying popups. I’ve tested your form with our Hustle plugin, but could not replicate the issue.

Best Regards,
Dmytro

Hi Dmytro (@wpmudevsupport16),

Thank you for the CSS suggestions. With the implemented rules, the calendars now drop down within the pop-up when the form is embedded. However, the calculation issue in the “Nights” (number-1) field persists. It seems the mu-plugin isn’t functioning when the form is in the pop-up.

You can take a look at the issue here.

Regarding the plugin used for pop-ups, we’re using Elementor.

Your continuous support is immensely appreciated.

Best Regards,
Fernando

Hi @fergsarroca,

Hope this message finds you well.

I could not reproduce the issue on my end, would you let us know which version you are using? Since is a PRO plugin could you share the installer via email? Please upload that file to any file sharing service like GDrive or Dropbox and send us the download link to this email address: [email protected]

Subject: ATTN: WPMU DEV support - wp.org

Please send:
– Link to your WordPress site
– Download the link to the file
– Link back to this thread for reference (https://www.ads-software.com/support/topic/difference-between-dates-mu-plugin-does-not-display-the-form-without-ajax/)
– Any other relevant URLs/info

To ensure we don’t miss your email, please let us know here once you’ve submitted the form and make sure you use “ATTN: WPMU DEV support – wp.org” as the email subject.

Best regards,
Laura

Hi Laura (@wpmudevsupport3),

I wanted to confirm that I’ve followed your instructions. I’ve sent the necessary email containing the required information and the Elementor Pro installer link to the provided email address: [email protected] with the subject “ATTN: WPMU DEV support – wp.org”.

Once again, thank you for your assistance in addressing this matter.

Best regards, Fernando

• This reply was modified 1 year, 2 months ago by fergsarroca.

Hi @fergsarroca,

Thanks, we received it.

Please take a look at your inbox.

Cheers,

Laura

Hello @fergsarroca ,

Please try the updated snippet:

add_action( 'wp_footer', function(){
	?>
	<script>
		(function($){
			$(function(){
                $( document ).on( 'elementor/popup/show', (e, id) => {
                    let _form_id = 6; // Please change the form ID.
                    if ( $('#elementor-popup-modal-'+id).find('#forminator-module-'+ _form_id).length > 0 ) {
						let _date_field_id1 = 'date-1',
						_date_field_id2 = 'date-2',
						_days_field_id = 'number-1',//or enter text-field id
						_separated_date = '/',
						_form = $('#elementor-popup-modal-'+id).find('#forminator-module-'+ _form_id);
                        if( _form.length ){
                            let _date_field1 = _form.find('[name="'+ _date_field_id1 +'"]' ),
                                    _date_field2 = _form.find('[name="'+ _date_field_id2 +'"]' );
                            // 		_default_value1 = _date_field1.val(),
                            // 		_default_value2 = _date_field1.val();

                            _date_field1.on('change', function(){
                                let _value = $(this).val();
                                if( _value ){
                                    _date_field2_value = _date_field2.val();
                                    if( _date_field2_value ){
                                        calc_days( _value.split(_separated_date), _date_field2_value.split(_separated_date), $(this).data('format').split( _separated_date ) );
                                    }
                                }
                            });

                            _date_field2.on('change', function(){
                                let _value = $(this).val();
                                if( _value ){
                                    _date_field1_value = _date_field1.val();
                                    if( _date_field1_value ){
                                        calc_days( _date_field1_value.split(_separated_date), _value.split(_separated_date), $(this).data('format').split( _separated_date ) );
                                    }
                                }
                            });

                            function calc_days( _date_value_1, _date_value_2, _date_format ){
                                let _date1 = {}, _date2 = {};
                                for( let _t in _date_format ){
                                    _date1[ _date_format[_t] ] = _date_value_1[ _t ];
                                    _date2[ _date_format[_t] ] = _date_value_2[ _t ];
                                }

                                // Fill age field.
                                _date1 = new Date(_date1['yy'], _date1['mm'], _date1['dd'] );
                                _date2 = new Date(_date2['yy'], _date2['mm'], _date2['dd'] );
                    _form.find('[name="'+ _days_field_id +'"]').val( Math.round( Math.abs( _date2 - _date1 ) / 86400000 ) );
                            }
                        }
                    }
                });
			});
		})(window.jQuery);
	</script>
	<?php
}, 21 );

kind regards,
Kasia

Hi Kasia,

Thank you for the updated snippet. I attempted to implement it by creating a new mu-plugin and removing the previous snippet. However, upon adding the new code, I encountered a critical error resulting in a white screen.

Subsequently, I tried using both the new snippet and the old one simultaneously (although I understand this might not be the ideal approach), but encountered the same issue.

Here’s a screenshot of the error for reference.

To troubleshoot, I’ve already taken the step of deactivating every plugin from my WordPress plugin manager on the desktop interface, yet the error persists.

I’m concerned that I might be missing a crucial step or perhaps there’s a specific line in the code that requires modification for my setup. Could you provide further guidance on how to properly implement the snippet without causing errors?

Your assistance in troubleshooting this matter would be greatly appreciated.

Best regards, Fernando