Hi,
I see that there is Javascript error on the page:
Uncaught TypeError: Cannot read property 'elements' of null.
I’ve checked the jeyjoo.js code and found the following:
– The previous error can be fixed if you added your code after the document is ready. So, you can add the validation code in the following block:
jQuery(document).ready(function(){
});
– The form in the slider doesn’t have an ID. Do you expect it to have the ID “contact1” . This is just my guess from what I found in the code.
Hi @mohammedeis, thankyou for the reply. This was a minor issue with variable declaration that is fixed. We also have added the form an ID.
The problem remains that the form within the slideshow is not getting any Javascript events attached.
Is it something to do with the parsing of the HTML. I notice in the page source code, rather than show:
<form id=”contact1″
we get:
<form id="contact1"
I see that the forms got valid ID attribute <form id=”contact1″. I was also able to concatenate the fields to the allFormElements array using the console.
I think that the issue that the allFormElements doesn’t have the form contact1 elements.
Please try to wrap your code in
jQuery(document).ready(function(){
});
I think that the problem is that you are trying to add the fields before the slider gets initialized.
I agree that the issue is loading order – we already tried jQuery(document).ready(function(){ and also window.onload but it doesn’t work.
How can I get a handle on the slider javascript code in the functions.php. This way I can enqueue the slider javascript.
Hi,
Please try to execute the slide form JS work after metaslider/initialized event is being fired.
Example:
jQuery(document).on(‘metaslider/initialized’, function(e, identifier) {
//Code that collects the form fields
// Validate the form fields
});
Thank you @mohammedeisa – I can confirm that works!
Nice job š
Hi,
Iām glad to hear that your issue has been fixed.
Please let me know if you have any questions.
Hi @mohammedeisa, actually I just noticed that this is still an issue. Following your solution above, the click events get assigned, but one the slideshow has done a full cycle of slides, the Javascript click events are no longer assigned the the input fields and buttons.
Do you have any idea why this is and what we can do about it?
Thanks
Does the same happen when you use FlexSlider?
Hi,
I tried FlexSlider and R.slides, but the input fields were stripped out and did not render
Hi,
I need to reproduce this issue on my local installation.
Please let me know how did you build this form?
It is a simple HTML form with Javascript events attached.
I think this problem occurs even with a simple html element. To test, I created on the first slide, a div: <div id=”abc”>test</div> (you can see the word “test”).
With the first loading of the slide, the onclick event gets attached to the div id=”abc”. But once the slideshow goes to another slide, and back to this slide, the onlick event is lost.
Hi,
It worked with me using FlexSlider by doing the following:
1- I downloaded jeyjoo.js and added it to my website by adding the following code to the end of the current theme functions.php:
function load_my_script(){
wp_register_script(
'my_script',
get_template_directory_uri() . '/jeyjoo.js',
array( 'jquery' )
);
wp_enqueue_script( 'my_script' );
}
add_action('wp_enqueue_scripts', 'load_my_script');
2- I added the following line at the start of the jeyjoo.js
var $= jQuery.noConflict();
3- I added the following line of code to the theme functions.php to make MetaSlider allow adding HTML tags to the slides captions:
add_filter('metaslider_filter_unsafe_html','__return_false');
4- I added the form to the caption of the first slide of my slideshow.
Please let me know if you need a video showing how the slider works.
-
This reply was modified 5 years, 2 months ago by
mohammedeisa.
Hi, I get the same result. The Javascript is attached until the slide changes. Once the slide has changed. the Javascript click events are lost.
Hi,
Then, there should be something wrong in your script or on your website generally.
When I was testing the issue using your script, I removed all the code and kept only the form-related code. Can you try the same?
If this didn’t work, then there should be some conflict on your website. To figure out that, please test the issue when only MetaSldier and the Twenty Twenty One theme are active.
