JQuery .click() function not working inside ajax call

Question

I have the following form with a file input which needs to be activated depending on the result of an Ajax Call.

<form id="checkin_form" enctype="multipart/form-data" method="post" style="visibility:hidden;">
    <input type="file" name="file[]" id="checkinfile"><br>
</form>

The javascript function which will trigger the click funtion is:

function clickCheckInFile() 
{
    var file_index = selected_file.id;
    var file_name = $(selected_file).children('td:nth(1)').text();

    $.ajax({
        url: "scripts/check_file.php",
        type: "POST",
        dataType:'json',
        data: {file_index: file_index, file_name: file_name},
        success: function(data){
        if (data['response'] == 200)
        {
            if (data['type'] != "dir")
            {
                if (data['checked_out'] == 1 || data['checked_out'] == "1")
                {
                    if (data['checked_out_by'] == username)
                    {
                        if (data['user_permissions'][1] == 1)
                        {
                            $('#checkinfile').click(); 
                        }
                        else
                        {
                            alert('Access Denied.');
                        }
                    }
                    else
                    {
                        alert('Access Denied');
                    }
                }
                else
                {
                    alert('File is not checked out.');
                }
            }
            else
            {
                alert('Cannot check out a folder');
            }
        }
        else if (data['response'] == 300)
        {
            alert(data['message']);
        }
        else
        {
            handleAjaxResponse(data['response']);
        }
    }});
}

The line not working is the $('#checkinfile').click(); portion. I can put an alert message that triggers in that spot so the code is calling that line. When I move the click to prior to the ajax call it works fine.

It is executing, but there's nothing to handle `$('#checkinfile').click()`. — Shahar, Jan 14 '15 at 19:30
I'm not entirely sure what you are trying to accomplish, but [this](http://stackoverflow.com/q/210643/1133144) may be relevant — ioums, Jan 14 '15 at 19:36

score 2 · Answer 1 · edited May 23 '17 at 12:20

2

It seems you're trying to force a click event. the .click() says what to do when it's clicked - it doesn't trigger a click.

Use .trigger() for that:

$('#checkinfile').trigger('click');

Then you need to separately add what to do when it's clicked like this:

 $('#checkinfile').click(function(){
//do things here
});

As for the issue with the file browser. Try this solution from this article:

Position the input as position:absolute and top:*number that will remove it from viewport* and it'll work

Here's the docs for .trigger()

edited May 23 '17 at 12:20

Community

1
1

answered Jan 14 '15 at 19:32

itamar

3,837
5
35
60

what will `click` execute when triggered ? No function specified. – Istiaque Ahmed Jan 14 '15 at 19:35
@IstiaqueAhmed Funny you should ask - I just updated my answer to include that. – itamar Jan 14 '15 at 19:36
The worked, how would I trigger the file input to open the file browser then? – Sean Jan 14 '15 at 19:41
Change the name to `file` and it should work. BTW - can you mark the answer as I did answer the question :-) – itamar Jan 14 '15 at 19:45
The action of clicking works and I am able to alert a message but it did not solve my problem. I need the file input to open the file browser upon click. – Sean Jan 14 '15 at 19:48
Just updated my response to include a solution to that, too. You just need to set it outside the viewport with an `position:absolute` and `top` – itamar Jan 14 '15 at 19:50

score 2 · Answer 2 · answered Jan 14 '15 at 19:56

2

Though it's generally preferred to use .trigger() instead when triggering an event (if for no other reason than clarity), this line of code seems to work fine:

$('#checkinfile').click();

(assuming that the selector finds the element(s) you expect, of course)

However, the real question is... What do you expect this element to do when the click event is triggered? According to the code posted, there is no event handler for that.

It's a file input, so maybe you expect it to open the file dialog for the user? While it's possible that some browsers may do that, I suspect it's not standard or expected behavior. The file input is notorious for things like this (events, styling, etc.) and can be a bit of a pain at times.

What I suspect is happening is that the browser, potentially for security reasons, is requiring actual user interaction before invoking the file dialog. Again, this behavior may be browser specific, but take a look at a couple of examples here:

The pattern seems to be that manual interaction is required to open the file dialog, even if it's opened from code.

answered Jan 14 '15 at 19:56

David

208,112
36
198
279

Yes I'm trying to trigger the file input to open its file dialog. When I overwrote the default click event, I was able to alert a message. Anytime I used #(checkinfile).click() it would not work even when I added a button to be clicked programmatically first. – Sean Jan 14 '15 at 20:11
@user2448760: That's exactly my point. The browser seems to prevent that from happening without a manual user interaction event. The code is "working" just fine, it's simply trying to do something the browser doesn't allow. – David Jan 14 '15 at 20:12
But outside of the Ajax call the #(checkinfile).click() works perfectly fine. Why would executing after an Ajax success be different? – Sean Jan 14 '15 at 20:14
@user2448760: Does it work perfectly fine? In my browser (Firefox) it doesn't (see my first jsFiddle example). – David Jan 14 '15 at 20:15
In both Firefox and Chrome if I move the #(checkinfile).click() outside the ajax portion of code but still within the function it works perfectly fine. – Sean Jan 14 '15 at 20:23
@user2448760: And what invokes that function? Would it happen to be an event from manual user interaction? In that case take a look at my second jsFiddle example. When invoked from manual user interaction it works fine. An AJAX callback, however, isn't user interaction. – David Jan 14 '15 at 20:24

score 0 · Answer 3 · answered Jan 14 '15 at 19:44

Check this out:

$('#clickme').click(function() {
  $('#checkinfile').click();
});

$(document).on('change', '#checkinfile', function() {
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="checkin_form" style="visibility:hidden;">
  <input type="file" name="file" id="checkinfile">
</form>
<button id="clickme">click</button>

score -1 · Answer 4 · answered Jan 14 '15 at 19:35

-1

Its easy

$( "example" ).on( "click", function() {
    alert( "click" );
});

You can see documentation here: http://api.jquery.com/on/

Hope it helps you

answered Jan 14 '15 at 19:35

bcesars

1,016
1
17
36

1

The OP is trying to *trigger* a click event. How will binding an event handler accomplish that? – David Jan 14 '15 at 19:36

JQuery .click() function not working inside ajax call

4 Answers4