SOLUTION: For everyone interested: turned out the solution was moving all files that use DoJo beneath the jQuery UI files, so that jQuery UI is fully loaded before any DoJo stuff loads. Moved them all in the footer in that order (jQuery, then jQuery UI and then alle DoJo related files).
Still wondering though why this has been an issue in WP 4.1, while it worked perfectly without the fix in WP 4.0.
I'm running a Wordpress website which uses both jQuery and DoJo (part of the ArcGIS JS API, loaded from http://js.arcgis.com/3/12/).
After recently upgrading from Wordpress 4.0.1 to 4.1, things broke.
Dojo is returning multiple Error: multipleDefine errors.
Basically it looks like DoJo tries to load a new instance of jQuery, which it shouldn't, since WordPress has loaded jQuery already and there isn't a jQuery module available in the DoJo map. Furthermore, this issues seems to only exists in WordPress, not in a jsfiddle I made including exactly the same scripts.
For debugging purposes I first disabled all WordPress plugins, without any result; the problem kept existing. I went on and found a couple of interesting things. But I'm really stuck in the further debugging proces. I know the scope of this question is rather broad, but any thoughts at all are very much appreciated.
What I know so far/that i'm wondering about:
-Things stopt working after upgrading to WordPress 4.1
-In the info of the multipleDefine error it states https://js.arcgis.com/3.11/jquery.js, which is weird: it shouldn't be looking for jQuery there, since it's already included in Wordpress
-Things break as soon as I included the ArcGIS Javascript API, which includes DoJO
-In addition: leaving WordPress out still gives trouble in this jsfiddle, although dojo isn't looking for jQuery right now http://jsfiddle.net/dhunink/mry5vn3s/8/
<script>
var dojoConfig = {
isDebug: true,
async: false
};
</script>
<script src="http://js.arcgis.com/3.12/"></script>
The things mentioned above leads me to the conclusion that something changed in the last WordPress release that effects my script, although I can't find anything in the release notes that could be linked to my issue.
Any thoughts, suggestions of comments are highly appreciated! Feel free to see all in action at https://tpgrf.nl/testserver/alpha/topotrainer/provincies/.
SOLUTION: For everyone interested: turned out the solution was moving all files that use DoJo beneath the jQuery UI files, so that jQuery UI is fully loaded before any DoJo stuff loads. Moved them all in the footer in that order (jQuery, then jQuery UI and then alle DoJo related files).
Still wondering though why this has been an issue in WP 4.1, while it worked perfectly without the fix in WP 4.0.
Related
I have a client who had a very complex jQuery app custom built by a previous developer within his WordPress site. Its functionality is cleanly broken out into several scripts which get minified together with the libraries they depend on. The libraries rely on an old version of jQuery (3.3.1). The site is complex and we need to be able to use the current version of jQuery to allow other plugins we're using to continue to keep up with upgrades.
The libraries include c. 2018 versions of:
Select2
Isotope
SpriteSpin
EasyResponsiveTabs
ImagesUploaded
jQuery Viewport
Some of these are minified/uglified.
I've used best practices to load jQuery 3.3.1 into a variable jQuery3_3_1 with noconflict();
It's rather easy to change standard jQuery to use jQuery3_3_1. But I need a way to force the libraries to use jQuery3_3_1, otherwise they are not recognized by the scripts (and some of them will have issues using a different version of jQuery than they were built in). Most of these use requireJs(), and I've seen instructions for setting up requirejs.config() code in the footer that will define "jquery" to be a particular version. Doing this would be a great solution, but I have no idea how to get these uglified scripts to use it.
I've read through several similar inquiries, but none have addressed forcing a jQuery version on minified/uglified code. Others speak to a level of expertise in jQuery module development that I don't have and don't have time to scale into.
Is there a way to get all these modules that use require('jquery') to have that reference jQuery3_3_1? I'd love it if there were a way to say, "For all the files that live in this directory, jQuery/jquery (there are 2 ways it is called) means jQuery3_3_1/jquery3.3.1".
Or being that it's a Wordpress site, could this be defined in the wp_enqueue_script() call?
Many thanks for your help!
I am trying to use Progressbar js in Liferay DXp custom plugin. It was working fine in 6.2 however it seems to be not working in DXP.
I have checked the standalone html with this plugin and it works fine however it is not working with DXP 7.0
I am getting
"Uncaught ReferenceError: ProgressBar is not defined"
error.
The file is well loaded on page but I still get this error
.
I have checked the version of Jquery and it's 2.1.4 in DXP 7.0. The plugin is well supported with this version of Jquery as it works fine on standalone html file.
Not sure if there is any issue with DXP while using third party js plugins as I have faced similar issue while using jquery cookie plugin.
Has anyone faced this issue or is there any way to use third party plugin in DXP?
The way I imported this pluigin in portlet is with annotation
"com.liferay.portlet.header-portlet-javascript=/js/progressbar.min.js",
Since it was not working so I have added it in theme and tried but no luck.
Could anyone help me with this, please.
The way I imported this pluigin in portlet is with annotation "com.liferay.portlet.header-portlet-javascript=/js/progressbar.min.js"
Check the generated markup, what actual URL is requested from the server, and if it's being served. I'm assuming that it's a 404 - for example because the file might be missing from your bundle, or in a different location.
If these hints don't help, please edit your question and create an MCVE
I am building a new template from the ground up for an existing site that uses the menu item type iframe-wrapper to display external content.
My template uses a bit of jQuery which works fine on all pages I have checked so far, except for those using the iframe-wrapper. On those pages joomla does not seem to include any of the js it usually does (jQuery, mootools, joomla stuff). Since I need jQuery my scripts break.
I could probably work around that by hardcoding jQuery into the template. Even ignoring all the problems that would most likely cause it solves only part of my problem. I use a module to include a bit of inline js to initialize a countdown so the end-date can be configured from the backend. That script is not included either, infact the whole module is missing in the frontend (or at least its container).
I am quite the novice with regards to joomla so this might be an obvious mistake on my end but how do I get joomla to include the js it usually does when not displaying an iframe-wrapper?
Got it to work finally:
JHtml::_('jquery.framework');
This line added to the template ensures that jQuery version shiped with Joomla is included and only loaded once.
I still don't know why jQuery was only missing from one specific pagetype rather than all of them or none, but it's working now.
If the iFrame is not part of the Joomla website and not part of the Joomla environment (which is the case 99.99% of the times), you will need to re-add the JS files there manually. There's no other way for doing this.
I'm currently linking to jquery from Google. This way I'm not hosting the file on my server.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
Anyone knows of a similar service that's available for the individual jquery plugins?
There isn't one out there yet (though some sparse plugins have their own CDN, like jQuery Tools).
However, the jQuery team is working on this with Media Temple (which currently hosts jquery.com and other related sites)...I'm not sure how far along it is though.
As has been discussed at breadth in many a forum, it is recommended to use Google's CDN for loading common js libraries. I am doing the same in my app and am loading jquery and jquery-ui from the Google cdn.
Now there have been quite a few instances where users have reported broken UI and that is a result of jquery ui not firing. e.g. jquery UI tabs/progress bars not working. Now I am wondering why this is happening and most probable reason seems to be jqueryui not getting downloaded properly from Google CDN.
Has anyone faced similar issues before? How to ensure that juqeryui is initialized/ready for each user?
There are some fallback solutions (for jQuery proper) in this answer that may be helpful.
This one in particular.