Question

For some reason jquery’s .hide() won’t hide a div that contains a file input after a file has been selected. When no file is selected, I can run the js and hide it. See example below:

<script type="text/javascript">
function upload_1(ele){

 ele.form.submit();

 $( "#div_1" ).hide('clip', {}, 'fast');
 $( "#waiting_1" ).show('clip', {}, 'fast');
}
</script>
<div id="div_1" class="ajaxVisible" style="float: left;" >
    <form method="post" action="action.php" enctype="multipart/form-data" id="form_1" target="hiddenIFrame1" >
        <input type="file" name="file" size="1" onchange="upload_1(this);" id="image_1" />
    </form>
    </div>
    <iframe style="width:0px;height:0px;border:0px;" name="hiddenIFrame1"></iframe>
    <div id="waiting_1"  style="display: none; float: left;">
<center><img src="abc.gif" height="15px" /></center>
</div>

Here is the code I use to test when no file is selected:

function ajaxHide() {

   $( "#div_1" ).hide('clip', {}, 'fast');
   $( "#waiting_1" ).show('clip', {}, 'fast');
   }

and I have a button:

<button onclick="ajaxHide();">Hide</button>

Again, I can click the button above to test with no file selected, div hides perfectly. When I run the actual use case and select a file, it doesn’t hide it after one is selected, but the hidden waiting div does show as it should.

Thanks for the help!

Answer 1

I’ve played a little bit with your code and found the following issue:

code in upload_1 maybe works incorrectly (I mean probably here is infinite loop because as soon as code tries to hide div it leads onchange is fired again)

Everything works good as soon as I remove this code from upload handler everything works good:

$("#div_1").hide('clip', {}, 'fast');
$("#waiting_1").show('clip', {}, 'fast');