We are hosting wordpress sites on wpengine. On this one site we are using gravity forms but for some reason it stopped working. All we get is a js error
Uncaught ReferenceError: gformInitSpinner is not defined (index):135
(anonymous function) (index):135
o jquery.min.js:2
p.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B
Now if I set up the site on my local machine it works perfectly fine. Has anyone come across this problem? Anyone got any idea why this is happening?
The most common cause of this issue is the gravityforms.js file being included down in the footer when it should be up in the header.
If you are embedding the form using the function call there is a second function call you should use to include the scripts and stylesheets in the header.php
// gravity_form_enqueue_scripts($form_id, $ajax);
gravity_form_enqueue_scripts(4, true);
https://docs.gravityforms.com/gravity_form_enqueue_scripts/
I had exactly the same problem, and managed to track it down to some theme code.
I was using the bones theme, which de-registers the default jQuery JS and adds its own using the Google CDN, like:
// we don't need the Wordpress jquery as we are loading our own version
add_action('wp_enqueue_scripts', 'stnic_remove_jquery');
function stnic_remove_jquery(){
if(!is_admin()) {
wp_deregister_script('jquery');
}
}
// loading modernizr and jquery, and reply script
function bones_scripts_and_styles() {
if (!is_admin()) {
wp_register_script( 'cdn-jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', array(), '', false );
}
}
As you can see, it deregister's the default jquery script, and then adds its own cdn-jquery script, which is fine, apart from the fact that the Gravity forms scripts have a dependency on jquery and not cdn-jquery!
Because they can't see the default jquery script, they don't load, and it would seem that they fail silently, simply emitting this JavaScript error because said JavaScript is loaded without checking dependencies.
In any case, I fixed it by re-naming the bones register script to jquery, might not be the best way to fix this, but it works.
Alternatively, commenting out both pieces of code would also fix this (and leave the default Wordpress JS in there).
Not sure if other themes do this, but might be worth doing a search all in your theme for wp_deregister_script('jquery'); or at least switching to the default theme to see if you experience the same problem (that's how I pinpointed this).
OK I solved the problem. For some reason the file form_display.php was for some reason not up to date. So I simply pushed that one file to the server and this fixed it.
You can also add the GF`s necessary scripts manually to header.php (no actions with registering/deregistering jQuery needed!). Example:
<link rel='stylesheet' id='gforms_formsmain_css-css' href='/wp-content/plugins/gravityforms/css/formsmain.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='gforms_ready_class_css-css' href='/wp-content/plugins/gravityforms/css/readyclass.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='gforms_browsers_css-css' href='/wp-content/plugins/gravityforms/css/browsers.min.css' type='text/css' media='all' />
<script type='text/javascript' src='/wp-content/plugins/gravityforms/js/jquery.json-1.3.js'></script>
<script type='text/javascript' src='/wp-content/plugins/gravityforms/js/gravityforms.min.js'></script>
I just had this problem and, in my case, it was caused by CloudFlare RocketLoader™.
After I disabled it, the form loaded with no problem.
Move Gravity forms` scripts to footer
add_filter("gform_init_scripts_footer", "init_scripts");
function init_scripts() {
return true;
}
Related
I am working on a chrome extension, written in React, and attaches itself to the page using a shadow DOM element. Inside I am loading the extension's logo and a content stylesheet.
However, it was reported that the extension was not loading properly and have pinpointed that any resource from web_accessible_resources (e.g. chrome-extensions://...) were being unmounted from the page on certain sites (e.g. https://www.skechers.com/).
In a work-around we ended up serving the content from our CDN, which works fine. Still wondered if anyone knew why this didn't work on a few sites.
I also wrote code to see if it removes the stylesheet and then loads the CDN version, just to test it out.
const onStylesLoad = (loaded) => {
const sheet = loaded.target.sheet
setTimeout(() => {
if (!sheet.ownerNode) {
console.log('FALLBACK', sheet);
setFallback('https://cdn.***/themes/browserExtension/content.css');
}
}, 1000);
}
// And later in the render...
<link rel='stylesheet' type='text/css' onLoad={onStylesLoad} href={browser.runtime.getURL('content.css')} />
{fallback && <link rel='stylesheet' type='text/css' href={fallback} />}
The extensions stylesheet does load, but then is immediately unmounted, which is how I am able to detect a moment later that the ownerNode is null (onLoad its attached to the link).
I am fine with the work-around, it just irks me that packaging any content is made moot, since we have too point it to a CDN regardless.
If you want to store the css files locally, rather than from a CDN, you could minify the css files, then store them as a string in your js files and insert them into the page by creating a style element on document ready. I guess they probably wouldn't be able to reference the local images though, but it seems you're not able to anyway
I have a website hosted by siteground, and my custom 404 page is SOMETIMES missing it's stylesheet. I contacted support but they saw it working fine, assumed I just codded it wrong, and told me to get help form a professional web programmer... (of course I did test before contacting them to be sure it was not my fault)
Anyways, the way that siteground allowes you to create a custom 404 page is to add your html code to a form in your control panel, wich creates a 404.shtml in your main folder. The .shtml contains all your html. I have done the following test to narrow down the problem.
created a not404.html in my main folder with code copy pasted from my 404.shtml that is in the same folder. It loaded with my stylesheet applied no problem.
tried prompting a 404 page with both bad hyperlinks, and by typing pages that do not exist. When I am having the problem with my stylesheet missing, none of thease pages have css, but when I am not having the problem, they all have css applied.
What I think it is: I think that the 404.shtml is not really in my main folder, but just appears to be there, and sometimes that link breaks and the 404.shtml is actualy acessed somewere else on sitegrounds server, therefor the style link would not work properly. This would explain the intermittent css failor. But this is just logic, not understanding.
The only thing I can think of that would be wrong on my end is if there is more than one way to link stylesheets, and my way is a bit unstable. Here is the format I use.
<link type='text/css' rel='stylesheet' href='css/404.css'>
I know this might be a difficult question, but it would be pretty satisfying to figure this out and inform them of the problem with their site.
Change the href for the style tag to be absolute. So this:
<link type='text/css' rel='stylesheet' href='css/404.css'>
Becomes this:
<link type='text/css' rel='stylesheet' href='/path/to/css/404.css'>
css/404.css is a relative path. If the path is something like /path/to/nonextant/page it will try to load the stylesheet from /path/to/nonextant/page/css which does not exist.
Use an absolute path:
/css/404.css
I'm really confused what my Wordpress does with css... I have a plugin that is loading a css using this script:
wp_enqueue_style('shutter', NGGALLERY_URLPATH .'shutter/shutter-reloaded.css', false, '1.3.2', 'screen');
I recently changed the css and now it seem's to be loaded twice. First the older css, then the changed css. On FTP I just see one file.
Why is it behaving like that und how can I fix it?
It's definitly not a Browsercache problem, I tested it in several browser and cleared the cache several times...
Yes, this css cache issue is always make me mad before. But I find the solution.
I don't know how to put it on your function, but here is the idea:
Give command to your html to call new css everytime you modified the css file, call the css with something like "style.css?1202122354" instead of only "style.css". "1202122354" is last modified datetime on style.css
In my header themes, I ussually use this to call my CSS file:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
check out the php functionfilemtime( get_stylesheet_directory() . '/style.css') is outputting last modified time for style.css
Hope you catch the idea, sorry don't know how to put it on your function :D
I inserted the following code in a WordPress plugin:
wp_deregister_script('jquery');
wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
wp_enqueue_script('jquery');
The following is echoed to the browser:
<script type='text/rocketscript' data-rocketsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1'></script>
Instead of:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
I don't know what is happening. Perhaps wp_register_script() is supposed to work in this way. I also tested if any jQuery code worked on the client side but it didn't.
It is easy to fix.
You must change the following tag: <script type="text/javascript"></script>
add: data-cfasync="false"
example:
<script data-cfasync="false" type="text/javascript"></script>
Probably one of wordpress plugins is using CloudFlare.
https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-
Try disabling all the plugins and re-enabling them one by one to find out which one is causing this issue. It's not a problem actually.
Rocket Loader is not included in any WordPress plugins. You would have to disable Rocket Loader by going to: settings->CloudFlare settings (Performance Settings)->Rocket Loader->Toggle Off (this feature is optional and has to be turned on).
I was facing this issue with
WP Rocket plugin which was adding type='text/rocketscript' to the script tags.
Fixed it by adding
data-cfasync="false"
to the script tags.
I'm using Less in JS mode (less.js) the following way:
<link rel="stylesheet/less" href="assets/styles/less/bootstrap.less" media="all">
<script src="assets/scripts/libs/less-1.1.5.min.js"></script>
And after some page views, it stops processing the styles and gives a "cached" version. To make it re-parse the styles I have to clear browser cookies. Does anybody knows why is this? Is there any option to make it re-parse on every page view?
Thanks a lot!
UPDATE: Reviewing some of the library code, seems that it uses localStorage to store the stylesheets as a cache. It bases on file's last modified time to update that cache but for some reason it's not working properly because it's not taking my changes...
I just found a issue in GitHub for this. Quoting myself:
This happens to me also in 1.1.5. The script uses localStorage to store the stylesheets. Clearing your browser cache won't work. You must clear it's cookies (logging off all your accounts, %!#^#%) or doing localStorage.clear(). I use this before loading less.js (not using localStorage myself):
<script> /* Provisory for dev environment: */ localStorage.clear(); </script>
When going to production you just compile the stylesheets to .css
Nice find with the localStorage. The quickest solution, then, is to open up your browser's console and run the following command:
localStorage.clear();
Then refresh and you are set.
You can use the following to disable the localStorage cache:
<script>var less=less||{};less.env='development';</script>
<script src="path_to_less.js"></script>
The reason it caches it is because it takes time to generate the css files and that time can add up to a bad user experience if you have a lot of code to compile.
you could put this in your html documents:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
But that would disable caching of all resources not just your less files.
A better way of doing this would be by passing noCache=1 into the url to clear the browser localStorage when you are developing in less files then it sets a cookie to remember to clear it each time and then you could put noCache=0 to unset the cookie, this way the end user doesn't end up having their localStorage deleted when using your site and you can just leave it in.
$(document).ready(function () {<br>
if(window.location.href.indexOf("noCache=1") > -1) {<br>
$.cookie('noCache', '1', { expires: 1, path: '/' });<br>
localStorage.clear();<br>
}<br>
if(window.location.href.indexOf("noCache=0") > -1) {<br>
$.cookie('noCache', '0', { expires: 1, path: '/' });<br>
}<br>
if ($.cookie('noCache') == '1'){<br>
alert ("disabled Cache");<br>
localStorage.clear();<br>
}<br>
});<br>
<br>
you will need jquery cookie plugin for this to work
you can also add a unique parameter to prevent caching, like this for example if you are using php:
<link rel="stylesheet/less" href="assets/styles/less/bootstrap.less?v=<?= uniqid() ?>" media="all">