qq.FileUploader doesn't work when loaded in AJAX popup

Question

So I got a dialog box that is loaded dynamically using AJAX, in that box, I have a file input that is replaced with Valums qq.FileUploader. I do call the init on the FileUploader after loading the content, my input box gets replaced properly by the FileUploader.

As you can see in the picture below, the input gets replaced by everything, and the new "hidden" input, is there. Problem is that I can't click on it. However, I can drag-and-drop files correctly. So, the upload still works, but only drag-and-drop. This has been tested with Chrome and Firefox, both on Windows.

See Valums qq.FileUploader doesn't work when it's initialized after loading button by ajax

EDIT : The dialog code is not jQuery UI, it's custom code, basically, I trigger an event when I open a dialog, and I'm binded on this event to execute the FileUploader code.

EDIT 2 : So I tried using a timeout of 1s after the popup to execute the FileUploader code, but still no go. Also tried to play with z-indexes, and no go.

EDIT 3 : After several weeks it's still not working. I just can't seem to be able to find the cause of this problem. Here are two images that illustrate where the "hidden" file upload is (in red). And that it works outside, but not inside a dialog.

This is outside a dialog, and it works just fine:

This is the SAME exact form, but inside a dialog, but this doesn't work:

EDIT 4 : Just set up a JSFiddle with my code: http://jsfiddle.net/G5qP6/6/

However, as you can see, it works just fine in the JSFiddle, which get's me wondering, why does it doesn't work in my application.

Answer 1

From what I understand - you can't click the upload button but you can drag'n'drop.

If that's the case this seems to be a CSS problem. Probably an element is overlapping your upload button and therefore you're actually clicking on another element. Try to debug by setting borders and background color. If the upload button is being overlapped you'll see which element is overlapping it.

The other thing that comes to my mind is changing where you call Upload.initializeUploads(); .
I would put it in Dialog.init() right after you've done $('body').append(this.element); .

Your example from fiddle works fine on my Firefox 10, Chrome 16, IE 8 and Opera 10(something). My suggestion also works with the same browsers.

Your original code: http://tmp.itnews-bg.com/jValdron/
What I've changed: http://tmp.itnews-bg.com/jValdron/index-2.html