Input type="file" invalid js click event in ajax success callback function

Question

If you do not know if you have encountered this problem, I have been plaguing this issue. Please everyone, why is that.

$('.bottom').click(function(){
    $('input').click();  // Put on the outside of the ajax can be performed
    $.ajax({
        type: 'post',
        url: url,
        data: data,
        dataType: 'json',
        contentType: 'application/json',
        success: function(data){
            $('input').click(); // This is invalid
        },
        error: function(data){

        }
    });

})

and what is your question? – Francesco Jun 06 '18 at 07:36 — Francesco, Jun 06 '18 at 07:36
@H77 Thanks so much, that solved my problem – Rachel.C Jun 06 '18 at 07:56 — Rachel.C, Jun 06 '18 at 07:56

Priyal Pithadiya · Accepted Answer · 2018-06-06T08:03:27.147

0

@Rachel.C try with below solution

  $(document).ready(function(){
$('.bottom').click(function(){
   
    $.ajax({
        type: 'post',
        url: "https://reqres.in/api/users?page=2",
        dataType: 'json',
        contentType: 'application/json',
        crossdomain:true,
        async:false,
        success: function(data){
            alert("2");
            $('#iptFile').trigger('click'); // This is invalid
        },
        error: function(data){

        }
    });

})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button class="bottom">Click me</button>

<input type="file" Id="iptFile"/>

edited Jun 06 '18 at 08:03

answered Jun 06 '18 at 07:42

Priyal Pithadiya

889
1
5
12

@Downvoter, let me know what's wrong ? – Priyal Pithadiya Jun 06 '18 at 07:44
The problem is with input type "file". – H77 Jun 06 '18 at 07:47
@H77 The solution seems to be working though – Seblor Jun 06 '18 at 07:48
Thanks, I tried your method and abc() can be executed, but there is no window for selecting files. – Rachel.C Jun 06 '18 at 07:48
@Seblor it works because the input type isn't file. – H77 Jun 06 '18 at 07:51
@PriyalPithadiya you should change the `input` type from "button" to "file" to match OP's need – Seblor Jun 06 '18 at 07:51
@H77 I just tried with changing the `input` type and it works nicely. – Seblor Jun 06 '18 at 07:52
@Seblor I don't think it will. Do you get the file explorer dialog? Maybe you're referring to the click trigger outside the ajax call (the code above has both) – H77 Jun 06 '18 at 07:55
@H77 yes it opens. I edited the answer, you can try the snippet – Seblor Jun 06 '18 at 07:56
@Seblor the file dialog opens because of the click trigger outside the ajax call. Not the one on the success event. – H77 Jun 06 '18 at 07:57
Thank you all, this problem has been solved, there are two ways, first, this code fragment can also be executed, and one is to add async: false. – Rachel.C Jun 06 '18 at 08:00
@H77, now check its modified, Let me know now its working or not? – Priyal Pithadiya Jun 06 '18 at 08:03
@PriyalPithadiya now that you used OP's solution, of course it works. But your original answer would not. – H77 Jun 06 '18 at 08:07
i havent check input="file" so the glitch occur. btw thanks for your comment. I will keep in mind to read the question carefully for next time :) – Priyal Pithadiya Jun 06 '18 at 08:08
@PriyalPithadiya, you also added `async: false` (suggested by OP) which is the only reason your solution works now. – H77 Jun 06 '18 at 08:09

Input type="file" invalid js click event in ajax success callback function

1 Answers1