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('<div id="confirm-dialog">'+mytext+'</div>').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!
Solved
How to get the jQuery dialog close button to actually close?
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('<div id="confirm-dialog">'+mytext+'</div>').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!
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('<div id="confirm-dialog">'+mytext+'</div>').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!Best answer by TomG
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().
+27Click 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.
Thank you TomG! I am able to hide the next button and I created a modal with my message and links. I'm attempting to put the next button code within the modal but that is not working (probably because it can't have the same ID? ).
I also wasn't able to get the clickNextButton function from the JS API to work either.
Any insight would be greatly appreciated!!
+27Right, 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().
Thanks! Right, I was reading up on that. I was just going to post this link I found which contained your alternative. (https://www.qualtrics.com/community/discussion/2494/enabling-button-not-working-as-intended)
It works! Thanks again for all your help!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.