AJAX calls not setting next question data properly | XM Community
Skip to main content
Question

AJAX calls not setting next question data properly

  • February 20, 2019
  • 2 replies
  • 98 views

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.

2 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • February 20, 2019
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.

mattyb513
Level 4 ●●●●
Forum|alt.badge.img+6
  • Level 4 ●●●●
  • 163 replies
  • February 21, 2019
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.

Leave a Reply