We Keep Coding

I am looking for event in fabricjs for selection clear

In my code i have used fabricjs event on selection created now i am looking for selection clear event is it available in canvas
canvas.on('selection:created', function(e) {
activeGroup = canvas.getActiveGroup();
// my code
});
Now I am looking for
canvas.on('selection:clear', function(e)
or similar like that

You can use the 'selection:cleared' event and 'before:selection:cleared' (an event that triggers just before the 'selection:cleared') event, like this:
In your js file add this snippet and you are OK:
function observe(eventName) {
logObservingEvent(eventName);
canvas.on(eventName, function(e){
console.log(eventName)
});
}
observe('before:selection:cleared');
observe('selection:cleared');
I think that you don't need a jsfiddle example, because it is very simple.
Good luck.

canvas.on('selection:cleared',function(e){/**Put ur code here...*/});

canvas.on(selection:cleared`, function(e) {/*** your code **/}

jQuery executing both branches of an if-else statement in Rails

I have the following jQuery on a Rails page:
$(document).on('click','.reportsArrow', function() {
if ( $(this).parent().hasClass('reportCollapsed') ) {
console.log("A");
$(this).parent().removeClass('reportCollapsed');
}else{
$(this).parent().addClass('reportCollapsed');
console.log("B");
}
});
When I click on an element with reportsArrow and without reportCollapsed, the log shows
B
A
Meaning it is executing the else part and then executing the if part. I want the function to only be executed once per click, and to only follow one code path. Why is it being executed twice and how do I stop this? I should point out that this toggles correctly in the mockups created by the web designer (on HTML/CSS/JS only). It looks like the problem is Rails related.
EDIT:
We have found a working solution:
$('.reportsArrow').click(function() {
$(this).parent().toggleClass('reportCollapsed');
});

The event would be getting fired more then once and propagated up-ward in the DOM tree. Use event.stopPropagation(). You can also use the toggleClass instead of branching.
$(document).on('click','.commonClass', function(event) {
event.stopPropagation();
$(this).parent().toggleClass('newClass');
});

Not sure why, but my days in unobtrusive javascript have taught me to be as specific and as least fuzzy as I can.
Never worried why, as long as it worked. Having been asked why (just here), my answer is "I will have to look it up". Sorry.
Thus, I would avoid setting a catch method on THE document and then filter actions: I would directly point the event catches on the element (or set of elements) I want to watch.
So, instead of using:
$(document).on('click','.reportsArrow', function() {
//...
});
I would go the direct way:
$('.reportsArrow').click(function () {
//..
});
Having read the API documentation for jQuery .on(), it appears to me that it would be probably more suitable to use .one() instead, so there is no continuation after hit "#1". But I have not tested it, so I can't say for sure.

You need to stop event propogation to child elements.also you can use toggleClass instead:
$(document).on('click','.commonClass', function(e) {
e.stopPropagation();
$(this).parent().toggleClass('newClass')
});

Try this,
You need to avoid event bubbling up the DOM tree. There must be a parent causing the event to fire twice or more time.
To avoid this use event.stopPropagation()
$(document).on('click','.commonClass', function(event) {
event.stopPropagation();
$(this).parent().toggleClass('newClass');
});

I could not reproduce your problem. Your code is working fine in my Firefox on a simple HTML page.
Please try this piece of code and come back with the console output:
function onClick(ev) {
console.log(ev.currentTarget, '\n', ev.target, '\n', ev);
if(ev.target === ev.currentTarget)
console.log($(this).parent().toggleClass('newClass').hasClass('newClass') ? 'B' : 'A');
};
EDIT:
and of course:
$(document).on('click', '.commonClass', onClick);

For readability put the logic into the jQuery selector using the :not like this
$(document).on('click','.reportCollapsed > .reportsArrow', function() {
$(this).parent().removeClass('reportCollapsed')
console.log("A");
})
$(document).on('click','not:(.reportCollapsed) > .reportsArrow', function() {
$(this).parent().addClass('reportCollapsed')
console.log("B");
})

Given that this works one time (click > else > B) could it be that something listens for DOMSubtreeModified or other DOMChange Events which again trigger a click on the document ?
Have you tried debugging/following the calls after the inital click? Afaik chrome has a nice gui to do this.

jQuery function bind on 'input propertychange' not firing as expected

I have jQuery code that calls a function as such:
$('#text_area').bind('input propertychange', function() {...
The element being bound to the function is a text area. When I type and delete text the function gets called just fine, however when I select all of the text, either through a hot-key or dragging the mouse, and then hit backspace the function is not called. This is the only instance where I can not get the function to call. Is this expected with the 'input propertychange' event? If so how can I change this to work as expected? Note that this holds true for Chrome, IE, and Firefox.

Would this suit your purposes?
$('#text_area').on('keyup', function() {
console.log('called');
});
Fiddle: http://jsfiddle.net/KyleMuir/ruJZD/
Also, as of jQuery 1.7 .on() (http://api.jquery.com/on/) is the preferred way to bind events.
EDIT: since someone was after right click pasted text, here is an update:
$('#text_area').on('keyup paste', function() {
console.log('called');
});
Fiddle: http://jsfiddle.net/KyleMuir/ruJZD/9/

You need to call a function when your text area get cleared. Or you want to call the same function when text is pasted into the text area.
You can use the same code what you are included in your question. I have included a working demo with this answer
<textarea id='textarea1'>data</textarea>
//....................
$("textarea").bind('input propertychange', function(){
alert($(this).val());
});
Note: Use jquery plugin
DEMO
If you want to prevent simultaneous triggers then use the below code
<textarea id="textarea"></textarea>
//.......
var text = "";
$("#textarea").on("change keyup paste", function() {
var Val = $(this).val();
if(Val == text) {
return; //prevent multiple simultaneous triggers
}
text = Val;
alert("changed!");
});
DEMO1
'Note: Checked with chrome and firefox'

.bind method has been deprecated latest 3 j query versions.
instead on we can use .on in to get correct answer.
<textarea id="anytextid"></textarea>
<div id="sethere"></div>
correct text for this change
$('#anytextid').on('input propertychange', function() {
$('#sethere').html($(this).val().length );
});

Why Paste Event in jQuery fires on pre-paste?

I am trying to make textbox similar to the Twitter, for this I have written code for:
Word Count
Used Events Change, Keyup and Paste
Keyup and Change Events are working fine but paste event is little bit strange, when I paste something in textarea the word count doesn't change at that moment, after some debugging I found that paste event fires up before pasting something on textbox. I don't know how they handle this in Twitter.
Here is my code:
events:
'click #textboxId' : 'submitQuestion'
'keyup #textboxId' : 'wordCounter'
'change #textboxId' : 'wordCounter'
'paste #textboxId' : 'wordCounter'
wordCounter: ->
#Code for Word Count#
Due to pre-paste nature of paste event the work count doesn't changes on that instance.
Your suggestion and help will be appreciated.

See this example.
http://jsfiddle.net/urEhK/1
$('textarea').bind('input propertychange', function() {
$('#output').html($(this).val().length + ' characters');
});
That behavior was very weird. You would think that one of those events would catch this properly? I was surprised there weren't more answers to this via Google.

function update()
{
alert($textbox.val().length);
}
var $textbox = $('input');
$textbox.bind('keyup change cut paste', function(){
update(); //code to count or do something else
});
// And this line is to catch the browser paste event
$textbox.bind('input paste',function(e){ setTimeout( update, 250); });

You should now use on() instead of bind() see this post.
It's also unnecessary to create a named function, you can just create a anonymous function.
$('#pasteElement').on('paste', function() {
setTimeout(function(){
alert($('#pasteElement').val());
}, 100);
});

You can do one thing that firstly get original data . then you can get the event paste data and add them.
$("#id").on("paste keypress ",function(event){
// eg. you want to get last lenght
var length=$("#id").val().length;
if(event.type == "paste"){
//then you can get paste event data.=
length+=event.originalEvent.clipboardData.getData('text').length;
}
});`

jQuery - call a function anytime a user changes any form input?

I have a page that has multiple forms. Anytime the user clicks an input or modifies text in an input I would like a function to be called. Any ideas on how to do this efficiently and in a way where it doesn't require the form IDs?

JavaScript events bubble up. So how about:
$('form').change(function() {
// do something
}).click(function() {
// do something
});
In each case you can query for the element that triggered the event and do what you please.

$('form input').each(function() {
var val = this.value;
$(this).click(function() { }
$(this).blur(function() {
}
});
You can also use delegate for better performance. It would help seeing your source and your exact needs.