can't initialize backbone.js view - javascript

I'm learning backbone.js and already have a problem.
I'm loading my scripts with LABjs like this:
$LAB.setOptions({BasePath : path})
.script('libs/underscore.js?v=1.3.3')
.script('libs/backbone.js?v=0.9.2')
.script('libs/jquery.js?v=1.7')
.script('libs/bootstrap.min.js?v=2.0.2').wait()
.script('test.js');
In my test.js I have this (from backbonetutorials.com):
(function($){
SearchView = Backbone.View.extend({
initialize: function(){
alert("Alerts suck.");
}
});
var search_view = new SearchView;
})(jQuery);
As you see this should give me an alert with text "Alerst suck.".
Instead it throws an error on my firebug console - i is not a function (34 line of backbone.js).
If I try to initialize view like this var search_view = new SearchView({el: $('#some_dom_element')}); it gives me another error - invalid 'instanceof' operand i (34 line of backbone.js file).
jQuery object $ is defined.
I can initialize Backbone.js models without any problems. Just view throws those errors. What I am missing?

It seems that order in which scripts are loaded matters. I've loaded jQuery first now and it started to work. I've also tested it with non minified version of backbone.js and the error was more verbose $ is not a function. So again - loading jQuery before backbone.js fixed it.
EDIT: When loading jQuery after backbone.js when I do console.log($) right before view initialization it shows tha $ is a function. Why backbone.js fails to work then? Can someone explain this?

Related

Uncaught ReferenceError Class is not define

I'm currently creating a game with Javascript and HTML using an MVC design pattern. However, when uploading to the cafe I'm using, I keep getting an error that my View.js class is not being defined in the Controller.js class. However, as by the snippet of code below, you can see that it is:
"use strict";
var model = new Model(),
view = new View(),
controller = null;
function Controller(){
this.init = function(){
view.playGame();
}
}
I also have included the relevant javascript classes within script tags on the single html sheet I'm using. The error message I get in the Chrome debugger is "Uncaught ReferenceError View not defined in Controller.js" Does anybody know why this has started happening? As I have been working on this project for a while and this is the first time it has happened.

Prototype and jQuery conflict with $.when.apply

