What is the difference between jQuery and d3.js?
Category Archives: jQuery
HOW TO DISTINGUISH BETWEEN LEFT AND RIGHT MOUSE CLICK WITH JQUERY?
How to distinguish between left and right mouse click with jQuery?
///HTML
<div id=”right”>Check Which Mouse Click You have Clicked
THIS IS A TEST FOR MOUSE CLICK!</div>
//JavaScript Code
$(“div”).mousedown(function(e) {
if (e.which===1)
{
alert(“left”)
}
else if (e.which ===3) {
alert(‘right mouse button is pressed’);
}
});
There are eight cases for pressed button. Among them bit 001 (1) is for left click event and bits 011(3) is for right click.
IN JQUERY, HOW DO I RETURN THE RESPONSE FROM AN ASYNCHRONOUS CALL?
In JQuery, How do I return the response from an asynchronous call?
You can return the response from an Async call in two ways:
1)using callback
ajax(“/echo/json”).then(function(result) {.. }
2) promise
function foo(callback) {
$.ajax({…success: callback(result)
});
}
function myCallback(result) {
// Code that depends on ‘result’
};
foo(myCallback);
THE OUTPUT OF THE FOLLOWING PROGRAM IS 1 4 3 2. WHY?
The output of the following program is 1 4 3 2. Why?
(function () {
console.log(1);
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);
console.log(4);
})();
Solution:
The browser has an event loop which checks the event queue and processes pending events. For example, if an event happens in the background (e.g., a script onload event) while the browser is busy (e.g., processing an onclick), the event gets appended to the queue. When the onclick handler is complete, the queue is checked and the event is then handled (e.g., the onload script is executed).
Similarly, setTimeout() also puts execution of its referenced function into the event queue if the browser is busy.
1 and 4 are displayed first since they are logged by simple calls to console.log() without any delay. 2 is displayed after 3 because 2 is being logged after a delay of 1000 msecs (i.e., 1 second) whereas 3 is being logged after a delay of 0 msecs.
When a value of zero is passed as the second argument to setTimeout(), it attempts to execute the specified function “as soon as possible”. Specifically, execution of the function is placed on the event queue to occur on the next timer tick. Note, though, that this is not immediate; the function is not executed until the next tick.
That’s why in the above example, the call to console.log(4) occurs before the call to console.log(3) (since the call to console.log(3) is invoked via setTimeout, so it is slightly delayed).
WHEN A SCOPE IS TERMINATED, EXPLAIN HOW MANY “DESTROY” EVENTS ARE FIRED?
When a scope is terminated, explain how many “destroy” events are fired?
2 Destroy events are fired when a scope is terminated.
The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”.
The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.
Consider the two below happening in a directive’s postLink function.
The AngularJS event: scope.$on(‘$destroy’, function () {
// handle the destroy, i.e. clean up.
});
And
element.on(‘$destroy’, function () {
// jQuery plugins already have this handler.
// angular.element(document.body).off(‘someCustomEvent’);
});
The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.
DIFFERENCE BETWEEN EVENT.PREVENTDEFAULT() AND RETURN FALSE IN JQUERY.
Difference between event.preventDefault() and return false in jQuery.
return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.
e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.
Note that this behavior differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.
IN JQUERY, WHAT’S THE DIFFERENCE BETWEEN .PARENT() VS .CLOSEST()?
HOW CAN I UPLOAD FILES ASYNCHRONOUSLY WITH JQUERY?
How can I upload files asynchronously with jQuery?
The “enctype” has to be mentioned in the AJAX call.
For example:
$(document).ready(function ( ) {
$(“#uploadbutton”).click(function ( ) {
var filename = $(“#file”).val(
);
$.ajax({
type: “POST”,
url: “addFile.do”,
enctype: ‘multipart/form-data’,
data: {
file: filename
},
success: function
( ) {
alert(“Data Uploaded: “);
}
});
});
});
jQuery to AngularJS Paradigm Switch
jQuery to AngularJS Paradigm Switch
It’s March 2015 and the AngularJS is hotter than ever. According to our statistics alone 60% of developers are adopting the Google brain child. Hiring rate in AngularJS has gone up to 42% in 2015, compared with 13% in 2012. Now before you start your relationship with this beautiful client-side framework, you want to understand its peculiarities to see if you’d want to spend hours on end playing with it. Let’s say that you’re an active jQuery developer and you’d like to switch to AngularJS – you’re wondering what it’d be like.
Well, the first thing you have to have in mind is that AngularJS and jQuery are pretty much like apples and oranges. They do different things and adopt different ideologies. Technically speaking, jQuery is a library and AngularJS is a framework. In the community, there isn’t even a common word to describe them together- library, platform, framework? There is definitely a common ground here; it’s just not on the surface. Let’s dive deeper into this.
AngularJS provides you with a set of features to produce a web applications, while jQuery mainly gives the ease of DOM manipulation and AJAX. With jQuery you instruct the DOM about what needs to happen step by step. With AngularJS you describe what end result you’d like to see but not how to do it. And here comes first piece of advice : In AngularJS you have to start from the ground up with your architecture in mind. Start with your objective, then move to designing your application flow, followed by data design and then finalize by designing your view for presentation. Your kind of need to plan out the whole project, you can’t just add AngularJS on top. Basically, don’t augment jQuery with AngularJS. If you observe keenly, we planned out to create Data Objects (Models), Behavior and Flow of Application (Controller) and Presentation (View) – making us think in terms of MVC – that’s what AngularJS is mainly about.
(Note: You could rewrite/inject a jQuery plugin in AngularJS but don’t make it your primary solution or you’ll never master AngularJS.)
Ok, so now you know that you need to operate like a server-side developer in addition to thinking like a client-side developer. Now you have to think about how to divide your application into individual, testable components.
Angular allows you to separate/isolate the DOM manipulation in the directives(directives can be considered extensions of HTML – in case HTML doesn’t do something you need.
These directives tell the AngularJS HTML compiler how to behave and what to do (attaching event listeners and interactions). And that is a key differentiator of the framework. If you want, you can create your own custom directives that will contain all your view logic or DOM manipulation. In contrast, jQuery says very little about how you should organize your code. It is you who have to tell the DOM what to do. Let’s break it down:
In jQuery, we programmatically change the view by responding to events and then updating them. AngularJS, on the other hand, will automatically update (synchronize) your view so you don’t have to. The view here is the “official record” of view-based functionality. So outside of a directive (applied in the view) you never need change the DOM.
Let’s repeat again:
Only do DOM manipulation in a directive.
However, in AngularJS there is a separate model layer that is independent from the view that we can manage how we want. Your model represents(or holds) your data and is tied to a view via scopes. Views therefore are a projection of the model. You can create HTML templates for each view, using the directives.
EXAMPLE
Angular.module(“mySampleApp”,[])
.directive(“paymentform”,function(){
return{
restrict: “E”,
templateUrl: “partials/paymentForm.tmpl.html”
}
});
AngularJS also uses directives and controllers (your controller’s function is to initialize $scope) to remove certain behaviors from HTML.
EXAMPLE (CONTROLLERS)
Angular.module(“mySampleApp”,[])
.controller(“paymentCtrl”,function($scope, payFactoryModel){
$scope.title = “Payment Methods”;
payFactoryModel.initiatePayment();
}
When looking for a comprehensive all-in-one solution, many tech enthusiasts realized that AngularJS is the right choice between the two. Its two-way data binding, in-built directives and filters has allowed developers to build applications very rapidly and has made them think about Angular.js as a viable replacement to jQuery.