I've got a page that does some fun stuff with data collection and outputs to a pdf. The data is stored in our database and is retrieved as json. This works as expected for 99% of the forms we've created but one user has a problem where the page just reloads continuously. If I step through the code I can see everything working just fine even for my two problem forms. I have a ton of console.log() turned on and all output as expected. Except that the page reloads. I've got a pause on event listener for "DOMWindow.beforeunload" set and it stops there, sometimes, but the callstack just shows a jquery handler that also kicks in. Because it doesn't happen for every dataset I load I'd expect the problem to be in the data but then I'd also expect the unload to be triggered by something it doesn't like in the code and for that to show in the callstack. Any hints on how to debug this?
Since you said this: What is the normal expected action for forms that works properly? Also, can you give more details about this page?
It's got jquery, bootstrap3, google analytics. Normal action is that the form is populated with the saved json so that the user can update the form, save changes, or request the pdf. By instantly reloading the page is unusable.
I did a little search, can this be of any help? https://stackoverflow.com/questions/55032023/fetch-request-makes-unwanted-page-reload/55032247 It's possibly triggering the submit button.
Thanks @qwikad.com, that would have been nice! When I have "Pause on caught exceptions" ticked I can see a stack of internal jQuery errors related to querySelectorAll and way, way up the callstack are .parseHTML or ux masks, calendars etc but I also get errors from google analytics! By the time the exceptions are happening all trigger() events have been called at least once which makes me think it's not a submit happening, if I'm stepping through then all have time to complete. In most cases they're not buttons anyway... I've commented out the masks and can see that not all ajax requests have completed before the unload - including one of the 2 google analytics calls. I've changed $.parseHTML to use this with no improvement: var parseHTML = function(str) { var tmp = document.implementation.createHTMLDocument(); tmp.body.innerHTML = str; return tmp.body.children; }; Code (JavaScript): It's 2am, time for bed.
Unfortunately, I can't suggest anything better without personally debugging the code. But have you tried preventing a page refresh by simply adding a return statement to your window.onbeforeunload function
I can't let you guys near the code, the data is live and confidential and if I gave you access to the form you'd probably be like the 99% who have no problems.
If the problem occurs only for certain users and not for certain datasets like u said earlier, then maybe the problem might be related to those user's profile. I've had a lot of issues where a bug only happens for a particular user. And all other users works fine. Logging in as that user will eventually reveal the bug. I remember the very first project with this issue. The user had an invalid character in their User Name. Making the App behave abnormally only when they're are logged in.
OMG I just found it, what a debugging nightmare. @qwikad.com was spot on but I was too deep in the code to see it. A form can have a button to add additional records and it's a button but not a submit button and there's a listener catching clicks that does everything right. BUT When that form gets added by javascript the handler wasn't binding so the button, which isn't a submit button, was deciding to be a submit button. Add the listener and hey presto, it works!