0

I am encountering a strange bug using JQuery Draggable and Sortable plugins.

I have a list of draggable objects that can be added to a sortable container.

The function of the page is to be able to add content (draggables) to a page (sortable) and being able to sort it afterwards. I can add many types of contents such as texts, graphs, tables and files (for example images)...

When he drops the image object into the sortable container, I want the user to select a file from his computer to upload. So I simulate a "click" on an input file at the end of the dropping (as the draggable and sortable are connected, this happens in the "update" event of the sortable). But I don't know why, the click event of the input file does get triggered (I checked with console.log()) but the "select file" window is never opened.

If I type my $('#upl input').click(); in the firebug console, it works... if I fire the click event in a third link, it works. But when the "click" is in the update event of the sortable container, the window just won't show up. I even tried delaying the click with a setTimeOut to wait till the update event is over, but still, the click event gets fired but no window...

Has anybody ever encountered this problem ?

Here is a simplification of my problem on jsfiddle. https://jsfiddle.net/jp51cadt/3/ you can drop the "Image" into the square. It fires the click on the lower input but the upload window doesn't show up.

function updateSortable(event, $ui) {
     $('#upl input').on("click", function() {
         alert("this works");
     });
     $('#upl input').click(); // not this
 }

I add the alert to show that the click is fired...

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
manu
  • 1,059
  • 1
  • 16
  • 33
  • some code snippet(s) would be of useful. "Doesn't work" is very hard to debug without seeing where the code goes wrong. – Mackan Apr 21 '15 at 17:24
  • yeah I know, It's gonna be hard, because the code is really complicated and does a lot of other stuff you don't need to know, but I'm working on a simpler version of the bug that would help me anyways... In the mean time, I posted this... one never knows, maybe someone already encountered this problem. – manu Apr 21 '15 at 17:28
  • A good start would be the code where the "click" happens, and the surrounding "update event". :) – Mackan Apr 21 '15 at 17:35

1 Answers1

1

Basically, this works differently across browsers and versions, because programmatically clicking an input file is considered a security risk.

Some browsers allow it, some put constraints on it, and some just won't allow it. In most cases it seems that if the input file is not hidden, and the event that leads to a click is from a user action context (i.e. user driven) it will be allowed.

In your example, the click is not user driven - hence Chrome won't allow it. But if you change it to a user driven event, like mouseup, it will work.

You'll have to work out what is best to use in your case. I updated your fiddle with a quick example of a working click(), but it can probably be made a bit more explicit.

Mackan
  • 6,200
  • 2
  • 25
  • 45
  • Thank you, I think I can work something out with the mouseup event on my container, hadn't thought of this. Here is a fiddle if anyone needs this done: https://jsfiddle.net/jp51cadt/5/ But I didn't really get your explanation on user driven actions... I don't have any problem simulating a click on an input file, it's just in the context of the update event of jquery-sortable that it doesn't work... – manu Apr 22 '15 at 08:02
  • 1
    What I meant with "user driven" is an event that forces user interaction. I haven't tested this extensively, but I read as much and it corresponded with my tests. In my tests (chrome) the click wouldn't fire unless it was called in user driven event, like _on keypress_, _on click of another button_ etc. Just putting down `$('#id').click()` in window.onload would not make it fire in my case. Glad it helped anyway! – Mackan Apr 22 '15 at 08:14
  • ah ok, so the update event of sortable is not "user driven", makes sense... Well thank you for the explanation then ! – manu Apr 22 '15 at 08:20
  • 1
    For information, the click on input file can be triggered in the "stop" event of sortable, as it is sort of "user driven" unlike "update" ("update" is triggered when the sorting is successfull, "stop" is triggered when you're finished sorting). But you have to check if the sorting was successful inside your function. – manu Apr 22 '15 at 09:00