How to use javascript in foundation(6)? - javascript

I am using foundation for sites using libsass.
css working fine however am unable to use any javascript components.
I see there's an app.js file which I have included in my application which online the following:
$(document).foundation();
However in the browser I get the following console error:
Uncaught TypeError: $(...).foundation is not a function
UPDATE:
I assumed wrongly that some how the js was already loaded like bootstrap however no foundation js files were being included so adding to my app config:
https://cdn.jsdelivr.net/foundation/6.0.6/foundation.min.js
Fixed the issue, apologies for posting early.

Related

Third party js issue in DXP

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

WordPress theme JavaScript error: Uncaught TypeError: jQuery.notifyDefaults is not a function

Im trying to develop my first theme. Im using a ready made HTML5 template and convert it to a wordpress theme.
However, I am having some trouble with Javascript. The HTML5 template uses jQuery scripts for animating it's menu etc. I have enqued the scripts and styles from the theme and they are mostly (!) working . However, in order to get them to work i had to search and replace all $ with jQuery – my understanding is that to avoid conflicts wordpress wont allow $.
Some of the javascript functions arent working and im not entirely sure why. The console is saying Uncaught TypeError: jQuery.notifyDefaults is not a function. Does anybody have any experience of this or knowledge about why this is happening?
Thanks in advance for any replies
I've put the page here to replicate the error.

Electron $(...).selectpicker is not a function

I need your help. I've been stuck with this problem for 2 days.
I'm building an application with electron (by Atom) and I use bootstrap-select. When I launch the app an error rises even if the function in question has not been called yet:
Uncaught TypeError: $(...).selectpicker is not a function
Do someone know how to fix that?
I solved my problem. It seems that using
require('bootstrap-select');
to include the library doesn't work properly, instead, I downloaded the bootstrap-select library and imported manually in the HTML file.

AngularJS - after separate templates javascript doesn't work

I bought a template which should not have problem with AngularJS according authors. When I have one big index then everything works fine. But the problem is when I try to separate it into the smaller template. I have downloaded new AngularJS seed and just did this:
.. header
.. body
<div ng-view></div>
<!-- Vendor Scripts Bundle -->
<script src="vendor.min.js"></script>
<!-- App Scripts Bundle -->
<script src="scripts.min.js"></script>
.. angularJS files
Route to the smaller template works fine, the content is visible, but just these two javascript libraries doesn't work. When I look at code in chrome inspect I see that libraries exist. Is necessary to register them somewhere in AngularJS or must be problem in these libraries?
Whatever AngularJS components you define outside AngularJS will remain outside AngularJS - unless they are integrated at ".config()" state of the app.
The global objects should be usable though (e.g. $ for jQuery); although cleanly would be defined as constants.
The question is pretty generic, I think you need to provide more insight into that to get some proper help, as the comments above stated.
I saw 2 errors at console on plunker.
Uncaught ReferenceError: config is not defined app.js:10
Uncaught Error: No module: ngRoute
Looking at your code I see a few errors. First of all you're using 1.0.x version of AngularJS. In those versions ngRoute is not a separate module so you shouldn't include that. Also you defined view1 modules as view1 but tried to include as myApp.view1. When you fix those issues your code should work.

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.

Categories

Resources