I'm running a survey, and in each question, I have custom JavaScript that I'm using to send AJAX requests to a web server I own. That web server supplies data back to Qualtrics that I use to fill in information for subsequent questions.
How can I prevent Qualtrics from advancing while waiting for data? Setting `jQuery.ajax({async: false})` didn't seem to do it. After adding a delay via `setTimeout`, it now goes to the proper next location after submitting the same question twice. I'm using embedded data to store the information for the next question.
I have one question block with five questions inside of it. Each individual question has its own display logic whose conditional statements use embedded data. That block is in a loop/merge construct.
Page 1 / 1
How is it advancing? Does the respondent click the Next button or does the JS do it? You could disable the Next button, then re-enable it when the data is returned.
In general, `setTimeout` is a messy solution to timing problems because you don't actually know how long the server will take to process something.
Ajax requests are built with a callback that is fired after the data has been returned.
```javascript
$.ajax({
url: "demo_test.txt",
success: function(result){
// this is the callback
}});
```
Anything happening within that `success` function only happens after a successful return, so use that instead of a timeout. With that in mind, I would follow @TomG's guidance and just hide the next button and create a button specific for this data submission. Then, once it returns successfully, show the next button again.
Or, to make the workflow more fluid, create a new Next Button and attach a listener that calls your ajax function. Then, on successful completion, call `jQuery('#NextButton').click();` so that it advances the page. You might also want to add a spinner gif or something so that people know the button was clicked and is doing something.
Ajax requests are built with a callback that is fired after the data has been returned.
```javascript
$.ajax({
url: "demo_test.txt",
success: function(result){
// this is the callback
}});
```
Anything happening within that `success` function only happens after a successful return, so use that instead of a timeout. With that in mind, I would follow @TomG's guidance and just hide the next button and create a button specific for this data submission. Then, once it returns successfully, show the next button again.
Or, to make the workflow more fluid, create a new Next Button and attach a listener that calls your ajax function. Then, on successful completion, call `jQuery('#NextButton').click();` so that it advances the page. You might also want to add a spinner gif or something so that people know the button was clicked and is doing something.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.