We Keep Coding

I need to make sure that a plugin will not load until its dependency loads using RequireJS

I am using the jquery.validationEngine.js plugin.
jqueryValidateEnglish cannot run unless jqueryValidateEngine is loaded first.
My jquery.wrapped.validationEnglish2.js is coded like the following:
define(['jqueryValidateEngine'],function($){
//Plugin Code here
});
My jquery.wrapped.validationEngine2.js is coded like the following:
define(['jquery'],function($){
//Plugin Code here
});
My homepage contains:
<script src="/imagesrv/marketing/requireJS/assets/lib/require.js" data-main="/imagesrv/marketing/requireJS/assets/js/common2">
common2.js Contains:
//Configure RequireJS
require.config({
baseUrl: "/imagesrv/marketing/requireJS/assets",
paths: {
// The libraries we use
jquery: [
'/imagesrv/marketing/js/jquery.min'
],
bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min',
smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device',
eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag',
main: '/imagesrv/marketing/requireJS/assets/page/main',
startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit',
jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min',
smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min',
genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script',
owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel',
placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder',
explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped',
kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script',
jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2',
jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2'
}
});
require(['main', 'bootstrap', 'startupkit', 'eloquatag', 'owlcarousel', 'kiblog', 'jqueryuicus', 'jqueryValidateEnglish'], function($) {// Load up this pages script, once the 'common' script has loaded
console.log('jQuery and r.js have been loaded!');
});
But I keep getting the following error in the console when I run my page:
"$(...).validationEngine is not a function
When I look under Network it shows that my wrapped plugins are loading but for some reason it seems like they must be loading out of order which is probably why I am getting the console error.
I am not sure what the issue is.

If jQuery loaded first , could utilize $.holdReady() , $.when()
$.holdReady(true);
var scripts = {
bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min',
smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device',
eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag',
main: '/imagesrv/marketing/requireJS/assets/page/main',
startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit',
jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min',
smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min',
genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script',
owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel',
placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder',
explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped',
kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script',
// load `jquery.wrapped.validationEngine2` before `jquery.wrapped.validationEnglish2`
jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2',
jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2'
};
var requests = $.when.apply($, $.map(scripts, function(url, name) {
return $.getScript(url)
}));
requests.then(function() {
$.holdReady(false);
}, function(error) {
console.log(error)
});
$(document).ready(function() {
// do stuff when `scripts` loaded
});

I am not sure if I understood the problem correctly, but from what I understood is that you are missing a declaration of dependency on your require.config, you are not telling require that it depends on anything, so, you need to make a change
to something like this:
require.config({
//alias
paths: {
jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2',
jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2'
},
//dependencies
shim: {
'jqueryValidateEngine': ['jqueryValidateEnglish']
}
});
I hope this is what you are looking for

Any hacks to use wrapper js lib instead of Extjs 5.x by Sencha CMD 5.x?

