How to get the jQuery dialog close button to actually close?

Question

Hello, I have a jQuery dialog box that pops up when the user hits my next button. I renamed "next" to "save & continue" and wanted to give users extra reassurance that their answers are being recorded and also give them an option to leave the survey (it's tldr; as to why so I won't get into that here). ! The issue is that when you hit "save & continue," while the dialog box does show up, the fact that the background is kind of reloading with all the stuff/warnings to remind you there are required questions you haven't answered yet, prevents the close button from working. I don't mean the X on the top right, but an actual close button ("Continue Survey) after your message. ``` jQuery('input[id=NextButton]').click(function(event){ console.log('next btn clicked'); var mytext = jQuery('#myText').val(); jQuery('

'+mytext+'

').appendTo('body'); jQuery("#confirm-dialog").dialog({ width: 600, modal: true, close: function(event, ui) { jQuery("#confirm-dialog").remove(); }, buttons: { "Continue Survey": function(event, ui) { jQuery('.ui-dialog').dialog('close'); }, "Leave Survey for Now": function(event, ui) { window.location.href='url here'; } } }); jQuery('#confirm-dialog').dialog('open'); }); ``` I tried event.preventDefault; and event.stopPropagation, but they didn't work. I tried event.stopImmediatePropagation which worked but then also stopped the user from being able to actually go to the next page. I'd rather have people be able to click on the Continue Survey option rather than the X, since I have the other button. Any ideas? The X button works, as does the "Leave Survey for Now." Thank you!

TomG · Accepted Answer

Right, your replacement button can't have the id NextButton.  When I do this I give it the id checkButton.  The biggest issue is that Qualtrics styles the NextButton using the id, so you'll have to style your checkButton to match the NextButton.The clickNextButton function is attached to question objects (this.clickNextButton() ). So, if your 'this' context changes it won't work.  You can save 'this' to a variable (e.g. qobj) then use qobj.clickNextButton(). Alternatively, you can do it directly with jQuery("#NextButton").click().

TomG · Answer

Click handlers on the next button generally conflict with Qualtrics' own next button handlers and shouldn't be used.  Normally, you would use addOnPageSubmit instead of a next button click handler, but since you are attempting to prevent the submit, that won't work for you either.  So, you can hide the next button and add your own button that does what you want and clicks the next button when appropriate.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded