4

I have a jquery-ui-dialog that contains a <form> which contains a <input type=file>

For some of my users when they click on the button to open the file dialog: it doesn't appear.

The issue is not browser based since computer that have this issue are able to reproduce it with all their installed browsers:

  • chrome
  • firefox
  • internet explorer

The issue is not OS based since I have seen occurrence of the issue with :

  • windows XP
  • windows 7
  • Kubuntu 11.04

I have installed VMs with those OSes and the file dialog is working perfectly.

So my question is : Anybody has any idea what is going on?

Here's the "code" : 

<meta charset="utf-8">

    <link rel="stylesheet" href="http://matchfwd-statics.s3-website-us-east-1.amazonaws.com/asset_cache/css/e1b34bd841d9.css" type="text/css" media="all"> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'>


    <script>

      $(function() {
         $( "#dialog-form" ).dialog({
           autoOpen: false,
           height: 500,
           width: 550,
           modal: true,
           buttons: {
             "Send": function() {
              $( this ).dialog( "close" );
           },
           Cancel: function() {
             $( this ).dialog( "close" );
           }
           },
           close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
           } });

       $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); });
       });
 </script>
 <div class="demo">

  <div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
    <form class="main-form" method="post" action="" enctype="multipart/form-data">
        <h3>Fill in some details</h3>
        <span class="title">Your profile will be submitted with your application:</span><br/>
        <div class="holder" style="position:relative;top:12px"><a style="color:#24c2c9;" href="></a></div>
        <br>
        <span class="title">Why would you be the right candidate?</span><br/>
        <div class="holder"><textarea class="" name="description" cols="58" rows="10"> </textarea></div>
        <span class="note"></span>
        <span class="title">Attachments&nbsp;<a href="#" id="add_attachment" class="plus">&nbsp;</a></span>
        <div id="attachments" class="holder"></div>
    </form>
</div>


<button id="create-user">Create new user</button>

<script type="text/javascript">
(function() {
   var counter=1;
   $("#add_attachment").click(function(e){
   e.preventDefault();
   var attachmentString = 'attachment-'+counter
   var inputString = '<input type="file" name="'+attachmentString+'" id="id_'+attachmentString+'" />'
   $(inputString).appendTo("#attachments")
   counter = counter+1
   })})();
 </script>
Julien Grenier
  • 3,364
  • 2
  • 30
  • 43
  • If you can kindly show the code with the affected areas as well as the script, maybe we can have an idea with what's going on. – ace Aug 09 '11 at 13:12
  • thanks for the link, tried to break some of the js with heavy user interaction but it doesn't seem to happen. if this happening on one single computer with all 3 browsers, we may need to check what happens to the ajax request to open the dialog. also, does that only happen with `apply` button, or also happens with `share` button as well. – ace Aug 09 '11 at 15:48
  • No it happens on multiple computers. One old P4 with XP, A new laptop with windows 7 and a netbook with Kubuntu. But the ubuntu case is weird because the guy reboot (for some undisclose reason) and then it is working.... The only problem is when clicking on the attachment in the Apply popup, you get a file dialog. On some computer the file dialog doesn't appear. – Julien Grenier Aug 09 '11 at 15:54
  • Ah, this is just a simple `` right? It happened on my Google Chrome (14.0.835.29 dev), it doesn't open the file dialog. But firefox works fine. – ace Aug 09 '11 at 16:06
  • Any solution? I doubt that my users will appreciate if I tell them to switch browsers :) It is working fine on my machine (mac os x) with any broswer I can think of. – Julien Grenier Aug 09 '11 at 16:19
  • I'm actually looking for posts/news with the same issues but haven't found any. Hopefully someone comes along who's experienced this. – ace Aug 09 '11 at 16:22
  • I cannot reproduce this...tested with firefox 5.0 and chrome (9.0.597.98 and 13.0.782.112 m) on Win7. – William Niu Aug 10 '11 at 07:15
  • Thank William for testing it. This is one of the weirdest bug I've come accross because it is not browser based or OS based. It seems to affects randomly some computerers. On those computer the bug is accross all browsers. – Julien Grenier Aug 10 '11 at 13:10

2 Answers2

3

I just experienced this (OSX, Chrome) and found your question. Because you didn't find an answer, I decided to do something crazy.

$("input.file").live('click', function(element) { element.click() });

... That actually fixes the problem. Note that if you put a ; after the click(), it will give an error saying that the element has no click method.

I do not know why this works. It is the second worst hack I have ever implemented and I'm ashamed of it. Someone, please figure this out so I don't have to leave this ugly, ugly hack in my code.

Also note that my input had the class 'file', so you may need to change the selector to match your needs.

William
  • 290
  • 1
  • 3
  • 9
1

This makes no focking sense, thank you William for your solution. I can't comment on your answer for some reason.

But i still get the no click method even without the ";".

Later EDIT Never mind, it was a event bubble that was screwing everything up for me.

Highstrike
  • 462
  • 3
  • 14