Develop Reference

Using element.click() to simulate a Button Click in Javascript

I'm trying to write an extension for Opera that automatically sends specific chat messages. (Commands, to be exact.) For that, I want to enter the message into the textarea, simulate a button click to send the message and read the reply I get.
I've been trying to use the Element.click() function of JavaScript to simulate the click, but it doesn't work.
My code goes something like this:
document.getElementsByClassName("text-area")[0].value = "test";
document.getElementsByClassName("send-chat-button")[0].click();
The textarea gets filled in with the value I want, but it doesn't click the button.
I am also not getting any output on the console. I'd be glad about any help I can get.
Regards, Kileraptor1
UPDATE: You were right, the button does not have an OnClick event like I thought it had. I'm honestly not sure how it submits a message. Since I am writing a plugin for a website I do not own, I can not edit the source or anything.

The easiest way would be with the trigger() function in jQuery:
$(".send-chat-button:first").click(function()
{
// Whatever actions you want to perform on click
});
$(".send-chat-button:first").trigger("click"); // Executes the click event handler
trigger(event) will execute whatever specified events that are attached to an element at any point in the code.
If you want to use pure JavaScript, there's already a good answer here. As I said though, jQuery makes this extremely simple.

FineUploader complete callback event fires multiple times

I'm using Fine Uploader as a jQuery plugin in UI mode and I have a drop down list of file types such as image, video, pdf, etc. I'm dynamically changing the allowedExtensions and acceptFiles when the drop down list changes by removing the Fine Uploader generated div and then recreating it like this:
$('.qq-uploader').remove();
$('#jquery-wrapped-fine-uploader').fineUploader({/* options go here... */});
The dynamic validation works great this way, but I am doing some custom things in the complete callback event such as displaying thumbnails. When the file is uploaded, it fires the complete event for every time the dropdown list had changed prior to the first upload.
My workaround for now is storing the uploaded file name in an array and skipping over the custom complete logic if it already exists in the array.
I don't understand why the complete callback event is firing multiple times since I'm only uploading one file. Is there an explanation for this and/or a way to prevent duplicate callbacks from firing?

There are a couple ways to achieve your goal here:
Remove the Fine Uploader container element from the DOM before re-initializing Fine Uploader. In your fiddle, you were removing an internal element used by Fine Uploader. This will never work. You need to destroy the instance, and the only way to do this when using the jQuery plug-in is to destroy the DOM element that houses the plug-in instance. After you remove the container element, you can then re-add it and re-init Fine Uploader.
Make use of the multiple upload buttons feature. Essentially, you would create an alternate upload button for each file type with appropriate validation settings and change the one that is displayed when the user changes the value of the <select>.

I'm adding one more line to Ray Nicholus's answer.
$('#jquery-wrapped-fine-uploader').off()
You also have an option to remove event handlers that were attached to $('#jquery-wrapped-fine-uploader')

File change event not being fired

I have a multiple file input and I'm using some javascript to handle its change event. The problem is, if I select one file and then select another file with the same name then the change even isn't fired.
Is there some other event I can use. My only other idea (seeing as you can't clear the file input value with JavaScript) is to remove the element from them DOM and create a new one once the form is submitted.

If you use JQuery to bind it with
$('#yourIdOfInputFile').bind('change',function() {
//here goes your code
});
then its triggered - always!

This is happening in IE & Crome, not Firefox. When file is the same, the change event is not firing.
I suggest you creating a new input everytime file changes. Since this workaround simply replace the input with newly empty input, so the second time file is selected, no matter what the file is, change event will be fired.
http://browser.colla.me/show/file_input_triggers_no_change_event_if_file_names_are_the_same

Valum's Ajax file uploader - bind to all elements of a given class

I'm trying to use Valum's file upload script ( http://valums.com/ajax-upload/ ) to allow the creation of links that allow file uploads.
I'm using the jQuery library.
It's simple to get one link on a page to work using the standard documentation, but now I want to be able to catch all links of a given class rather than statically assigning to a given element.
Futhermore my site uses Ajax pageloads so I need to be able to somehow assign the uploader to new Ajax loaded content.
The envisaged use is to allow creating a link like this in an Ajax loaded page and have it trigger the uploader:
Upload a file
My first thought is to use the jQuery live() method to try bind the class, but I can't find a suitable event to trigger on.
Has anybody had experience with this sort of issue?

No, it's not so easy with <input type="file">, unfortunately. Because of some security issues, IE (even IE9!) just doesn't let you sumbit the form with this element "fiddled" - when 'click', 'change' or any other event is raised on it artificially.
So this plugin works different. Instead of creating an event handler that 'reroutes' user clicks to some fileinput element created on the fly, the wrapper structure is created around the link given as its target - and fileinput is inserted right there, being hidden enough for a user to not see it - but enough for a browser to register clicks on it (check this method in the source code and this article for details).
The bottom line is, you can't use event handling delegation here: the only sensible way is wrapping the newly-created elements with that plugin as well.

How can I call a jQuery function when an image changes?

I have a page with images and text.
A user can upload an image through a modal window. I use .js.erb to replace the image on the page with the one the user uploaded.
$('#mailing_body').contents().find("[data-edit-img='<%=escape_javascript(#user_image.location)%>']").attr('src', '<%=escape_javascript(#user_image.image.url(:medium))%>');
Now I want to a jquery function to fire when the image on the page changes.
I tried the following in my js file:
$("#mailing_body").contents().find("[data-edit-img='header']").live('change',function(){
alert('change');
});
But it does not work. What am I doing wrong?
I am using Ruby 1.9, Rails 3.2.2 jquery1.7.2

jQueries Change only works on INPUT elements, unfortunately.
What you will have to to is create an event handler and fire a trigger.
When ever the upload is finished or whenever you expect the image to change you can use jQueries event and trigger system
$('#foo').bind('customEvent', function() {
alert($(this).text());
});
$('#foo').trigger('customEvent');

Change is a an event that get trigger on input element only when their value as change. It doesn't get triggered if an attribute get changed. What you want is something that watch for attribute changes. Here is a link that explains how to achieve such things, basically it's just using a timeout to check periodically that the attribute has changed.
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
In IE you can use propertychange which will get triggered on those changes but that's IE only.