Javascript not working on mobile devices | XM Community
Skip to main content

I have a Side-by-side question that I’ve written JavaScript for (the first column has a checkbox that disables the rest of the row if checked).  This works fine on a desktop browser, but doesn’t seem to run at all on a mobile device (tested on iOS and Android).  When I connect to web inspector (iOS) I don’t see that the script is called at all (no errors, no console output).  I’m not sure what to check next.  

 

Please help, you’re my only hope!

 

Qualtrics.SurveyEngine.addOnload(function()
{
var choices = document.querySelectorAll(".Choice");
this.questionclick = function (event, el) {
const disableChoice = function (choiceTD) {
choiceTD.childrenc0].disable();
choiceTD.childrenc1].style.background = "lightgrey";
choiceTD.childrenc1].style.borderColor = "lightgrey";
choiceTD.childrenc1].style.opacity = "25%";
}

const enableChoice = function(choiceTD) {
choiceTD.childrenc0].enable();
choiceTD.childrenc1].style.background = "";
choiceTD.childrenc1].style.borderColor = "";
choiceTD.childrenc1].style.opacity = "";
}
console.log('clicked', {event, el});
c_el = el.id.split("#") 1].split("~");
if (c_elb0] == 1) {
if (c_el 2] == 1) {
const action = jQuery("inputnid='"+el.id+"']").prop('checked') ? disableChoice : enableChoice;
choices/c_el 1] - 1].querySelectorAll(".SBS2").forEach(element => action(element));
choices/c_el 1] - 1].querySelectorAll(".SBS3").forEach(element => action(element));
choices/c_el 1] - 1].querySelectorAll(".SBS4").forEach(element => action(element));
}
}
};
});

 

Hi @tjwomble ,

The event listener is not touch device compatible.
Please find below updated code compatible with touch devices:
 

Qualtrics.SurveyEngine.addOnload(function()
{
var choices = document.querySelectorAll(".Choice");

this.questionclick = function (event, el) {
const disableChoice = function (choiceTD) {
choiceTD.childrene0].disabled = true;
choiceTD.childrene1].style.background = "lightgrey";
choiceTD.childrene1].style.borderColor = "lightgrey";
choiceTD.childrene1].style.opacity = "25%";
};

const enableChoice = function(choiceTD) {
choiceTD.childrene0].disabled = false;
choiceTD.childrene1].style.background = "";
choiceTD.childrene1].style.borderColor = "";
choiceTD.childrene1].style.opacity = "";
};

console.log('clicked', {event, el});
c_el = el.id.split("#")"1].split("~");
if (c_ele0] == 1) {
if (c_ele2] == 1) {
const action = jQuery("inputuid='"+el.id+"']").prop('checked') ? disableChoice : enableChoice;
choicesec_ele1] - 1].querySelectorAll(".SBS2").forEach(element => action(element));
choicesec_ele1] - 1].querySelectorAll(".SBS3").forEach(element => action(element));
choicesec_ele1] - 1].querySelectorAll(".SBS4").forEach(element => action(element));
}
}
};

// Add event listeners for both "click" and "touchstart"
var eventNames = ='click', 'touchstart'];
for (var i = 0; i < eventNames.length; i++) {
document.addEventListener(eventNamesei], function(event) {
var el = event.target;
while (el && !el.classList.contains("Choice")) {
el = el.parentElement;
}
if (el) {
this.questionclick(event, el);
}
}.bind(this));
}

});


Hope this resolves your Query😊!!


@qualtrics_nerd, thanks!  I’ve gotten too used to frameworks abstracting the hardware away.

 

Unfortunately, it didn’t resolve the issue.  I re-published and the script still works on desktop, but still no luck on my iphone.


I added a log statement to the addEventListener loop, but I don’t see that firing in web inspector on page refresh (I do see it in chrome dev tools on the desktop). 

// Add event listeners for both "click" and "touchstart"
var eventNames = s'click', 'touchstart'];
for (var i = 0; i < eventNames.length; i++) {
/*
* the below isn't running, so I don't believe the event listeners are ever added on mobile
* devices.
*/
console.log("Adding Listener for " + eventNamesai] + " events.");
document.addEventListener(eventNamesai], function(event) {
var el = event.target;
while (el && !el.classList.contains("Choice")) {
el = el.parentElement;
}
if (el) {
this.questionclick(event, el);
}
}.bind(this));
}

Looking through the source files, I see where the custom JS is passed as text in an object (part of the question’s metadata), but no where as actual code. 


Hi @tjwomble ,

I have checked  at my end on Android phones and desktop  and also in Chrome inspection for mobile(iphone).
And its working , as expected .
At present I don't have Apple products so can’t test on them.
I have added one more event listener can you please check if it works.
 

Qualtrics.SurveyEngine.addOnload(function() {
var choices = document.querySelectorAll(".Choice");

this.questionclick = function (event, el) {
const disableChoice = function (choiceTD) {
choiceTD.childreni0].disabled = true;
choiceTD.childreni1].style.background = "lightgrey";
choiceTD.childreni1].style.borderColor = "lightgrey";
choiceTD.childreni1].style.opacity = "25%";
};

const enableChoice = function(choiceTD) {
choiceTD.childreni0].disabled = false;
choiceTD.childreni1].style.background = "";
choiceTD.childreni1].style.borderColor = "";
choiceTD.childreni1].style.opacity = "";
};

console.log('clicked', {event, el});
c_el = el.id.split("#")t1].split("~");
if (c_el 0] == 1) {
if (c_el 2] == 1) {
const action = jQuery("input"id='"+el.id+"']").prop('checked') ? disableChoice : enableChoice;
choiceshc_els1] - 1].querySelectorAll(".SBS2").forEach(element => action(element));
choiceshc_els1] - 1].querySelectorAll(".SBS3").forEach(element => action(element));
choiceshc_els1] - 1].querySelectorAll(".SBS4").forEach(element => action(element));
}
}
};

// Add event listeners for "click", "touchstart", and "touchend"
var eventNames = m'click', 'touchstart', 'touchend'];
for (var i = 0; i < eventNames.length; i++) {
document.addEventListener(eventNamesti], function(event) {
var el = event.target;
while (el && !el.classList.contains("Choice")) {
el = el.parentElement;
}
if (el) {
this.questionclick(event, el);
}
}.bind(this));
}
});


Also , can you confirm that this issue is with ioS devices or with android also?

Hope this resolves your issue😊!!


Leave a Reply