I'm merging Foundation 4 with Bones to create a WP Starter theme. I had everything working fine with the JS from Foundation 3, but now that I'm trying to implement the Foundation 4 JS I'm running into some issues.
I followed the steps found in the Foundation 4 JS Documentation, but still had no luck. Here is the code I placed directly before the closing body tag (I know the correct way is to enqueue the script, but for testing I was just pasting it directly above the closing body tag):
<script>
document.write('<script src=http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
I'm attempting to open a modal on this page, but as you can see, the modal never fires when you click the link. I notice some errors in the Javascript console, but I'm still new to JS so they are a bit over my head.
As I mentioned before, things were working fine with the Foundation 3 JS, which didn't require the call to initialize the function - it just seemed to work. Not sure if that makes a huge difference, but it's something I noticed that was different about the documentation for Foundation 4 JS compared to Foundation 3 JS.
Can anyone get me pointed in the right direction?
It looks like the browser can't find Zepto (at least chrome can't).
It's looking for it here:
http://mcfaddengavender.net/library/js/vendor/zepto.js but it returns a 404
Make sure you have your libraries set up in the appropriate directories!
well after i commented, i got it to work lol. maybe this will help you or someone else.
it seems like the docs are a little bit confusing, i was only able to get plugin functionality from loading foundation/foundation.js and foundation-whatever-plugin.js in this sequence - loading just foundation.js did not work for me.
i'm using requirejs to load so i don't have to worry about paths, but for your purposes just make sure you're not having any paths issue and this load order should work. for troubleshooting purposes i'm bypassing modernizr / zepto detectors and just loading jquery straight.
requirejs.config({
baseUrl: "/path/to/scripts",
paths:{
jquery: 'vendor/jquery/jquery.min',
},
shim: {
'foundation/foundation': { deps: ['jquery'] },
'foundation/foundation.alerts': { deps: ['jquery'] },
'foundation/foundation.clearing': { deps: ['jquery'] },
'foundation/foundation.cookie': { deps: ['jquery'] },
'foundation/foundation.dropdown': { deps: ['jquery'] },
'foundation/foundation.forms': { deps: ['jquery'] },
'foundation/foundation.joyride': { deps: ['jquery'] },
'foundation/foundation.magellan': { deps: ['jquery'] },
'foundation/foundation.orbit': { deps: ['jquery'] },
'foundation/foundation.placeholder': { deps: ['jquery'] },
'foundation/foundation.reveal': { deps: ['jquery'] },
'foundation/foundation.section': { deps: ['jquery'] },
'foundation/foundation.tooltips': { deps: ['jquery'] },
'foundation/foundation.topbar': { deps: ['jquery'] },
'vendor/jquery.maskedinput/jquery.maskedinput.min': { deps: ['jquery']},
'vendor/chosen/chosen/chosen.jquery': { deps: ['jquery']},
'vendor/tablesorter/js/jquery.tablesorter.min': { deps: ['jquery']},
'vendor/tablesorter/addons/pager/jquery.tablesorter.pager.min': {
deps: [
'jquery',
'vendor/tablesorter/js/jquery.tablesorter.min'
]
},
'vendor/redactor-js/redactor/redactor.min': { deps: ['jquery']},
'lib/jquery.passwordstrength': { deps: ['jquery']}
}
});
require(["jquery",
"foundation/foundation",
"foundation/foundation.alerts",
"foundation/foundation.clearing",
"foundation/foundation.cookie",
"foundation/foundation.dropdown",
"foundation/foundation.forms",
"foundation/foundation.joyride",
"foundation/foundation.magellan",
"foundation/foundation.orbit",
"foundation/foundation.placeholder",
"foundation/foundation.reveal",
"foundation/foundation.section",
"foundation/foundation.tooltips",
"foundation/foundation.topbar"
], function ($) {
$(document).foundation();
});
Related
I'm using requirejs to load jquery.selectBoxIt. It uses the jQueryUI Widget factory, which is why I only loaded the widget factory from the jQueryUI official site into my project.
When the project is loaded with config.js, selectBoxIt runs without problems. But when I build the project with r.js, I get the error $.widget is not defined.
Please help me please fix it.
PS. I already read some Google results on it, but nothing helps.
config.js
require.config({
paths: {
'jquery': 'assets/libs/jquery/2.2.0/jscript/jquery.min',
'jquery.migrate': 'assets/libs/jquery/plugins/migrate/1.2.1/jscript/migrate.min',
'jquery.ui': 'assets/libs/jquery.ui/1.12.0/jscript/jquery-ui',
'jquery.selectboxit': 'assets/libs/jquery/plugins/selectboxit/3.8.1/jscript/selectBoxIt',
},
shim: {
'jquery.migrate': {
deps: ['jquery'],
exports: 'jQuery',
},
'jquery.selectboxit': {
deps: ['jquery.migrate', 'jquery.ui'],
},
},
});
module.js
define([
'jquery.selectboxit',
], function (SelectBoxIt) {
...
});
Error appear in selectBoxIt code in line
$.widget("selectBox.selectBoxIt", {
I am new to Backbone and require js.
Please review my init.js for any bugs if any as it's not working.
Also please suggest any other approach for the same purpose.
And i am running this on my localhost.
Here is my init.js file that i am calling as data-main from index.html.
requirejs.config({
waitSeconds: 200,
paths:{
'jquery':'./jquery',
'backbone':'./backbone',
'underscore':'./underscore'
},
shim:{
'backbone': {
dep: ['underscore,jquery']
},
'bootstrap':{
dep: ['jquery']
}
}
});
require([
"jquery",
"underscore",
"backbone",
"handlebars",
"bootstrap",
"text"
], function ($, _, Backbone, Handlebars, Bootstrap, text) {
});
require(["../routes/router"], function () {
Backbone.history.start();
console.log('history started');
});
ExactError can be seen in this image See this
Backbone has not needed a shim in a while. So you should remove it. Also, the field you should use is deps, not dep. So your final shim should be:
shim:{
'bootstrap':{
deps: ['jquery']
}
}
I am having a problem when loading fileupload whilst using requirejs. The error that it gives me is:
TypeError: this._on is not a function
and I guess it is because fileupload requires jquery.ui.widget to be loaded too.
So I tried importing the lib, but I can't seem to make this right. Can anyone help me how to load it properly?
this is the code:
require.config({
paths: {
'jQuery': 'lib/jquery-1.10.2.min',
'jQuery-ui': 'lib/jquery-ui-1.10.3',
'jQuery-ui-widget' : 'jquery.ui.widget',
'bootstrap': 'lib/bootstrap.min',
'jquery-iframe': 'jquery.iframe-transport',
'fileupload': 'jquery.fileupload',
},
shim: {
'jQuery': {
exports: '$'
},
'jQuery-ui': {
deps: ['jQuery'],
exports: '$'
},
'jQuery-ui-widget': {
deps: ['jQuery', 'jQuery-ui-widget']
},
'bootstrap': {
deps: ['jQuery', 'jQuery-ui']
},
'fileupload': {
deps: ['jQuery', 'jQuery-ui', 'jquery-iframe']
}
},
// only for development purporses:
urlArgs: "bust=" + (new Date()).getTime()
});
require(['jQuery', 'jQuery-ui', 'bootstrap', 'layout', 'menu', 'modal', 'table', 'form', 'fileupload'], function ($, jqueryUi, _bootstrap, layout, menu, modal, table, form, fileupload) {
$(document).ready(function () {...
There are multiple problems with your configuration:
jQuery does not need a shim, and using a shim where none is needed can cause troubles.
jQuery hardcodes its module name as jquery (all lowercase) so you cannot refer to it under the name jQuery. Well, you could use a map config to map jQuery to jquery but you currently do not have such map in your configuration. I would recommend using jquery across the board, which is the current practice in just about every project I see that uses RequireJS and jQuery.
I also recommend using enforceDefine: true in your configuration so that RequireJS provides better diagnosis of module loading failures.
i'm trying to implement require.js on my project and i can see that all the libraries are fetched at the same time but the load of require.js not, why is that ?
here is the code i made :
require.config({
paths: {
jquery: 'lib/jquery-1.11.0.min',
bootstrap:'../bs3/js/bootstrap.min',
accordion:'accordion-menu/jquery.dcjqaccordion.2.7',
scrollTo:'scrollTo/jquery.scrollTo.min',
esMainBehavior:'esMainBehavior',
slimscroll:'../assets/jQuery-slimScroll-1.3.0/jquery.slimscroll',
nicescroll:'nicescroll/jquery.nicescroll',
scripts:'scripts',
mCustomScrollbar: 'jquery.mCustomScrollbar'
},
shim: {
esMainBehavior: ["jquery"],
bootstrap: ['jquery'],
accordion: ["jquery"],
scrollTo: ["jquery"],
slimscroll: ["jquery"],
nicescroll: ["jquery"],
scripts: ["jquery"],
mCustomScrollbar: ["jquery"]
}
})
require([
'esMainBehavior',
'accordion',
'bootstrap',
'scrollTo',
'slimscroll',
'nicescroll',
'scripts',
'mCustomScrollbar'
]);
i mean require.js get's fetched at 100ms but all the other libraries are fetched in 400ms
Because require.js has to load and execute before it can trigger the loading of the libraries that it is importing.
I'm trying to include a custom js-library/script in my RequireJS-config but it doesnt seem to work. So I hope someone can help me out. I'm using RequireJS in combination with Backbone and Handlebars, so just to mention it...
In my Require config I have:
require.config({
paths: {
jquery: 'lib/jquery/jquery',
backbone: 'lib/backbone/backbone',
// Templating.
handlebars: 'lib/handlebars/handlebars',
// Plugins.
jqueryEffects: 'lib/jquery/jquery.effects',
... //some more libraries
},
shim: {
backbone: {
deps: ['jquery', 'lodash','jqueryEffects'],
exports: 'Backbone'
},
lodash: {
exports: '_'
},
handlebars: {
exports: 'Handlebars'
},
jqueryEffects : {
deps: ['jquery']
}
}
});
The jquery.effects.js is a simple script i created my own to handle special click events or run animations etc. When i start to run my backbone app, the console tells me that the script is loaded. So now on one of my Views, I have rendered a HTML file which contains an anchor with a class which serves as an identifier, which after clicking it should trigger something...BUT, nothing happens, so I tried to make an alert in the jquery.effects.js-file:
$(function() {
alert($(".videoname").lenght);
});
This gave me the response undefined. Does anyone maybe have an idea? The same goes when I add more libraries, console says they are loaded, but nothing happens... ?!?!?!??
try this (length not lenght) :
(function() {
alert($(".videoname").length);
})();
That's means that your script is working ;)