I am trying to use fancytree in a backbone.js application.
I am getting the following error:
TypeError: $(...).fancytree is not a function
when it hits this line in the backbone.js view:
var myTree = $("#buildingsTree").fancytree({
Any ideas?
Thanks!
Make sure you have required the fancytree js files before your view gets loaded, as per https://github.com/mar10/fancytree/wiki#user-content-embed-fancytree-on-your-web-page
Make sure you are using a compatible jQuery version: "Required minimum versions are jQuery 1.7+ and jQuery UI 1.8.6+" https://github.com/mar10/fancytree/wiki#user-content-getting-started
Related
I am using Chartist JS for my charts in my Angular JS app. The issue is I am seeing this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a plunker here which highlights the same issue in Angular JS but I am confused as to how to put the solution provided by author into my Angular code.
Here is the solution
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
Edit: As requested the JSFiddle is updated, so what I am trying to do is. I have three different tabs and three different graphs, whenever I click on them I should see the respective graph. To make the tab behavior possible I have written a basic code using scope and model. which facilitates the changing of tabs. The issue is that the chart is getting created for first or default tab but not for the second and third tab. There is a solution given by the author but I don't know how to implement that in AngualrJS
the jQuery solution that you post is basically finding all the chart references and then doing DOM manipulation and call the update() function.
The key is how to find the chart to update in Angular.
In this case, you can assign a variable when you create a chart. For example:
var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);
Now you have the reference of the chart. All you have to do is to call update() function to render the chart again.
if (value === "allDrivers") {
$scope.tab = "All";
chart4.update();
}
Here is the working plunker
One thing I like to point out is: right now you need to double click the tab in order to see the chart is being rendered or you resize the browser window. I am still trying to find a way to fix this. But at least this approach gives you an idea how to convert the jQuery solution to Angular solution.
I was able to solve this using angular.element() method. So if you wish you use jquery in your angular code. You have to do this via angular.element method. But make sure to include jquery before angular in your index.html
If jQuery is available, angular.element is an alias for the jQuery
function. If jQuery is not available, angular.element delegates to
Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
I did not know this. From here it was learning for me. Following advice of #pieterjandesmedt from this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo which gives a solution to this issue. The link for problem is given in the question. Hope that helps
I am using the following library to access IndexedDB in Angularjs on a new Chrome App: https://github.com/aaronpowell/db.js
When I try to update the UI on App startup by using this :
db.orders.query().all().execute().done(function(results) {
$scope.ordercount = results.length;
});
in my main.html I have used the ordercount variable as:
Orders : {{ordercount}}
However, the UI is not updating unless I do ng-click or any other ng-* events. All I need is to show number of orders when my app is loaded. I tried $scope.apply(), but it throws error saying apply() is not available.
Please help.
Since you are getting the values from out side of the angular js you need to do it like this,
$scope.$apply(function(){
$scope.ordercount = results.length;
})
It seems like you access $scope from out side of the angular world. You should get scope object first if you want to notify angular that the data had been updated.
//assume you have a controller named "dbCtrl" e.g., <div id="container" ng-controller="dbCtrl"></div>
angular.element($("#container")).scope().$apply(function(){
$scope.ordercount = result.length;
});
Hope this is helpful.
I am trying to start history with backbone however I get the error:
Cannot call method 'start' of undefined
Here is a link to the full code : http://pastebin.com/pNsYghgE
I have jquery, underscore, and backbone js include before this code so I would imagine this should work based off the documentation. I am using backbone 0.9.2. What am I doing wring here?
EDIT: ANSWER
I want not creating an instance of my routers so I added this code to before I called Backbone.history.start():
//initialize all routes
_(this.modules()).each(function(module, moduleName)
{
_(module.routers).each(function(router, routerName)
{
new router();
});
});
Backbone.history can only be started after one or more routers have been defined with routes:
http://backbonejs.org/docs/backbone.html#section-113
You can see here, that the Backbone.history object is created when routes are defined. I don't see any routers or routes being defined in the posted code, so I'm guessing that this is the problem.
When the line is executed Backbone is still not loaded..
Use the
$(function() {
// ...
});
For this part of the code as you have done for other blocks.
It seams okey, can you provide more code, and the part of the html you load jquery, undescore and backbone.
inspect the backbone object before: Backbone.history.start(this.options.historyOptions);
Did you create routers before trying to start the history? (Derick Bailey)
I've decided that I am going to try and learn backbone.js by making a web app. This is the first time I have done anything extensive in javascript, so the answer to my problem may be right in front of my face.
I have the web app on github, along with a running version that doesn't work. The javascript console just says that something is undefined when I don't think it should be. Here's the error that chrome gives for line 30 of app.js:
Uncaught TypeError: Cannot read property 'el' of undefined
I've sort of been referencing the backbone-fundamentals example modular to-do app, and it doesn't seem to have any issues with a similar thing.
If anyone could point out what I am doing wrong, I would be most appreciative!
Thanks in advance!
Your Machine view render method was missing return this and by default all methods return undefined - that's why chaining didn't work
Edit: and a small tip:
jQuery, Underscore and Backbone register globally - and thanks to that you don't have to define them as dependencies every time - it's enough if you require them in your main script once and after that you can access them from the global scope as you normally would
In my case i was returning this without the return keyword. As i was using javascript and not coffeescript it failed on me. So, if you are using javascript use return this; instead of just this in the last line of the render() function.
I also had a problem when using this.collection.on('reset', this.render(), this). I instead had to use this.collection.on('reset', this.render.bind(this));
My model has a url property defined.
However, when I try to call fetch or save on it, I get the error:
TypeError: Cannot call method 'ajax' of undefined
Any solutions are appreciated.
My backend is only a simple RESTful interface.
You have forgoten to add jquery or zepto.js to your side. Backbone tries to call $.ajax(params); and $ is undefined.
You can do this by including jquery or zepto, but you must remember to include one of these before backbone. The other solution that doesn't force your files to be ordered is to call setDomLibrary at document ready:
Backbone.setDomLibrary(jQuery);
This will bind Backbone to the dom library of your choice.