Solved
Suggestion Array javascript no longer working.
A few years ago, we had Qualtrics help us with developing some custom code to use suggested string search through the use of a suggestion array. For example, respondents will type three or more characters for, say, intended major in college and then a dropdown will show all mentions from a list that contain that string. Respondents would select from the dropdown and the remaining script would add corresponding data fields to placeholder embedded data variables. The script has worked great except in a new project that I'm working with. It has the same exact javascript code from a project that is working correctly, yet now it fails to display a dropdown in the new project. I have the appropriate embedded data fields in my new project (MajCat, MajCode, MajLabel, MajTerm) and I have confirmed that validation rules are properly referenced (entered response must be equal to ${e://Field/MajLabel}). I've copied the script below excluding most of the "data table" information.
I have tried importing the question from a working project, creating the block/question from scratch, and starting from a new project. None seems to work.
Is there anything clear from the script that may make it no longer work with Qualtrics? Am I possibly missing a setting that prevents the dropdown box from showing?
Best answer by TomG
@TerryH,
That pretty much confirms what I was telling you. Go to Look&Feel in the survey where it is working. Then look at the the Header (or maybe the Footer) in html mode (`<>`), there will be a couple of lines where the jQuery UI stylesheet and script are loaded.
View originalQualtrics.SurveyEngine.addOnload(function()
{
var QID = this.questionId;
majorset = [
["B","60","Accounting & Bookkeeping","0"],
["NS","546","Acoustics","0"],
["O","1000","Can't find my major/Other","0"]
];
var suggestionArray = [];
$('QR~'+QID).setAttribute('onblur','setEmbData("'+QID+'");');
for(var i=0; i<majorset.length; i++)
{
suggestionArray.push(majorset[i][2]);
}
$j(function() {
$j( '#QR\\\\~'+QID ).autocomplete({
source: suggestionArray,
minLength: 3
});
});
});
function setEmbData(QID)
{
var value = $('QR~'+QID).value;
$j('#QR\\\\~'+QID).trigger("change");
if(value != "")
{
for(var i=0; i<majorset.length; i++)
{
if(value == majorset[i][2])
{
Qualtrics.SurveyEngine.setEmbeddedData("MajCat", majorset[i][0]);
Qualtrics.SurveyEngine.setEmbeddedData("MajCode", majorset[i][1]);
Qualtrics.SurveyEngine.setEmbeddedData("MajLabel", majorset[i][2]);
Qualtrics.SurveyEngine.setEmbeddedData("MajTerm", majorset[i][3]);
}
}
}
}
+27For starters, it doesn't look like $j is defined. I assume that is supposed to be jQuery, so you could try replacing $j with jQuery. Although, I suspect there may be other issues.
My recommendation would be to use select2.
Hello Tom,
Thanks for the suggestion! I tried changing the $j to jQuery but the dropdown still fails to display. Of note, I programmed one survey two or three days ago that also uses the undefined $j yet it still works as expected. If the $j is the culprit, it must be something for all new projects made in the last few days.
I am looking into the select2 but feel a bit overwhelmed in attempting to compile the pieces I would need.
Best,
Terry
+27Maybe $j is a global jQuery shortcut variable defined by Qualtrics. That would explain why it worked.
Your script is using jQuery UI autocomplete. Have you loaded the jQuery UI stylesheet and script in you header?
I'm unfortunately not enough of JS or jQuery pro to know if I have or not, but if it's not in the script I provided, probably not.
Even though it doesn't resolve why the script works in one recent project but not another, I might have found a workaround. In my new project, the script will not work if I copy the question or block from the project that works, or start a new question from scratch and copy in JS script.
However, when I make a copy of the entire project where the questions are working and strip out all of the unrelated questions, the suggested search questions still work as they should. I'm now going to copy in the other question blocks from by broken survey and hopefully all will continue to work.
I greatly appreciate your assistance, Tom. I'm open to any other suggestions for a JS layman like me.
+27@TerryH,
That pretty much confirms what I was telling you. Go to Look&Feel in the survey where it is working. Then look at the the Header (or maybe the Footer) in html mode (`<>`), there will be a couple of lines where the jQuery UI stylesheet and script are loaded.
Wow! Clap...clap...clap!
Look&Feel was the one place I didn't check for consistencies.
In the project that works, the header most definitely has a line of text to load the stylesheet and script. When I place that in the broken project, all the script works exactly as it should.
Not sure how I've worked with this the last couple years without knowing about that piece of script in the header.
Funny thing is that some of my javascript (divider lines, response reordering) worked in the broken project without the load script. I'm guessing, then, that is not jquery based.
Many, many thanks Tom! Your responses in other posts have really helped me do some cool things in Qualtrics.
+27> @TerryH said:
> Funny thing is that some of my javascript (divider lines, response reordering) worked in the broken project without the load script. I'm guessing, then, that is not jquery based.
Regular jQuery will work without loading anything else, but jQueryUI will not. So that other JS may or may not use jQuery, but it definitely doesn't use jQueryUI.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.