Jquery Trigger function not working with document ready

Question

I am working with Php and jquery, I have two buttons for "preview" and "download" content/image But i want whenever i load page(open webpage) then Content/Image should download(trigger should work) Here is my code for "Preview" and "Download"

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 5000px;
        Lorem Ipsum dummy text...
    </div>
    
      <input id="btn-Preview-Image" type="button" value="Preview"/>
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div id="previewImage">
    </div>

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

    $("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
    });
</script>

And here i tried so far,Where i am wrong ?

<script>
$("document").ready(function(){
$("#btn-Preview-Image").trigger("click");
setTimeout(function() {
     $("#btn-Convert-Html2Image").trigger("click");
}, 5000);
});

Works just fine when I run your code. Note that the div in your example is not closed correctly. It's missing `">` — Carsten Løvbo Andersen, Jan 04 '22 at 06:13
@CarstenLøvboAndersen: its not downloading for me, where i am wrong ? — Natasha, Jan 04 '22 at 06:14
you don't need to do it by jquery, you can achieve this by setting PHP header, see the answer: https://stackoverflow.com/questions/40943/how-to-automatically-start-a-download-in-php — behzad m salehi, Jan 04 '22 at 06:14
@behzadmsalehi: is this possible with jquery ? if yes then what is wrong with my code ? — Natasha, Jan 04 '22 at 06:20
absolutely is possible, there are some HTML scripts related bugs just like - you don't have — behzad m salehi, Jan 04 '22 at 06:38
@behzadmsalehi: can you please write/edit my code so i can check and implement in my side — Natasha, Jan 04 '22 at 06:42
open your console and paste this piece of your script : `setTimeout(function() { $("#btn-Convert-Html2Image").trigger("click"); }, 5000); ` see if your image starts download or not . — behzad m salehi, Jan 04 '22 at 06:48
Try to use `$(document).ready(function(){` not `$("document").ready(function(){`. — Robert, Jan 04 '22 at 07:45

score 0 · Answer 1 · answered Jan 04 '22 at 13:02

    <script>
/* document ready to load all thing once document ready */
$(document).ready(function(){
    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable
    $("#btn-Preview-Image").on('click', function () {
        alert("I m preview");return false;
         /* Your code what you need to do */
    });
    $("#btn-Convert-Html2Image").on('click', function () {
        alert("I m download");return false;
        /* your code to download image */
    });
    /* Trigger event  */  
    $(document).find("#btn-Preview-Image").trigger("click");
    setTimeout(function() {
        $(document).find("#btn-Convert-Html2Image").trigger("click");
    }, 2000);
});
</script>

You have not used find, as if we have to trigger an event in any of the buttons in the whole document we might first need to find that SELECTOR, and then we might perform an action on it. The other thing you have not done is you have not kept the events in the ready function.

Jquery Trigger function not working with document ready

1 Answers1