jquery fileupload in modal - click handlers on buttons not firing first time in IE10

Question

I'll explain this weird problem with IE10.

I am using the jquery fileupload plugin inside a simplemodal. There are 3 stages: 1. User chooses a file 2. Progress bar displayed 3. User can click 'Try Again', 'Confirm' or 'Cancel'

Problem is, at stage 3, the handlers for the click events on those buttons do not work first time. However if you click one of the buttons, then click another, the handler for the second one DOES fire.

Has anyone else experienced this behaviour? There seems to be a lot of IE10 related bugs with fileupload and I need to know if this is one of them.

The code works fine in every other browser.

in HTML5, we don't need complicated jQuery plugins to handle file uploads. Please see this stackoverflow question — Ohgodwhy
– Ohgodwhy, Commented Jun 21, 2013 at 16:13
What are you expecting from this community with a post without any code and where the only question is to know if somebody already had problems with IE10's fileupload?!? — Cholesterol
– Cholesterol, Commented Jun 21, 2013 at 18:09
Er, because if someone already had the problem maybe they know how to fix or workaround it. There is nothing to the code really, it's just a simplemodal with fileupload called on an elem within the onOpen callback. Wind your neck in. — DavidWainwright
– DavidWainwright, Commented Jun 24, 2013 at 8:44

DavidWainwright · Accepted Answer · 2013-06-26 14:16:03Z

0

I use jquery hide() to change which panel is being displayed to the user, ie I first hide all the panels with hide() then show the current panel with show(). When I removed the hide() call, the issue no longer occurred.

So it seems like a combination of simplemodal, the browse button and using hide() was the problem.

As a workaround I now move non-displayed panels off the browser window, and set the current panel's left property to a suitable value:

var panels = $('#_upload_modal .upload_panel');
panels.css({ position:'absolute', left:'-10000px', display:'block' });
$(panels[index]).css({ position:'absolute', left:'28px' });

Where index is the index of the panel to be displayed to the user.

I hope this helps someone else who experiences this rather obscure issue.

answered Jun 26, 2013 at 14:16

DavidWainwright

2,9451 gold badge29 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery fileupload in modal - click handlers on buttons not firing first time in IE10

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related