$(element).click() not triggering even inside $(function() {})

Question

I have an input element (Dropzone) that's hidden, and is written in the original html's body (was not appended).

<div style="display: none;">
    <form action="/uploadProfile" method="post" class="dropzone" id="uploadProfileDropzone"></form>
</div>

Now inside my .js script, I'm trying:

 $(function() {
      $('#uploadProfileDropzone').click()
 })

And nothing happens. However, if I'm calling $('#uploadProfileDropzone').click() inside Chrome's console, it works.

What could possibly be the problem?

EDIT:

Problem might be that I'm trying to call the function before my Dropzone has initialized. Is there a way to know when this happens?

However, even when trying:

$(function() {
    setTimeout(function() {
         $('#uploadProfileDropzone').click() 
    }, 5000)
})

Which is a lot after the page fully loads, still nothing happens

SOLUTION:

It turns out that some (or even most of the) browsers block such activity. It's pretty obvious why, looking back at it now. My intention was to navigate to a page that once ready, opens a file dialog for a profile upload action. It seems logically correct to block such action from a user experience point of view, as it can lead to spam and undesired activity from websites. I solved it by displaying a simple popup box on load, that forces the user to press a button, that in turn calls $('#uploadProfileDropzone').click() and it worked.

That's a form, not an input. It's unusual to have a click handler for an entire `
`. Are you sure this is the same element you have a click handler for? — Robin Zigmond, Nov 27 '18 at 13:00
it might be a case where you're dropzone has not been initialised yet when you call `$('#uploadProfileDropzone').click()` — fixatd, Nov 27 '18 at 13:01
Wouldnt you need a submit? `$('#uploadProfileDropzone').submit()` — Arcturus, Nov 27 '18 at 13:01
Please try below code: `$('#uploadProfileDropzone').on('click',function(){ write your code });` — Madhuri Patel, Nov 27 '18 at 13:01
Are You sure that dropzone is initialized BEFORE .click() call? — Adam Łożyński, Nov 27 '18 at 13:02
Possible duplicate of [Submit a form using jQuery](https://stackoverflow.com/questions/1200266/submit-a-form-using-jquery) — c-chavez, Nov 27 '18 at 13:03
@UFCInsider, can't remember if dropzone has an event for that, however I would suggest just initialising it programatically instead, it'll give you more control overall. — fixatd, Nov 27 '18 at 13:04
@fixatd can you post an answer as an example? all i need from this dropzone is the ability to manually trigger the file dialog after initializing is done — UFC Insider, Nov 27 '18 at 13:09
Dropzone doesn't appear to have an event for initialised: https://www.dropzonejs.com/#events — freedomn-m, Nov 27 '18 at 13:13
You could try with a simple `setTimeout` - if dropzone inits with doc.ready, then it might just be that it's in the doc.ready queue to run after your doc.ready. `$(function() { setTimeout(function() { $('#uploadProfileDropzone').click(); }, 100); });` — freedomn-m, Nov 27 '18 at 13:16
`click` on form tag? You should add a button to submit the form. — Sumesh TG, Nov 27 '18 at 13:20
@SumeshTG how come it works on Chrome's console? i don't think it's about that — UFC Insider, Nov 27 '18 at 13:21
@UFCInsider posted an answer about what you were asking about — fixatd, Nov 27 '18 at 13:30

score 2 · Answer 1 · answered Nov 27 '18 at 13:20

2

You possibly have two options:

1) Programatically create your dropzone

Dropzone.autoDiscover = false;
let csvDropzone = new Dropzone("#uploadProfileDropzone", {
  paramName: "file",
  init: function() {
      $('#uploadProfileDropzone').click();
  }
});

<div style="display: none;">
    <form action="/uploadProfile" method="post" class="dropzone" id="uploadProfileDropzone">
    </form>
</div>

2) You can try using init configuration method directly without initialising the dropzone in your JS code:

// Taken from the dropzone config page
Dropzone.options.uploadProfileDropzone = {
  init: function() {
      $('#uploadProfileDropzone').click();
  }
};

answered Nov 27 '18 at 13:20

fixatd

1,394
1
11
19

tried both options, didn't work i'm starting to think maybe the browser is blocking such action? navigativing to a url that automatically opens a file dialog – UFC Insider Nov 27 '18 at 17:10
might be the case, have you tried in a different browser? – fixatd Nov 27 '18 at 19:35
1

yep, that was the case. i solved it by letting the user click a button before opening the file dialog – UFC Insider Nov 27 '18 at 21:10

score 0 · Accepted Answer · answered Nov 27 '18 at 21:23

It turns out that some (or even most of the) browsers block such activity. It's pretty obvious why, looking back at it now. My intention was to navigate to a page that once ready, opens a file dialog for a profile upload action. It seems logically correct to block such action from a user experience point of view, as it can lead to spam and undesired activity from websites. I solved it by displaying a simple popup box on load, that forces the user to press a button, that in turn calls $('#uploadProfileDropzone').click() and it worked.

score -3 · Answer 3 · edited Nov 27 '18 at 13:26

-3

you should use document ready event (code works once elements are initialized)

$(document).ready(function(){
     $('#uploadProfileDropzone').click(function(){
        // Do something here
    });
});

OR

$('#uploadProfileDropzone').on('click',function(){ write your code here });

edited Nov 27 '18 at 13:26

Shahnewaz

360
4
12

answered Nov 27 '18 at 13:02

Chandrakant

1,971
1
14
33

1

`$(function() {...})` is a shorthand for `$(document).ready(function() {...})` – Robin Zigmond Nov 27 '18 at 13:03
In addition to above, OP is *firing* the click event handler, not creating a new on, so `.on` is totally inappropriate here. – freedomn-m Nov 27 '18 at 13:11

$(element).click() not triggering even inside $(function() {})

3 Answers3