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.
Related
i'm having trouble in chrome opening the popup for the file upload of a file input type.
As you can see here: http://jsfiddle.net/cavax/K99gg/3/, clicking on an elements can trigger a click on the file input, but for example hovering a element wont trigger a click on the input.
$('#test').on('click', function(){
$('#upload').trigger('click');
});
$('#test').on('mouseenter', function(){
$('#upload').trigger('click');
});
In the real life i'm having this trouble because in a web app i'm loading throw ajax a content witch has inside an input file.
At the end of the load the popup file must open, but there is no way to get this works on Chrome (workign on FF).
The problem i guess is that the action is not generated by a mouse click (hover, timeout etc) so chrome wont trigger the fileupload.
I've also tryed this: http://jsfiddle.net/cavax/K99gg/7/, so click on the element, wait then trigger the click but nothing, because there is the "settimeout" in the middle of the click and the trigger :(
$('#test').on('click', function(){
setTimeout(function(){
$('#upload').trigger('click');
}, 3000);
});
if you remove the delay: http://jsfiddle.net/cavax/K99gg/8/ it works
Any idea to get this work?
If I remember correctly, mouseenter and mouseleave are specific to IE, not standard events. Maybe they were extended, but don't think they became a standard. So the event itself may generate you some problems.
To resolve this you can use a lib (like jQuery for example), that treats the browser differences (or you can check the code there and take what you need).
Second way... try mouseover... it worked better (again... didn't work with them for a while so things may have happened, but this is how I remember them to be).
There is no way to trigger click event of input file type, because of a security reason.
You may try a hack of this by setting your button/div position to absolute and top to -100px
It means positioning it outside the viewport by setting above style make it works.
But for mouseenter and mouseover i don't think it's going to work!
Edit:
Moved input outside the viewport and target click event
Example on click
Side note: Right now click occurs 2 times as you have written
$('#upload').trigger('click').click();
You just need
$('#upload').trigger('click'); // $('#upload').click()
unless you want it to fire more than single time.
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
I'm having trouble getting jQuery's 'click()' to work in Valums Ajax Uploader button.
I need to simulate the button click from code, but seems that this plugin doesn't use click to launch the file explorer. The selector is correct and there's no JavaScript error, but I just can't get the thing to work.
Tried with trigger and live also, with identical result.
This is the call:
$("div[class='qq-upload-button']").click();
Am I calling the wrong event?
Divs don't have click events. Instead of div, you have to call the click event of the button with such a code.
document.getElementById('btnUpload').click();
However, the button generated by Valums Ajax Uploader doesn't have an id or a class. You have to add an id attribute by editing valums script (fileuploader.js). Simply find the line input.setAttribute("type", "file"); in the javascript file and insert input.setAttribute("id", "btnUpload"); under it.
I guess you have to find the function called on click, and call it manually.
I'm handling the "onChange" event of an HTML input file field by using jQuery's "change" function. This works as intended, and does indeed trigger when the element's value changes. However, not in the following scenario:
The user specifies a file to upload. We call this file "file.dat".
jQuery later sets the value of the file field to "", by using the
val-function.
The user specifies the exact same file to upload, "file.dat".
In the above scenario, "onChange" doesn't get called at step 3. However, if the user at step 3 specifies a different file, it does indeed get called.
Is it because I am using jQuery's val-function to change the value? What other alternatives do I have if I want to reset the input file field to its base/default value?
For security reasons, JavaScript is unable to affect the value of a file input. It does appear that the value has been cleared, but it hasn't really.
You can get around this by either resetting the entire form, or creating the element again and inserting it into the DOM, in place of the old one.
Here's a working example. Note the use of the jQuery live function to bind the change event. This is required because we are inserting a new element into the DOM every time the Clear button is clicked.
Have you tried .reset() instead of .val() ?
I extended the default image plugin with a checkbox labelled 'Activate Zoom'. If the user checks the box eventually a parameter is added to the image url. Actually this happens within the onChange event of the checkbox.
I recognized that every time the url (txtUrl) is changed the images gets reloaded. That's not an problem taken by itself, but it becomes a serious issue as I resize the image by its selected size by rendering the contents in the frontend of the web application. What means: the user always has the original image with its full dimensions (by default it is resized to 1024x768 on upload process actually), and that dimensions are taken by the script for the refresh.
The long and the short of it: I need a way to prevent that behaviour for this single case.
First thought: don't use the change event, instead change the url and add the zoom parameter by submitting the form, i.e. by clicking the ok button.
Second thought: overwrite the original change event handler of the url text field, check if the change is raised by adding the zoom parameter and if not raise the original event handler defined within the image plugin.
Has anyone a clue?
Nevermind, I hooked into the original image plugin so I can't decide within the onchange function of the url text field whether to refresh the preview and resize the image or not.