In respect of Extjs 4.1.x I was able to use custom/wrapper library to manipulation model, store, view, controller as well as other utilities. So my demand is to replace boiler plate of code through my custom/wrapper library. Regarding the code as bellow:-
var Lib = Lib || {
$class : 'Lib',
$package : 'Default',
version : '1.0.00',
getName : function(){
return Lib.$class;
},
define : function(name, config){
return Ext.define(name, config);
}
};
is my custom library, right now I would like to replace the following code
Ext.define('Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
as bellow the replacement/wrapper of Extjs code:
Lib.define('Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
But here is the problem cause Sencha CMD 5.x build error where previous version of Sencha SDK, CMD support to use 3rd party library simply use it in index.html
<script id="extwrapper" type="text/javascript" src="Lib.js"></script
but latest Sencha CMD 5.x with Extjs 5.x occurred compilation error. Any way I would like to use custom/wrapper library instead of Extjs 5.x use directly. Do you have any hacks? While I tried by adding my customer/wrapper library in app.json as
"js": [
{
"path": "${ext.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "${ext.dir}/Lib.js",
"bootstrap": true
},
{
"path": "app.js",
"bundle": true
}
],
still its appear Sencha CMD 5.x build error. Any kind of reference does not support on className even java script closure/inline function. for example
Ext.define((function(){ return 'Myapp.view.main.MainModel';})(), {
extend: 'Ext.app.ViewModel',
alias: alias,
data: {
name: 'Myapp'
}
});
on data it's support simple java script closure/inline function but no reference. for example
Ext.define( 'Myapp.view.main.MainModel', (function(){
return {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
}
})());
even when I am going to use simple reference it does not work. for example
Ext.define( 'Myapp.view.main.MainModel', (function(){
var data = {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
};
return data;
})());
Build Failure for code as above I mentioned
Sencha Cmd v5.0.2.270
[INF] Processing Build Descriptor : default
[INF] Loading app json manifest...
[WRN] C1003: Unsupported Ext.define syntax (function does not return object lite
ral) -- g:\js\extjs\myapp\app\view\main\MainModel.js:1
[WRN] C1003: Unsupported Ext.define syntax (function does not return object lite
ral) -- g:\js\extjs\myapp\app\view\main\MainModel.js:1
[ERR] C2008: Requirement had no matching files (Myapp.view.main.MainModel) -- g:\j
s\extjs\myapp\app\view\main\Main.js:12:50
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: Failed to find any files for g:\js\extjs\my
app\app\view\main\Main.js::ClassRequire::Myapp.view.main.MainModel
[ERR]
[ERR] Total time: 7 seconds
[ERR] The following error occurred while executing this line:
g:\js\extjs\myapp\.sencha\app\build-impl.xml:376: The following error occurred whi
le executing this line:
g:\js\extjs\myapp\.sencha\app\init-impl.xml:292: com.sencha.exceptions.ExBuild: Fa
iled to find any files for g:\js\extjs\myapp\app\view\main\Main.js::ClassRequire::
Myapp.view.main.MainModel
Where is the problem? There was no restriction with Extjs 4.1.3 with previous version Sencha SDK/CMD. but why they added such type of feature?
By Extjs-4.1.3 I was able to write and compile as the code as bellow
Ext.define(Lib.view.getAbsView('V01I001001X01'), {
extend : 'Ext.form.Panel',
alias : Lib.app.getAlias('V01I001001X01'),
id : 'V01I001001X01'.toLowerCase(),
bodyStyle : {
background : 'none'
},
defaults : {
//TODO
},
initComponent: function() {
var me = this;
//TODO
me.callParent(arguments);
}
});
Which one work as like as hard code as bellow
Ext.define('Myapp.view.m01001.m0i001.v01i001001.V01I001001X01'), {
extend : 'Ext.form.Panel',
alias : 'widget.v01i001001x01'
id : 'v01i001001x01',
bodyStyle : {
background : 'none'
},
defaults : {
//TODO
},
initComponent: function() {
var me = this;
//TODO
me.callParent(arguments);
}
});

Part of your problem is that Sencha Command does not just run JavaScript it also parses and compiles it in order to do a lot of "clever" stuff. This means that there are some restrictions on how your code should be formed. See:
http://www.sencha.com/forum/showthread.php?261509-Unsupported-Ext.define-syntax-%28function-does-not-return-object-literal%29
You have this code:
Ext.define( 'Myapp.view.main.MainModel', (function(){
return {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
}
})());
Which it seems CMD is parsing and seeing the second argument as something other than an object literal (which makes sense since it's not, it's a function). Obviously the following would work:
Ext.define( 'Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
I don't understand why you would ever want to use the first form, it seems to have no advantage over the standard method of doing it. Either way though, it looks like you would be better trying to work with Ext JS and CMD rather than hacking around this issue.

RequireJS: CDN fallback not working with Kendo

Struggling to set up RequireJS with KendoUI over CDN and can't get fallback to work.
... from amazing burkeholland A Kendo UI ASP.NET MVC SPA Template
This what I begin with :
define([
'../Scripts/kendo/2014.1.416/kendo.router.min',
'../Scripts/kendo/2014.1.416/kendo.view.min',
'../Scripts/kendo/2014.1.416/kendo.fx.min'
], function () {
return kendo;
})
and it works fine.
If kendo.core.min is not defined, first statement in kendo.router says define(["./kendo.core.min"] and it is loaded from proper location.
However, when I try to use CDN with fallback location like this :
requirejs.config({
paths: {
'router': ['//cdn.kendostatic.com/2014.1.416/js/kendo.router.min', '../Scripts/kendo/2014.1.416/kendo.router.min'],
'view': ['//cdn.kendostatic.com/2014.1.416/js/kendo.view.min', '../Scripts/kendo/2014.1.416/kendo.view.min'],
'fx': ['//cdn.kendostatic.com/2014.1.416/js/kendo.fx.min', '../Scripts/kendo/2014.1.416/kendo.fx.min']
}
});
define([
'router',
'view',
'fx'
], function () {
return kendo;
});
requireJS tries to load kendo.core.min from baseUrl location, not fallback location.
Am I missing something?
However, if I try something like this :
requirejs.config({
paths: {
k: ['//cdn.kendostatic.com/2014.1.416/js', '../Scripts/kendo/2014.1.416']
}
});
define([
'k/kendo.router.min',
'k/kendo.view.min',
'k/kendo.fx.min'
], function () {
return kendo;
})
Fallback doesn't work at all... what am I missing?

Require js, TweenMax, IE8

I have been wrestling a bit to get GreenSock JS (TweenMax) to work with require.js. I finally got it working in modern browsers, but IE8 is throwing weird errors.
My main require config file:
require.config({
baseUrl: '/ui/js',
paths: {
jquery: 'modules/libs/jquery-1.10.2',
tweenmax: 'modules/vendor/greensock-js/TweenMax'
},
shim: {
jquery: {
deps: ['constants'],
exports: 'jQuery'
},
tweenmax: {
exports: 'TweenMax'
}
}
});
My 'module' file:
define([
'jquery',
'tweenmax'
], function($, TweenMax) {
// Subscribe to the 'toggleFlyout' event
// The event is used to open the flyout menu
$(document).on('toggleFlyout', function() {
var $html = $('html');
var $page = $('.page');
var openClass = 'js-flyout-open';
if ( !$html.hasClass(openClass) ) {
TweenMax.to($page, 0.2, {left:246, onStart: function() {
$html.addClass(openClass);
}});
} else {
TweenMax.to($page, 0.2, {left:0, onComplete: function() {
$html.removeClass(openClass);
}});
}
});
// Publish the 'toggleFlyout' event
// The event is published when the user click the menu button or the page overlay
$(document).on('click', '.main-header__nav a, .toggle-flyout', function(event) {
event.preventDefault(event);
$(this).trigger('toggleFlyout');
});
});
IE8 is throwing the following errors:
Expected identifier TweenMax.js, line 2295 character 4
'TweenMax' is null or not an object flyout.js, line 38 character 4
Note, that the code is working fine in modern browsers.

TweenMax and Jquery are AMD modules since a very early version you don't not need shim config for them..
You should also compile your solution.
Requirejs is better to run as dependency manager and packager than a module loader.
Use
https://github.com/gruntjs/grunt-contrib-requirejs
for reference.

Implementing Childbrowser in Sencha Touch using Phone Gap

I am currently deploying for Android OS in Sencha Touch 2.
I have included the path for "cordova-2.2.0.js" ,"ChildBrowser.js" in the app.json file
I am developing it in Windows PC with Chrome browser and deploying using Sencha tool and phonegap build to android device.
My sample code is
window.plugins.childBrowser.openExternal("http://www.google.com");
I get following error in my webkit browser.
Uncaught TypeError: Object # has no method 'exec'
And in my native app I am not getting any response.
Please Help ...i am Including my Main.js file
Thank you
Main.js file
Ext.define('Children.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
items: [
{
xtype: 'button',
text: 'Open Google',
handler: function(button) {
window.plugins.childBrowser.openExternal('http://www.google.com');
}
}
]
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});

This is simply a very big big big question:
To do that you need several technical skills: javascript, sencha touch, java (for Android OS) and phonegap plugin
Are you able to write a phonegap plugin?
A short receipt to do that but I do not include the Java code, because I need more details from you:
in config.xml under res/xml put your plugin config (InfoP is a Java class):
add InfoPlugin.java in your src folder;
add infopl.js under assets/www; (infopl.js is the javascript wich call the Java plugin)
in index.html (for example) the plugin:
In the webapp you can call the plugin:
<script type="text/javascript">
document.addEventListener('deviceready', function() {
window.plugins.infoPl.getInfo(
function(info) {
alert(info);
//( you can see what you log on console with ADB console log)
console.log('MYINFO: '+info);
}, function() {
console.log("fail");
}
);
}, false );
</script>
In Sencha use (better if you use a controller with MVC capabilities of sencha touch):
listeners: {
tap:
function() {
alert('something');
}
instead of:
handler: function(button) {
alert('something');
}
You suggest you to check:
http://docs.phonegap.com/en/2.6.0/guide_plugin-development_index.md.html#Plugin%20Development%20Guide
http://docs.sencha.com/touch/2.2.0/#!/video/mvc-part-1