$("")[0].click(); not working after ajax called

Question

I would simulate click to download a file after called ajax to generate a link.

Jquery :

$(document).ready(function(){
    $(".vignette-dl").click(function() {
        var id = $(this).find("a").attr("value");
        $.ajax({
            type: "POST", 
            url: "testDL.php",
            data: { dossier: $("#selectDossier").val(), id_doc: id },
            success: function(result){
                $("#secretDiv").html(result);
            }
        });

        $(document).ajaxComplete(function(){
            alert("test");
            $("#forcedl")[0].click(function(){
                alert("test42");
            }); 
        });
    });
});

result var add an html link with id="forcedl" in secretDiv and work perfectly.

ajaxComplete function is called because i see my alert test, but the click simulate did not work and i didn't see the alert test42.

And i don't know why..

You're attempting to attach an event handler, not trigger the event — Rory McCrossan, Feb 17 '16 at 16:30
@RoryMcCrossan You should add that as an answer. Also OP, see the docs: https://api.jquery.com/click/ — Nathan K, Feb 17 '16 at 16:33
`$("#forcedl").trigger('click');` OR `$("#forcedl").on('click',function(){ alert("test42"); });` not sure what you are attempting but the last one would add that new event handler on EVERY ajaxComplete so not good. — Mark Schultheiss, Feb 17 '16 at 17:54
what is the result of placing `alert($("#forcedl").length);` right at the top of the ajaxComplete function? and what also in your success function does `alert(JSON.stringify(result));` produce? — Mark Schultheiss, Feb 18 '16 at 15:56
the first alert (in success) return and on the complete return 1. — captain_rillette, Feb 18 '16 at 16:11
@ameenulla0007 It's use to trigger effectively "click" (only JQuery bindings would execute otherwise, not the actual href). He is confusing with handler (here) as Rory said. — Erdal G., Feb 06 '17 at 13:58

PostCrafter · Accepted Answer · 2016-02-19T10:28:48.723

1

jQuery.click(handler) only calls the handler when the element is clicked.

$(document).ready(function(){
    $(".vignette-dl").click(function() {
        var id = $(this).find("a").attr("value");
        $.ajax({
            type: "POST", 
            url: "testDL.php",
            data: { dossier: $("#selectDossier").val(), id_doc: id },
            success: function(result){
                $("#secretDiv").html(result);
                $("#forcedl").click();
            }
        });
    });
    $(document).on('click', '#forcedl', function(e) {
        e.preventDefault();
        window.location.href = $(this).attr('href'); // use href-attribute or just replace with your path/to/file
    })
});

In order to download a PDF you will need to change the Response-Header - this has to be done server side. See a .htaccess example below, it will make all files ending with .pdf in any capitalisation download directly.

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

For a php example check the code sample below.

<?php
header('Content-type: application/pdf');
header('Content-disposition: attachment; filename=myNewFileName.pdf');
readfile("uri/to/my/file.pdf");

edited Feb 19 '16 at 10:28

answered Feb 17 '16 at 16:33

PostCrafter

655
5
15

I guess your problem is a different one: .click() only simulates the JavaScript event, it doesn't actually click the element. Try replacing it with `window.location.href = '/path/to/my/file';` I edited my answer. – PostCrafter Feb 18 '16 at 10:04
Not working again, i tried in chrome and ie11.. html link with id="forcedl" in secretDiv added dinamiccaly and work perfectly but not download – captain_rillette Feb 18 '16 at 15:33
I try to add an alert after e.preventDefault() and it doesn't appear – captain_rillette Feb 18 '16 at 15:41
Ahh, so you're inserting the #forcedl element with your ajax call. Check my updated answer. – PostCrafter Feb 18 '16 at 16:32
ok, so that's better, pdf appear on the web page :) but i need to force download without view it – captain_rillette Feb 18 '16 at 16:44
You will need to modify the response headers for that, see my updated answer with an example of how to do it for apache webserver. – PostCrafter Feb 18 '16 at 17:48
Can I set header in my ajax, because with this button i need force download, and with other one see it on the web browser. And i need to rename pdf before download too because i will get file in a temp url with a temp name get with a web service – captain_rillette Feb 19 '16 at 07:39
While it is possible to force download a url according to [this answer](http://stackoverflow.com/a/29266135/5924893), I suggest to change the Response Header in your servers programming language. I've added an example of how to to it with php. – PostCrafter Feb 19 '16 at 10:29

score 1 · Answer 2 · answered Feb 17 '16 at 18:09

I believe from your description this is the desire but I made some assumptions.

$(document).ready(function() {
  $("#secretDiv").on('click', "#forcedl", function() {
    alert("test42");
  });
  $(".vignette-dl").click(function() {
    var id = $(this).find("a").attr("value");
    $.ajax({
      type: "POST",
      url: "testDL.php",
      data: {
        dossier: $("#selectDossier").val(),
        id_doc: id
      }
    }).done(function(result) {
      $("#secretDiv").html(result);
    }).complete(function() {
      alert("test");
      $("#forcedl").trigger('click');
    });
  });
});

That's the same result than my code, trigger('click') not working :/ — captain_rillette, Feb 18 '16 at 09:20

score 0 · Answer 3 · answered Feb 17 '16 at 16:34

The entire approach is illogical, you cant have the following -

On success -> on click.

Solution, create a variable set to = 0.

on ajax success method make variable = 1.

if === 0 {
 // nothing here
}else{
  // must ===1 something here
}

much faster than the other persons idea

$("")[0].click(); not working after ajax called

3 Answers3