0

I've got 6 buttons which each have event listeners. For any given button, I have the click event currently firing a tracking event, and then submitting a hidden form. This works most the time, but occasionally the tracking event doesn't fire. The form always submits. My code:

var executeTracking = function(){
    tracking.track();
}
var buttons = document.getElementsByClassName('form-submit-button');
buttons[0].addEventListener('click', function(){
   executeTracking();
   submitForm();
}

On desktop for Chrome this always works correctly. On Firefox it doesn't fire the first function maybe 10% of the time. Same on mobile safari. It seems like sometimes it doesn't work well after going back to the page, once submitting the form.

I've tried always doing a hard reload of the page. I've tried placing the javascript directly in the HTML file. I've tried using setTimeouts. I've also tried doing a callback like this:

var submitForm = function(self) {
    // alert('form')
    self.parentNode.getElementsByTagName('form')[0].submit();
}
var fireTracking = function(cta, self, callback) {
    // alert('mixpanel')
    tracking.track();
    callback(self);
}
var buttons = document.getElementsByClassName('form-submit-button');
buttons[0].addEventListener('click', function(){
    fireTracking(cta, this, submitForm);
}, true);

Still, while the form always submits, the tracking event doesn't always fire on all devices (firefox desktop and safari mobile don't always run the tracking event before submitting).

Finally, when I've run the Alert functions which are currently commented out, everything works fine. It's as if the pause in the code allows the tracking function to execute. I've tried to mimic this by putting a setTimeout function in to pause the form submission. This doesn't seem to work and the form submits as fast as it can anyway.

jj1111
  • 607
  • 2
  • 10
  • 20
  • Is there some asynchronous code in `executeTracking` function? – Teemu Apr 19 '18 at 11:45
  • I should have been clearer, executeTracking just fired tracking.track. tracking.track runs a function from a third party mixpanel library which I pull in through an XHR. The code is minified/uglified, so I can't make too much sense of it. – jj1111 Apr 19 '18 at 11:53
  • Well you are submitting a form, that is going to kill whatever you are probably doing in the other one. – epascarello Apr 19 '18 at 11:55
  • code is updated to make this clearer, thanks @Teemu – jj1111 Apr 19 '18 at 11:55
  • That's it, the function actually is executed, then returned after the XHR begins, then the form is submitted, and you're getting a new page when the XHR is cancelled. – Teemu Apr 19 '18 at 11:55
  • but if the XHR executes on pageload, and I now have the mixpanel function on my page, would this still be a problem? I don't understand why the XHR would cause this. – jj1111 Apr 19 '18 at 11:57
  • You're waiting some results from XHR, but it is asynchronous, i.e. it is executed after `executeTracking` was already executed. – Teemu Apr 19 '18 at 11:58
  • @espascarello, that's exactly what I suspected, how can I protect against this? I've tried doing a setTimeout to pause the form submission, but the form doesn't pause and submits even if I set a timeout of 5 seconds. Maybe if I got this right it would have worked I don't know. – jj1111 Apr 19 '18 at 11:58
  • @Teemu but I don't use the results on my page from executeTracking. This function simply fires and then the third party Mixpanel logs the event in their database. – jj1111 Apr 19 '18 at 11:59
  • Not saying a dup, but at least related: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call Even if you're not expecting the results, you're the one who did the async call, and that call is cancelled when the current page is unloaded. – Teemu Apr 19 '18 at 11:59
  • See what happens when the page is unloading, [the standard](https://html.spec.whatwg.org/multipage/browsing-the-web.html#unloading-document-cleanup-steps) says: "_For each EventSource object eventSource whose relevant global object is equal to window, forcibly close eventSource_". – Teemu Apr 19 '18 at 12:26

0 Answers0