CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Sean
Sean

Reputation: 1

JQuery .click() function not working inside ajax call

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.

Upvotes: 0

Views: 2667

Answers (4)

David
David

Reputation: 218828

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.

Upvotes: 2

itamar
itamar

Reputation: 3967

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()

Upvotes: 2

Shahar
Shahar

Reputation: 1677

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>

Upvotes: 0

bcesars
bcesars

Reputation: 1012

Its easy

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

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

Hope it helps you

Upvotes: -1

Related Questions