Third party js issue in DXP - javascript

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

Related

CKEDITOR.tools.getindex is not a function

I'm trying to upgrade my version of CKEDITOR, from 4.4.1 to 4.5.1. To do so I'm uploading my build-config.js to fetch the same plugins as before with the latest ckeditor version.
The problem is that using the download CKEDITOR, whenever I try to use it I get the error CKEDITOR.tools.getindex is not a function. And this error comes from the widget plugin.
In widget/plugin.js file in line #1951 you have:
var index = CKEDITOR.tools.getIndex( widgetsRepo._.upcasts, function( element ) {
and that is exactly here the problem. Any idea?
Thank you very much.
I think that the only idea may be that you haven't upgraded everything correctly.
CKEDITOR.tools.getIndex was added in 4.5.0. And if the widget plugin tries to access it it means that you upgraded the plugin, but apparently not the core. Additionally, it means that you haven't used the online builder to build the whole package at once, because then the core would be concatenated with all the plugins and there could be no problem with different versions being deployed.
Therefore, try from scratch. Build a package containing all plugins that you need, unpack everything to a new directory to avoid problems with write access and similar, and all should be fine.

update jQuery to use with widget

I'm trying to upgrade a site template that uses mainly jQuery 1.08 to use 1.11, since a widget I want to connect to the subscribe form uses 1.11.
Here's the template I'm using:
http://multifour.com/projects/ray/ios/image-intro/index.html
What's weird is if I use the following code, the header is there but the form doesn't work properly:
<script src="scripts/jquery-1.11.0.min.js"></script>
And if I use this code, the form works but the header disappears:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I can't use both either, because whenever I enter the second line the header disappears for some reason. What gives, can someone please help me? Thanks!
For your first problem
I checked your directory for the jQuery script and it returned a 404. Perhaps you updated it because I noticed a different jQuery version being loaded in your view source.
http://multifour.com/projects/ray/ios/image-intro/scripts/jquery-1.11.0.min.js
For your second problem
Ya, I've actually included the jquery file in the scripts directory and either way I thought reading it in through googleapis would include jquery anyway. The console is reading two errors, saying that $().smoothScrool and $.stellar aren't functions in a custom.js file. If you check out the source code of the template I linked to and bring up the custom.js file (line 498), it's the exact same as the one I'm using locally. Thanks for your help so far, guys.
You should use some kind of Javascript Loader because your custom.js is loaded before your jQuery libraries are loaded and thats why you would be getting the error $().smoothScrool and $.stellar aren't functions. Maybe try the HTML5 async Javascript attribute.
http://www.w3schools.com/tags/att_script_async.asp

DoJo on Wordpress 4.1

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.

Uncaught TypeError: undefined is not a function when using a jQuery plugin in Magento

I am working on a Magento Extension. Magento has a known issue when you try to use jQuery in Magento because Magento uses the Prototype library.
The work around for it is to put your jQuery code in no conflict mode like this...
jQuery.noConflict();
Once I did this, it resolved 90% of my problems i was having with JavaScript errors. However I still have 3 major problems with JavaScript right now and I believe they are related...
Uncaught TypeError: undefined is not a function
http://www.codedevelopr.com/screenshots/2014/2014-08-23_16-14-37.png
When I view the line numbers that it is reporting these errors from I see this...
Line 1168 jQuery(".acc-wizard").accwizard({ now this accwizard() is a function that is loaded from a jQuery plugin file. I have verified the file is loaded and it is loaded after my jQuery and after I set the no conflict mode for jQuery. I am not sure if something in the plugin file needs to be changed as well to work with the no conflict mode or why it is saying it is undefine?
Same situation with simplecolorpicker() on line 1180.
I have uploaded the file that holds the accwizard() jQuery Plugin, it is about 14kb in size and can be found here http://www.codedevelopr.com/screenshots/2014/acc-wizard-bs-3.js I figured it is a little to large to post that code here.
Can anyone help me to get these errors resolved? It seems any jQuery plugin I try to use results in this undefined error above?
UPDATE
So I have been experimenting with a lot of things with no luck...that is until I tried loading all my JS files inline in my actual template page that my extension uses...once I do that, it all works with none of these errors.
This is frustrating though as I much prefer to have separate JS file for my JS...instead of loading 3 JS files I even tried putting all 3 into 1 file and loading that 1 file but I still get the JS errors...now when I copy that 1 file that had all 3 files combined and put it directly in the template file...everything works perfectly! This makes no sense to me, please help?
There's not enough context in your answer to pinpoint the reason, but it sounds like your web browser executes the code ...
jQuery('foo').accwizard
BEFORE it has downloaded and initialized the plugin that defines the accwizard method.

Problem with the plugin sfExtraWidgetsPlugin

Hi i installed "sfExtraWidgetsPlugin" in my symfony project in order to use the colorpicker widget.
The problem is when i add this widget in my form and i reload my page i got this error
ProColor Error: Prototype is not loaded. Please make sure that your page includes prototype.js before it includes procolor.js.
and the widget didn't work. Could someone help me to solve this error??
To get the widget to work, you need to include a framework called "Prototype.js" (something similar to jQuery): http://www.prototypejs.org/
Install the pre-requisite - Prototype JS -> http://www.prototypejs.org/

Categories

Resources