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
– Shahar, Commented Jan 14, 2015 at 19:30
I'm not entirely sure what you are trying to accomplish, but this may be relevant — ioums
– ioums, Commented Jan 14, 2015 at 19:36

Community · Accepted Answer · 2017-05-23 12:20:25Z

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, 2017 at 12:20

CommunityBot

11 silver badge

answered Jan 14, 2015 at 19:32

itamar

3,9775 gold badges37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Istiaque Ahmed Over a year ago

what will click execute when triggered ? No function specified.

itamar Over a year ago

@IstiaqueAhmed Funny you should ask - I just updated my answer to include that.

Sean Over a year ago

The worked, how would I trigger the file input to open the file browser then?

itamar Over a year ago

Change the name to file and it should work. BTW - can you mark the answer as I did answer the question :-)

Sean Over a year ago

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.

|

David · Accepted Answer · 2015-01-14 19:56:55Z

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, 2015 at 19:56

David

221k42 gold badges247 silver badges338 bronze badges

6 Comments

Sean Over a year ago

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.

David Over a year ago

@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.

Sean Over a year ago

But outside of the Ajax call the #(checkinfile).click() works perfectly fine. Why would executing after an Ajax success be different?

David Over a year ago

@user2448760: Does it work perfectly fine? In my browser (Firefox) it doesn't (see my first jsFiddle example).

Sean Over a year ago

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.

|

Shahar · Accepted Answer · 2015-01-14 19:44:27Z

0

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>

answered Jan 14, 2015 at 19:44

Shahar

1,6772 gold badges12 silver badges18 bronze badges

Comments

bcesars · Accepted Answer · 2015-01-14 19:35:46Z

-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, 2015 at 19:35

bcesars

1,0051 gold badge17 silver badges36 bronze badges

1 Comment

David Over a year ago

The OP is trying to trigger a click event. How will binding an event handler accomplish that?

Collectives™ on Stack Overflow

JQuery .click() function not working inside ajax call

4 Answers 4

6 Comments

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related