Closed JimTR closed 10 years ago
Can you provide me a link where I can try running your code myself?
http://noideersoftware.co.uk/index.php the browsers I am using is Chromium Version 37.0.2062.120 Ubuntu 14.04 (281580) (64-bit) or Firefox 32.03
The problem is that you're trying to run jQuery code before jQuery is loaded.
The proper way to fix your problem, is to add any custom code to assets / js / site / base.js
.
With method App.use()
, you can load one or more dependencies (in this case : jQuery) and execute your custom code after each of the dependencies is loaded.
Your problem should be fixed if you delete the jQuery code on your index page and replace the code at assets / js / site / base.js
with the following code :
App.use([{
dependencies: 'jquery',
callback: function() {
setInterval(function() {
loadframe (a);
loadframe (b);
loadframe (c);
loadframe (d1);
loadframe (e1);
loadframe (e2);
loadframe (e3);
loadframe (e4);
loadframe (e5);
}, 300000);
}
}, {
dependencies: ['cascade', 'analytics']
}]);
If you want to add any custom dependencies with the App.use()
function, you'll need to define those dependencies first. The proper place to define dependencies would be in the file assets / js / module / definitions.js
.
Ok cool the loadframe function is in another js file .. will this method still load, in this case '1.js' or should this function also move ? On 06/10/14 19:42, John Slegers wrote:
The problem is that you're trying to run jQuery code before jQuery is loaded.
The proper way to fix your problem, is to add any custom code to |assets / js / site / base.js|.
With method |App.use()|, you can load one or more dependencies (in this case : jQuery) and execute your custom code after each of the dependencies is loaded.
Your problem should be fixed if you delete the jQuery code on your index page and replace the code at |assets / js / site / base.js| with the following code :
App.use([{ dependencies: 'jquery', callback: function() { setInterval(function() { loadframe (a); loadframe (b); loadframe (c); loadframe (d1); loadframe (e1); loadframe (e2); loadframe (e3);
loadframe (e4); loadframe (e5);
}, 300000); } }, { dependencies: ['cascade', 'analytics'] }]);If you want to add any custom dependencies with the |App.use()| function, you'll need to define those dependencies first. The proper place to define dependencies would be in the file |assets / js / module / definitions.js|.
— Reply to this email directly or view it on GitHub https://github.com/jslegers/cascadeframework/issues/79#issuecomment-58069871.
Try this :
assets / js / module / definitions.js
.App.define([{
id: '1',
name: '1',
dependencies: 'jquery',
path: App.relativePath('module/mysite/1.js')
}
assets / js / module / base.js
.App.use([{
dependencies: '1',
callback: function() {
setInterval(function() {
loadframe (a);
loadframe (b);
loadframe (c);
loadframe (d1);
loadframe (e1);
loadframe (e2);
loadframe (e3);
loadframe (e4);
loadframe (e5);
}, 300000);
}
}, {
dependencies: ['cascade', 'analytics']
}]);
hi I don't have |assets / js / module / base.js| but I do have assets / js / site / base.js I assume this is the file I need to edit ?
I also assume that this is correct in definitions.js ? the additions are in red
App.define([{ id: 'jquery', name: 'jQuery', path: Detector.jquerylegacy ? App.jqueryPath('jquery-1.10.2.min.js') : App.jqueryPath('jquery-2.0.3.min.js') }, { id: 'easing', name: 'Easing', dependencies: 'jquery', path: App.jqueryPath('jquery.easing.js') }, { id: 'flot', name: 'Flot', dependencies: 'jquery', path: App.jqueryPath('flot/jquery.flot.js') }, { id: 'cascade', name: 'Cascade', dependencies: ['jquery', 'easing'], path: App.jqueryPath('cascade/core.js') }, { id: 'charts', name: 'Charts', dependencies: ['cascade', 'flot'], path: App.jqueryPath('cascade/chart.js') }, { id: 'chartcategories', name: 'Chart Categories', dependencies: 'charts', path: App.jqueryPath('flot/jquery.flot.categories.js') }, { id: 'parsley', name: 'Parsley', dependencies: 'jquery', path: App.jqueryPath('parsley/parsley.min.js') }, { id: '1', name: '1', dependencies: 'jquery', path: App.relativePath('js/1.js') },{ id: 'analytics-dep', name: 'Google Analytics Dependency', path: App.relativePath('module/google/analytics.js') }, { id: 'analytics', name: 'Google Analytics', dependencies: 'analytics-dep', path: (document.location.protocol === 'https:' ? '//ssl' : 'http://www') + '.google-analytics.com/analytics.js', callback: function() { ga('create', App.trackingcode, 'cascade-framework.com'); ga('send', 'pageview'); } }]);
Regards Jim
On 06/10/14 22:57, John Slegers wrote:
Try this :
- Open file |assets / js / module / definitions.js|.
- Add the following code :
App.define([{ id: '1', name: '1', dependencies: 'jquery', path: App.relativePath('module/mysite/1.js') }
- Open file |assets / js / module / base.js|.
- Change your code to :
App.use([{ dependencies: '1', callback: function() { setInterval(function() { loadframe (a); loadframe (b); loadframe (c); loadframe (d1); loadframe (e1); loadframe (e2); loadframe (e3);
loadframe (e4); loadframe (e5);
}, 300000); } }, { dependencies: ['cascade', 'analytics'] }]);— Reply to this email directly or view it on GitHub https://github.com/jslegers/cascadeframework/issues/79#issuecomment-58106616.
It seems fine now.
Do you still experience any issues?
it seems to work fine .... but if I add extra functions to 1.js, that are used (on this page or others) I will have to define them the same way ?
You just need to define each JS file that you're loading. It doesn't matter what JS code or how much JS code is in it.
I have added a jquery document ready function to a html page .... if you navigate to the page I get the following error
"Uncaught ReferenceError: $ is not defined"
however if I reload the page I get no errors and the page works correctly have I defined cascade css and jquery scripts in the wrong order ? ... I have defined cascade css cascade js my js (a few functions that alter iframes however I still get the error if I remove this file) the document ready function html code
is this the correct order ?