I have an issue with a script in my website.
The application is based on RAILS 7 and Stimulus.
I have added an external script in order to generate a simple form to sign-in for a newsletter (it is simply an input for the email and the submit button) based on Klaviyo.
Klaviyo provides a short html code to generate their newsletter signup form. (shown below).
The form is shown in the footer and have to appear on all the pages of the website.
Actual behavior:
the script is loaded only the first time the page loads. During the navigation the script is no more executed.
If I refresh the form reappears, I think because the script is reexecuted only on refresh. I think it is related on the philosophy of turbolinks and stimulus themselves.
Expected behavior:
I need the script executed on all the pages.
My external script (provided by Klaviyo):
<script defer type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=mySecretCode"></script>
I tried both putting it in head at the end of body section.
I tried to add "defer" and/or "async"
I tried to add "data-turbolinks-track='reload'"
The code related to form is:
<div class="klaviyo-form-MyFormCode"></div>
Is there a way to force turbolinks execute the script after the page is completely rendered?
I want to still go on using turbolinks to get its advantages and I don't want to disable it only for this very small script.
versions:
Rails 7
ruby 3.0.3
turbolinks 5.2.1
turbo-rails 1.0.1
stimulus-rails 1.0.4
thanks a lot
Related
I am currently developing a widget for elementor and i have already done the PHP render part as it renders the HTML part dynamically. Now, i want to do same for js render part as live rendering. I thought of Ajax call so that I can get data from it and place it on js render part. I tried to Ajax call inside _content_template() function but it load first instead of HTML while adding it to the post while PHP render is fine. How can i handle this. Please any help is appreciated.
i'm trying to improve speed of my website. i'm using PageSpeed Insights to check my site performance and it was telling me to remove render blocking java script and css. so i did it and know its causing problem in my website design. so what should i do to remove rendering blocking without causing problem in my website design.
Render Blocking CSS
Render blocking CSS will always show on Google Page Speed Insights if you are using external resources for your CSS.
What you need to do is to inline all of your 'above the fold' styles in <style></style> tags in the head of your web page.
I will warn you, this is NOT easy and plugins that claim to do this often do not work, it requires effort.
To explain what is happening:-
A user navigates to your site and the HTML starts downloading.
As the HTML downloads the browser is trying to work out how to render that HTML correctly and it expects styling on those elements.
Once the HTML has downloaded if it hasn't found styles for the elements that appear above the fold (the initial part of the visible page) then it cannot render anything yet.
The browser looks for your style sheets and once they have downloaded it can render the page.
Point 4. is the render blocking as those resources are stopping the page from rendering the initial view.
To achieve this you need to work out every element that displays without scrolling the page and then find all the styles associated with those elements and inline them.
Render Blocking JS
This one is simpler to fix.
If you are able to use the async attribute on your external JS then use that.
However be warned that in a lot of cases this will break your site if you have not designed for it in the first place.
This is because async will download and execute your JS files as fast as possible. If a script requires another script to function (i.e. you are using jQuery) then if it loads before the other script it will throw an error. (i.e. your main.js file uses jQuery but downloads before it. You call $('#element') and you get a $ is undefined error as jQuery is not downloaded yet.)
The better tag to use if you do not have the knowledge required to implement async without error is to use the defer attribute instead.
This will not start downloading the script until the HTML has finished parsing. However it will still download and execute scripts in the order specified in the HTML.
Add async in the script tag and put the css and js in the last of the page
Hi I'm pretty new to contact form 7. I've seen on Youtube tutorials, that contact form 7 submits without page refresh. But when I install the plugin it's working with a page refresh.
Please advise on how to enable it to work without page refresh. Thanks.
I found the fault, the issue was i haven't included the wp_head() and wp_footer() functions in my theme.
There's a page in contactform7 site on this:
https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/
there they have mentioned the requirements for ajax to work.
Add wp_head() funtion in your header.php file and wp_footer() function in footer.php file.
That's it solved :)
My problem was solved by changing the jquery used. Check the version you are using.
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
enter code here
</script>
I have recently experienced this problem. I have opening a form inside popup and submit would refresh it.
So, after some much hair pulling I happened to view source and there I noticed some part of footer code wasn't highlighted. Why? turns out it was my silly mistake. I forgot to close one iframe tag. Once I closed it. view source code was perfectly highlighted and the problem was resolved.
After verifying that one of the main reasons why the page refreshes when submitting the form are:
JavaScript file is not loaded:
If you are using themes downloaded from the store, usually the problem is with page optimizers like Lite Speed Cache.
Otherwise check that your themes are loading the Ajax file correctly.
This was my case, the Js files were loading in delay, I was using a Page Cache which was speeding up the web page but not loading the javascript files correctly.
Conflicts with other JavaScript
HTML structure is not valid
I have a Wordpress site, that uses the Contact Form 7 plugin and the reCAPTCHA functionality that comes with that, and that works great. I just put that part in place, everything is automatic. But now I'm trying to add a reCAPTCHA to another form (on page form1.php) that isn't set up with Contact Form 7. This is on a PHP page that basically includes the Wordpress header and footer, but does its own thing in the middle. One key point is that the footer includes one of the forms from Contact Form 7, so it's on every page on the site.
I followed Google's instructions, forgetting I had the footer form. Then I saw an error in Firebug Error: ReCAPTCHA placeholder element must be empty
That brought me to this StackOverflow topic here. The only answer there by user easy going says that they had the same error when they realized they had imported the library twice.
Ok, that's what I did too I realized. So, I can remove the script inclusion of https://www.google.com/recaptcha/api.js in my code since it's already included by Contact Form 7 (I see it in the source). I noticed Google had instructions for rendering multiple widgets, I checked it out. But the problem is that the script include line specifies the onload callback function. Big problem. I can't change that because Contact Form 7 puts that in, and I can't make a callback function of the same name since it's already used. Of course I don't want to mess with anything that Contact Form 7 does. But as a result, I don't know how to get it to call my callback function in form1.php which is where my HTML element is specified to render the captcha.
Do you see any way around this issue? Any help is greatly appreciated!
Here is the resolution:
Contact Form 7 supports multiple reCaptcha, just need the right HTML markup to use it.
As you can see in the wp-content\plugins\contact-form-7\modules\recaptcha.php, and also in the HTML, the trick is:
Your non-CF7 reCaptcha must be just inside a form element, like this:
var verifyCallbackY = function(response) {
/** your stuff... */
alert(response);
};
<form id="recaptcha-cf7-migr"> <!-- the form element is important! This is what CF7 fetch one by one to find recaptchas... -->
<div
id='yRecaptcha'
class="wpcf7-form-control g-recaptcha wpcf7-recaptcha captcha-hfs"
data-sitekey="*********************************qkuila"
data-callback="verifyCallbackY"></div>
</form>
Pipbox says it's "Plone 4 compatible way to do AJAX pop-ups in Plone 3".
http://plone.org/products/pipbox
Then, what's the proper way of doing jQuery Tools image pop-ups in Plone 4?
Scan HTML for images using selector
Install click handler
On click open the image in pop-up, using one of predefined sizes from plone.app.imaging
All pipbox really does is load plone.app.jquerytools support in Plone 3. In Plone 4, plone.app.jquerytools is built in.
plone.app.jquerytools loads jQuery Tools and some Plone-specific support for easy AJAX popups. That support allows you to associate AJAX popups with jQuery-selectable page components. See the PYPI page for full documentation.
A quick example: let's say that you want to set up lightbox-style popups for images in the content area using the preview-scale supplied by plone.app.imaging. JS to do this is:
jQuery( function($) {
$('img.image-right, img.image-left, img.image-inline')
.prepOverlay({
subtype: 'image',
urlmatch: '/image_.+$',
urlreplace: '/image_preview'
});
});
You would load this code by registering a javascript resource as a skin or browser layer, then add it to the portal_javascripts js resources.
The code:
Sets up a function to load when the page is ready, with "jQuery" aliased to "$";
Selects all image items in the page that use the styles used by the visual editor;
Calls the prepOverlay routine (from plone.app.jquerytools) to associate them with overlays;
Specifies that the overlays will be images, which means that size information may be determined from the loaded image;
Does a little regular expression matching and replacing to pick up the image URL and convert it to a preview.