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.
Related
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;
I am working with this demo: http://cssdeck.com/labs/setting-active-states-on-sticky-navigations-while-scrolling/
For some reason when I try to recreate it the Java part making the navigation work isn't coming through on my version here: http://cssdeck.com/labs/ydsxavxy
So far I saved out index.html, style.css, and flip.js and attempted to link the CSS and JS in the index.
How can I get my version working like the demo? How is a Java file included outside of CSSDeck? I am not too familiar with how CSSDeck takes the HTML, CSS, and Java and combines them into one page preview.
The version of jQuery you are loading is not correct.
The example that works uses 1.8, and you are loading 1.4:
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
You can easily know this by looking at your browser console and seeing what errors it's throwing. In your case, the error is as follows:
TypeError: $(...).on is not a function
This usually means your jQuery library is not defined or not supported by the code you're using.
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.
Background
I have a snippet of javascript that sites on customer pages. When this script is executed, it loads necessary assets and scripts and then executes the main code.
One of the script's I'm loading is Twitter's bootstrap JS to create a modal window. It's implemented as a jQuery plugin, and adds '$.modal()' to a jquery object.
Problem
This works on all but one customer site. On this particular site, as I invoke $('#idOfWindow').modal();, the page throws a javascript error Object has no method 'modal'
I've verified that the bootstrap code is invoked, and $.fn.modal is called to setup the plugin, My hunch is that something is clobbering the jQuery object, but I'm not sure how to debug this.
Comments
I'm currently using Chrome's Developer Tools to Debug, and I have verified that the plugin is loaded and executed before it's ever called. The client site is using jQuery 1.7.2. I'm familiar with chrome tools, but I'm not a power user.
If you are right, that your original jQuery object is being overwritten somewhere, you should be able to restore it with jQuery.noConflict().
Demo: jsfiddle.net/KthZu
Edit: Some debugging tips:
To help in debugging, you can check the jQuery version in the console with this code:
$().jquery
Another potential debugging trick would be to store a reference to jQuery when you create you plugin.
$.fn.myPlugin = function(){};
window.jQueryWithMyPlugin = $;
Then, when debugging, you can plainly see if window.$ has been overwritten:
$ === jQueryWithMyPlugin
Generally for any widget type of code that is to be embedded externally, you'll want to wrap your code:
(function($){
$('#idOfWindow').modal();
})(jQuery);
I have, in the past had issues where multiple versions of jQuery (or jQuery & prototype) were loaded on the same page. Be sure that the version of jQuery you're adding $.fn.modal to is identical to the version that's being called. $().jquery can be used to access the specific version of jQuery in use.
I tried to create custom widget for my site. when I loaded page it says:
mixin #0 is not a callable constructor.
clsInfo.cls.prototype is undefined
I can't find any information about clsInfo, so I don't know what is it. maybe the problem that I use dojo from google:
and my own script is located on localhost. so when my dojo on page initializes something goes wrong with my script. I can't find any good info on dojo, maybe I search in wrong places?
please help me to resolve my problem
I ran into this when I was trying to override a dijit.Dialog so I could bind events to controls within it. We've yet to see if the binding part will work, but if you look at the source, this happens when one of the bases passed in as the second argument fails to resolve to an "[Object function]". In my case, I was passing a String in.
dojo.declare takes 3 arguments:
The name of the custom object "class" you're building
An array of base classes, parents to provide functionality (not the string names of those classes)
A hash of functions and declarations
So if I want to override dijit.Dialog, I have to do:
dojo.declare("myDialogType", [dijit.Dialog], {
function1() {/*Code*/},
function2() {/*Code*/}
}
I had ["dijit.Dialog"] as my second argument and that was the problem.
I strongly recommend using Web Inspector or Firebug with uncompressed local copies of the Dojo library rather than the CDN to figure out what's going on and debug these types of problems. Dojo's documentation is extensive but not complete in some areas and some behaviors have to be figured out by looking at what the code expects. That's not intended as a slight to the authors; once you get it going it's a pretty awesome product, and any documentation for volunteer work is appreciated.
Are you sure Dojo is loading? Did you put your code in a dojo.addOnLoad()? When using a CDN you sometimes run into issues with execution times. dojo.addOnLoad() will not only trigger when the DOM is loaded, it gets called when dojo resources have downloaded, such as dijit._Widget.
I've run into this problem when I screw up the order of my requires which makes _WidgetBase not what _WidgetBase really is. Seems like a simple spot to screw up.