File change event not being fired - javascript

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

Related

Issue with summernote saving the textarea value when dynamically injected

So i am having trouble sending the value of the textareas that are dynamically generated and have summernote applied to them.
Here is a link that will reproduce the problem:
http://jsfiddle.net/jk6pjnt7/1/
so basically, i am trying to add a new textarea dynamically when i click the "add Step-textarea" because i don't know how many "step" the user will need. the problem is that when i submit the form, i won't get the value of the new textarea. they will have a blank value.
If i do the same and i remove summernote plugin form the process everything works fine.
I have this small pice of coed that prevents the form from submitting and will display what would be submitted in the console, so you might need to open your devtools to see the debugging info.
$('form').submit(function () {
//console.log($(this));
console.info($('form').serializeArray())
return false;
});
Since the DOM is being dynamically changed, we cannot 'watch' these new elements in the typical way. In jquery what we use is called delegation and in particular jQuery.fn.on. We bubble up from the dynamically altered container (in this case, being <form>) to an element that will exist and guaranteed not to change. In this specific case in particular, your line $(next_input).val(''); I changed to $(next_input).html(''); as we're dealing with delegated textarea's which work a bit differently from input boxes in the way they take data.
Here is the fixed code: http://jsfiddle.net/jk6pjnt7/3/

Setting the textbox to read only on submit

Can anyone suggest me a javascript function to set the text box to readonly on pressing the submit button. So that the contents cannot be modified.
To disable an input you'll want to set its disabled attribute. If you can use jQuery then something like this would be what you're looking for:
$('#idOfYourInput').attr('disabled', true);
If jQuery isn't an option, then you'll want to use the setAttribute function. Take a look at the MDN documentation for it. Something like this:
var d = document.getElementById('idOfYourInput');
d.setAttribute('disabled', 'true');
(Both of these code samples assume that you're identifying your input by its id attribute. If that's not the case, these would need to change. The jQuery one would be trivial to change, you'd just need to update your selector to identify the target attribute. The latter code sample would need to use some other DOM navigation/selection functions to find your input element.)
You'd want to include this within the handler for your submit button. Understand, however, that this will only matter on the current context of the page. So I'm assuming your submit button is being used to perform a submit via AJAX and not actually POST the whole page, correct? Because if you're POSTing the whole page then, when the page refreshes, you'll be on an entirely new page context. (Which means any code associated with a button click event will not yet have run.)

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.

ASP.NET : onchange Event not triggered

I have an asp.net program in which I place a marker on a google map when the address in a textbox is changed. This Javascript is triggered by the onchange event. However I have noticed that if the user does not 'tab' out of the box before clicking submit, the event does not fire. Is there a way I can fix this?
I think what you are trying to achieve is impossible. the onchange event, happens only when you lose focus on the element. You could use onkeypress, onkeydown or onkeyup to get that change quicker. The problem here is that the value of the textbox is going to be changed by the click of an external element and therefore, you cannot bind it directly to the textbox.
If you know exactly what the clickable elements would be, you could add a click event to each one of them, pointing to a function that would test the textbox current value against the latest known value and if they were different, do whatever you want to do. But i don't think that's the case...
following your comment, you should add a submit event to the form, that would compare the current state of the textbox before submitting the form...

jQuery - input field change event not working ... as expected

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() ?

Categories

Resources