Jquery: Change Event to Input File on Ie

jQuery: change event on file input element does not fire if the file selection is triggered by an element other than the file input

With MSIE use the onpropertychange-Event, example: http://jsfiddle.net/7wR2L/14/

As jQuery does'nt support this event you have to assign it without jquery(inline or use attachEvent )

In other browsers try using mutation-events, maybe they'll work there. See a related topic on mutation-events from yesterday, to have a little example how they work: How to capture change on page title from a firefox extension

Call change event in IE8 on input file programmaticaly

This is due to a security restriction in IE.

When there's <input type="file"/> which has either of

• display:none
• visbilty:hidden
• opacity: 0

IE blocks the request to upload the file if it's being called manually (javascript click).

In PrimeFaces case the input file has opacity: 0.

Here's how the input file looks like without the CSS extra flavours:

The work around is to move that input file outside p:fileUpload component so it can loose the CSS roles, and append it to a span or div with button styling, that would result an actual click on the file input.

Button

<span class="btn btn-primary btn-file">
   <i class="fa fa-upload"></i> Upload File
</span>

---

javascript

$(document).ready(function() {
   $('.ui-fileupload-buttonbar span input[type=file]').addClass('uploadBtn');
   $('.btn-file').append($('.uploadBtn'));
});

Something link this:

Now to get it to look nice and work in the same time on all browsers including IE, some CSS should be added.
First ignore the first two CSS classes btn btn-primary (colors, padding etc..)

The btn-file is the custom trick:

.btn-file {
   position: relative;
   overflow: hidden;
 }

 .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;        
    cursor: inherit;
    display: block;
 } 

The final result is a button with input file in the background:

The p:fileUpload component should be hidden:

<p:fileUpload style="display: none" />

---

In order to display the error messages you can use onchange event for that input file:

$('.uploadBtn').change(function() {
   var a = $('.ui-fileupload-content').html(); var b = $('#editUserUploadMessages').html(a);
})

Where #editUserUploadMessages is a div containing all the messages.

Finally hide the other uploaded files:

#editUserUploadMessages .ui-fileupload-files {
     display: none;
}

You can find a small example on github and a Demo

jQuery change event on select not firing in IE

The change event does not bubble in IE (See here and here). You cannot use event delegation in tandem with it.

In fact, it is because of this IE bug that jQuery live had to officially exclude change from the list of supported events (FYI the DOM spec states change should bubble).^[1]

With respect to your question, you can bind directly to each select:

$('#container select').change(/*...*/)

If you really want event delegation you might find some success trying what this person did and bind to click in IE only, which does bubble:

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {
    /* test event.type and event.target 
     * to capture only select control changes
     */
})

But this browser detection feels really wrong. I'd really try working with the former example (binding directly to the drop downs). Unless you have hundreds of <select> boxes, event delegation wouldn't buy you much here anyway.

---

_{[1] Note: jQuery >= 1.4 now simulates a bubbling change event in IE via live()/on().}

Triggering change event on file input when invoked from javascript (ie headache)

Got it! (I think).

$(function() {
    var a = $('#LinkUpload');
    var f = $('#file');
    a.click(function() {
        f.click();
        setTimeout(function() {
            f.val(f.val());
        }, 1);
    });
    if ($.browser.msie && $.browser.version < 9) {
        f.bind('propertychange', function() {
            alert('changed');
        });
    } else {
        f.change(function() {
            alert('changed!');
        });
    }
});

Seems to work.

change event not firing in IE for the first time

did you try changing the order?

$(this).find(".custom-file-input").on('change', function (){
....
}
$(this).find('.custom-file-input').trigger('click');

---

Related Topics