I have tried multiple combination of usage of code to make the Prototype and jQuery to work, but no luck yet.
Here is what I have currently.
index.html:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="MAIN_JS_FILE.js"></script>`
main_js_file.js:
jQuery(document).ready(function() {
var jsq = [];
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_1);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_2);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_3);
var deferredjs = jQuery.when.apply(jQuery, jsq);
deferredjs.done(function() {
//Various variable initialization
//Various function definition.
}
});
Now when page is loaded (page loads properly), chrome console shows an error message:
Uncaught TypeError: undefined is not a function.
When clicked on the error file link, it points to element.dispatchEvent(event); in the prototype.js file, line no 7066.
Any help is appreciated.
Thanks.
Edit: I have changed the MAIN_JS_FILE.js file to use only jQuery instead of $
So now there is not a single javascript code that uses $ and still the undefined error is displayed.
If I now use jQuery.noConflict(); before .ready() function, then the $.when.apply code does not even execute.
As #steven iseki mentioned in comment you, can use jQuery.noConflict. You can read on their website that:
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
And it's indeed a case with Prototype also using $ sign.
Also, remember to use jQuery instead of $ sign in your jQuery code, e.g.:
jQuery(selector).on('click', function(){...});
I don't think there's jQuery Conflict error here. Try changing your code from main.js. Try alternate method to get your task done here. I analyzed your code but prototype.js has a way of hiding real thing.

Undefined jscript in javascript

I have created an ASP.Net application. I am using a javascript which is written in a separate file. I am using Var myvariableName ={} in javascript file.
I have included this file in MasterPage and accessing myvariableName in my aspx page.
This is working fine in Google Chrome, however, in IE 8 an unhandled exception is thrown as
myvariableName is undefined.
the error shows as;
0x800a1391 - Microsoft JScript runtime error: 'Common' is undefined
where Common is my javascript variable.
Please assist me in resolving this issue.
You're probably accessing the variable before your external script is executed.
Be sure to access your variable as soon as the document is fully loaded (i.e. $(document).ready(function(){...}); if you use jQuery) or try to find out the real execution order with some alert (that shouldn't be browser-depentent, by the way!).
If your code is already in a document.load or $(document).ready(function) you can always
handle the variable before acessing it via
if (typeof myvariableName !== "undefined") {
// do stuff
}
Some times in IE shit happens and window.load gets screwed specially when async calls are in place.
You are probably getting this error due to a missing semicolon. Change the code to this:
var myvariableName = {};
In your asp page, where you access your custom variable, wrap your code with:
var myvariableName = {};
window.onload = function(){
// your code here where you're accessing the variable
};

dojo updated causes strange errors

I recently updated my project to dojo version 1.6.2 from 1.6.1 now I keep getting strange errors without any code changed.
Chrome error console:
Error parsing in _ContentSetter#Setter_DIV_0
/etermin/js/dojo-release-1.6.2/dojo/../dijit/layout/ContentPane.js:203
Error undefined running custom onLoad code: This deferred has already been resolved
/etermin/js/dojo-release-1.6.2/dojo/../dijit/layout/ContentPane.js:142
Firefox error console:
dojo.js (vrstica 324)
Error parsing in _ContentSetter#Setter_DIV_0
Error: Could not load class 'dijit.form.FileringSelect
dojo.js (vrstica 372)
Error undefined running custom onLoad code: This deferred has already been resolved
There is a problem in the dojo.js file: If I change it back to 1.6.1 it makes things work. But I want to use 1.6.2 version
Plaease help and advise
UPDATE:
Something strange that I've found:
var p = new dijit.MenuItem({
label: "cut",
})
p.onClick = function() {
dojo.xhrGet({
//some ajax call
});
}
Doesn't work. But if I put just one simple alert before the ajax it works.
p.onClick = function() {
alert("123");
dojo.xhrGet({
//some ajax call
});
}
Why don't you update your Version to 1.9? Sooner or later the legacy dojo won't work anymore and in the Google Hosted librarys i found no Version 1.6.2
Have a look:
https://developers.google.com/speed/libraries/devguide
Is it still available? Where do you get the dojo.js from?
To prevent the timing Issue of the Menu, you can define the onClick when you
define your MenuItem.
Have a look :
var p = new dijit.MenuItem({
label: "Menu Item With an icon",
iconClass: "dijitEditorIcon dijitEditorIconCut",
onClick: function(){alert('i was clicked')}
}));
Regards, Miriam
This is reported as a bug.
Look here for the bug report..
You have to patch your dojo version or Upgrade it to 1.8 or later to fix it.
If you know what you are playing with you can fix it manually.
The patch is on here.
You can manually apply this to your current dojo build to fix it.

TypeError when running jasmine specs that use a jQuery plugin built using the Widget factory

I'm using a jQuery plugin called toggleEdit for inline editing.
Everything works fine when the code is actually used in the page.
However, my test suite fails with the following error:
TypeError: Cannot call method 'remove' of undefined
I tracked it down to be triggered from within the clear method of this particular plugin. Its source file can be found here.
There are two relevant bits in that code:
1- The _init function
self.element.addClass("toggleEdit toggleEdit-edit toggleEdit-edit-" +
self._tag(self.element))
//store reference to preview element
.data("toggleEdit-preview", self.p);
As you can see, when the plugin is first instantiated it uses the data structure on self to store the newly created element.
2- The clear function
self.element.data("toggleEdit-preview").remove();
The clear function then tries to access that structure and retrieve the element. That's when, while inside a jasmine spec, it fails with the aforementioned exception.
Has anyone seen anything similar?
EDIT:
This is my spec, it's the simplest piece of code able to reproduce the error:
it("should update the given attribute on the server", function(){
$('#user-details input, #user-details select').toggleEdit(); //this line triggers the error
});
http://alz.so/static/plugins/toggleedit/jquery.toggleedit.js
I was taking a look at the source for toggleEdit and it seems that the only 2 times the function clear is called is just before self.element.data gets set:
if (typeof self.element.data("toggleEdit-preview") !== "undefined") {
self.clear();
self.disableEvents();
}
And at destroy function:
destroy: function() {
var self = this;
self.clear();
self.disableEvents();
$.Widget.prototype.destroy.apply(self, arguments);
}
Since the first call seems to be protected, I ask you a somewhat dumb question: Is it possible that destroy is being called twice?
Found my problem: old version of the jQuery + jQuery UI duo. Upgrading them resolves the exception.

Categories

Resources