Getting a Backbone.js fiddle working - javascript

I am stuck on a seemingly simple Backbone.js issue and would like to set up a fiddle to iteratively work through the problem. However... I can't seem to get the fiddle to load the scripts properly, or at least I am no using the correct "method".
Here is the link to the Jsfiddle
I've selected the following external sources, and provided each with links to the appropriate cdnjs sites.
However I'm still getting the following errors:
The firs tone deals with the Underscore.js library:
Message: Uncaught TypeError: Cannot read property 'each' of undefined - backbone.js:219
Code: _.each(listenMethods, function(implementation, method)
The second refers to my first Backbone declaration:
Message: Uncaught ReferenceError: Backbone is not defined - (index):47
Code: var QuoteHistory = Backbone.Model.extend(

You should at first load jQuery and Underscore and then the Backbone library. Also note that jQuery UI Bootstrap.js depend on jQuery, so the jQuery library should be loaded before these libraries; however, as you are loading jQuery in the "Frameworks & Extensions" panel you don't have to load it again manually.

Related

Framework7 js Bundle disables the ajax Function

I am trying to migrate my app from plain HTML to framework 7, everything was going well until I noticed that the ajax requests were not being executed since they resulted in an error
Uncaught TypeError: $.ajax is not a function
at functionName (file.js:73:5)
at functionName (file.js:69:2)
at HTMLFormElement.<anonymous> (file.js:18:2)
I briefly know that the type error could occur mainly if jquery is not present in the project or when the slim version of Jquery is used which wasn't the case for my project
after some time hunting the cause of the issue, I found that whenever the file framework7-bundle.min.js is included ajax would stop working resulting in the above error, and would work if vice versa, is there a way to navigate through this issue?
after some trying to figure out the issue, I found that framework7 comes with its own Dom manipulator and uses the very symbol that jquery uses hence overriding all included jquery functionalities to fix this issue, I did comment on the line from where this Dom Manipulator is initialized.
The Dom Handler can be disabled by removing or commenting on the first line in app.js, this particular line var $ = Dom7;

Select2 4.0.5 common errors in Django admin

(Disclaimer: this is a self-answered question)
I wanted to set up some Select2 to my form fields while in a Django admin panel (specifically in the change_list.html template). So I added the neccesary scripts to the page (not the full version), but when it loads, I get this errors:
Select2: An instance of jQuery or a jQuery-compatible library was not found. Make
sure that you are including jQuery before Select2 on your web page.
TypeError: a is undefined
TypeError: e is undefined
TypeError: $ is not a function
And when you search for one of those errors (well, not the first and last ones), the answers aren't on the same subject (normally it has to do with a bad processResults setup, or problems with Bootstrap) or in the docs neither.
How can I fix it?
There are two steps involved fixing it:
Setting a var called $
This one is the first thing you think of when you see the last line (TypeError: $ is not a function), and all scripts normally use it (who doesn't uses $ in their scripts?). But when you modify it, you still get these errors:
TypeError: a is undefined
TypeError: e is undefined
So, we have to go deeper...
Setting a var called jQuery
This one can be a little hidden, as we have to dig into the select2.js script (you normally use the minified version, so only $ is showed instead).
Looks like a var called jQuery is used sometimes, so you also have to set it up in your JS.
How the fix should look like
Add this script before your Select2 scripts:
<script type="text/javascript">
// To prevent errors for Select2 JS
var $ = django.jQuery;
var jQuery = django.jQuery;
</script>

"Uncaught ReferenceError: createStoryJS is not defined" Error with Timeline JS

I built out a demo page using Timeline JS and it works fine within a regular HTML file (See Example Here). However, now that I am using it with ExpressionEngine platform (v 2.9.2), I get a javascript error and the area where the timeline should appear is blank (See Here).
The js error message is "Uncaught ReferenceError: createStoryJS is not defined." I'm not well versed with javascript so I do not know what that means or how to correct it. Please help.
Per RainerJ on Experts-Exchange, I just needed to add the following reference. It works like a charm now

Undefined is not a function in Backbone.js

I get the error "undefined is not a function" when running this code locally and from a Dropbox public url, http://dl.dropbox.com/u/6862628/backbone.html.
However, when I run it on jsfiddle it works as expected: http://jsfiddle.net/fdKKD/
In short, I'm creating a simple model and a simple view. When I set a property on the model, the view console.log's "render".
I'm seeing the same behavior in Chrome 17 and Safari, Mac.
This is driving me nuts. Would appreciate some help.
Backbone requires either jQuery or Zepto to be loaded before Backbone if you intend to do any DOM manipulation (i.e. if you use a view). Your HTML includes things in this order:
Underscore.
Backbone.
jQuery.
So Backbone doesn't know if it should use jQuery or Zepto when it loads and you end up with an undefined value being used a function. Your original jsfiddle uses jQuery in the sidebar so jQuery will be loaded by jsfiddle before your <script> tags are hit, so Backbone sees jQuery, uses it, and everything works. If you switch to "No-Library (pure JS)":
http://jsfiddle.net/ambiguous/pzgW7/
then you'll see your error again. If you include jQuery first:
http://jsfiddle.net/ambiguous/C32Gd/
things will work.

Can't get jstree working - "Uncaught TypeError: Object #<Object> has no method 'delegate'"

I'm trying to get the jstree plugin working, following the "Predefined HTML" example on this page: http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/1_datasources.html
To avoid any conflict with anything else that might be happening, i've tried to get it working in the simplest possible page, in my public dropbox folder: http://dl.dropbox.com/u/846812/jstree_example/jstree_example.html
The only js i've included in my page is jquery and the main jstree file, jsTree/jquery.jstree.js. (The documentation is a bit shaky about what exactly i need to include, but maybe this is the problem). The rest of the files i downloaded are next to jquery.jstree.js, in the jsTree folder.
I've also got my predefined html, a nested list in a div with id="folder_tree".
When the javascript runs, i get an error Uncaught TypeError: Object #<Object> has no method 'delegate', from line 3629 of the jquery.jstree.js file - hopefully you'll see this error too.
Can anyone have a look at the page (the dropbox link above) and see what i'm doing wrong? thanks, max
(note that the file links in that page don't work - they don't need to in order for jstree to work)
jQuery delegate is since version 1.4.2
You are using a older version of jQuery

Categories