jslegers / cascadeframework

Cascade Framework
Other
276 stars 52 forks source link

Jquery not working as expected #79

Closed JimTR closed 10 years ago

JimTR commented 10 years ago

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 ?

jslegers commented 10 years ago

Can you provide me a link where I can try running your code myself?

JimTR commented 10 years ago

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

jslegers commented 10 years ago

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.

JimTR commented 10 years ago

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.

jslegers commented 10 years ago

Try this :

App.define([{
    id: '1',
    name: '1',
    dependencies: 'jquery',
    path: App.relativePath('module/mysite/1.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']
}]);
JimTR commented 10 years ago

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.

jslegers commented 10 years ago

It seems fine now.

Do you still experience any issues?

JimTR commented 10 years ago

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 ?

jslegers commented 10 years ago

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.