Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - ReferenceError: $ is not defined

I'm getting the following error when I try to do this

var fbcanvas = $('#fbcanvas');

This is the error I got

ReferenceError: $ is not defined

This is my JS code

var feedbackModule = angular.module('feedbackModule', [ 'ui.bootstrap', 'dialogs' ]);

feedbackModule.controller('feedbackDialog', function($scope, $rootScope, $timeout, $dialogs) {
$scope.confirmed = 'You have yet to be confirmed!';
$scope.name = '"Your name here."';

$scope.sendFeedback = function() {

html2canvas(document.body, {
    onrendered: function(canvas) {
    var data = canvas.toDataURL('image/png'), dlg = null;

    dlg = $dialogs.create('js/plugin/vzfeedbacktool.html', 'feedbackToolController', {
        imgdata: data
    }, {
        key: false,
        back: 'static'
    });
    dlg.result.then(function(name) {
        $scope.name = name;
    }, function() {
        $scope.name = 'You decided not to enter in your name, that makes me sad.';
    });

    }
});
}; // end launch

});

feedbackModule.controller('feedbackToolController', ['$scope', '$modalInstance', function($scope, $modalInstance, data) {

$scope.cancel = function() {
$modalInstance.dismiss('canceled');
}; // end cancel

$scope.save = function() {
debugger;
var fbcanvas = $('#fbcanvas');
var ctx = fbcanvas.getContext('2d');
var image = new Image();

image.src = data.imgdata;
ctx.drawImage(image, 0, 0);
}; // end save

}]);

Any idea if I'm missing something? by the way, if I try to execute that code directly in the console it works fine :S

Thanks

like image 918
Demian Avatar asked Jun 11 '15 06:06

Demian


People also ask

Is not defined in Angular?

While programming in JavaScript, jQuery or Angular JS, coders often encounter an error called Uncaught ReferenceError: $ is not defined. This usually happens when the $, that may be a variable or a method is not properly defined but is being used.

Can I use jQuery in Angular?

jQuery is a small yet feature-rich powerful javascript library that helps to manipulate the HTML DOM with less javascript code. We can use jQuery with Angular. There are some situations you come across while building Angular apps that it's absolutely necessary to use a library like jQuery to get something done.

How do I fix uncaught ReferenceError is not defined in jQuery?

Answer: Execute Code after jQuery Library has Loaded The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading.

Why jQuery is not used in Angular?

Selectors and events are usually solved by libraries like React and Angular, so you don't need jQuery to help with browser compability and API differences.


1 Answers

Try this:

var fbcanvas = document.getElementById('fbcanvas');

instead of:

var fbcanvas = $('#fbcanvas');

Check if data is undefined too.

like image 151
Martin Zarate Rafael Avatar answered Oct 05 '22 10:10

Martin Zarate Rafael