CODEWITHSUNDEEP
javascriptjquery
Trevor Daniel
Trevor Daniel

Reputation: 3954

Javascript not waiting for "then" form submission

I am attempting to intercept the submission of a form long enough for me to use a 3rd part library to generate an image of a div. But it doesn't ever wait for the canvas to build.

jQuery(window).on('dpo_before_form_submit', function (e, form) {

e.preventDefault();

jQuery('#dpo_base_image').remove();
jQuery('body').append('<div id="dpo_base_image" style="width:2000px;height:2479px;overflow:hidden;"></div>');
window.updateBaseImage();

alert($("#dpo_base_image img").length);

if ($('#dpo_base_image').length) {

    alert("starting image capture");

    html2canvas(document.querySelector('#dpo_base_image'),
        {
            useCORS: true,
            allowTaint: true,
            width: 2000,
            height: 2479
        }
    ).then(canvas => {
        alert("canvas built!");
        $('<input>').attr('type', 'hidden').attr('name', 'properties[_DataUrl]').attr('value', canvas.toDataURL()).appendTo('form');
        e.currentTarget.submit();
    });

}
else {
    alert("Image div missing!");
}

alert("finished!");

});

It alerts me that there are 7 images in the div

It alerts me that "starting image capture"

and just jumps down to "finished!"

it never alerts "canvas built!" or adds the property to the form.

Am I misunderstanding how to wait for a promise?

Any help would be greatly appreciated.

Upvotes: 0

Views: 68

Answers (1)

Jonathon Hibbard
Jonathon Hibbard

Reputation: 1546

What you're attempting to do looks fine to me. I would do the following:

Just before your call to html2canvas, try logging what your selector is finding.

const dpoBaseImageEl = querySelector('#dpo_base_image');
console.log(dpoBaseImageEl);

html2canvas(dpoBaseImageEl, ....

put a breakpoint at the console.log and verify you are getting back the selector you expect.

then, take out all the extra props you are passing in (just for testing purposes) and see if that helps at all.

i'd also try just making it extremely simple and just doing something like this:

document.body.innerHTML += '<div id="dpo_base_image">THIS IS A TEST HERE</div>';

html2canvas(document.querySelector('#dpo_base_image')).then(canvas => {
    alert("canvas built!");
});

NOTE That we took out ALL of the other if conditions, submissions and console logs. The goal is to keep it simple...

as has already been mentioned, promises are asynchronous - so you should def expect your "canvas built" alert to be behind.

My guess though is either

  1. Your selector doesn't work
  2. The props you are trying to pass in are either wrong, out of bounds or are getting in the way
  3. The image you're hoping to capture is not allowed
  4. It captured a blank page and so there is nothing for it to complete with. (thus adding content to the div you are trying to capture)

If the above works, try gradually adding some of your configuration props back in until it breaks. I'd say then you'll know right away what is causing your issues.

Upvotes: 1

Related Questions