Recover the page after it reloads when validation fails | XM Community
Skip to main content

Dear All, @TomG,
I am trying to validate a SBS question by using custom validation. However, the page reloads whenever the validation fails. This causes the JS codes to reload as well, and mess up the revealing sequence of the statements and columns. Below is the code with some descriptions of what it is meant to do. Could anyone advise how I could recover the page whenever the validation fails and the page reloads? Thank you.
Qualtrics.SurveyEngine.addOnload(function()
{
this.hidePreviousButton();

var elements = parseInt("${e://Field/sceneA}");
elements = elements + 1;
Qualtrics.SurveyEngine.setEmbeddedData('sceneA', elements);
});


Qualtrics.SurveyEngine.addOnReady(function () {

    let quest = this;
    var qid = this.questionId;
let onechecked = 1;

    // Hide the elements first
jQuery("uid=choice2"+qid+"]").css("color", "#FFFFFF");
jQuery("uid=question2"+qid+"]").css("color", "#FFFFFF");
jQuery("uid=question2"+qid+"-answer1"+qid+"]").css("color", "#FFFFFF");
$('QR~'+qid+'#2~1~1').up('td').childElements().invoke('hide'); 
$('QR~'+qid+'#2~2~1').up('td').childElements().invoke('hide'); 
$('QR~'+qid+'#1~2~1').up('td').childElements().invoke('hide'); 
$('QR~'+qid+'#1~2~2').up('td').childElements().invoke('hide'); 

//listen to event1 and show the second row while hiding the first row
jQuery(">id='QR~"+qid+"#1~1~1']").click(function() {
jQuery(" id=choice2"+qid+"]").css("color", "#525252");
$('QR~'+qid+'#1~2~1').up('td').childElements().invoke('show'); 
$('QR~'+qid+'#1~2~2').up('td').childElements().invoke('show');
if (onechecked <= 1) {
jQuery(" id=choice1"+qid+"]").css("color", "#FFFFFF");
$('QR~'+qid+'#1~1~1').up('td').childElements().invoke('hide'); 
$('QR~'+qid+'#1~1~2').up('td').childElements().invoke('hide'); 
}
onechecked++;
});

jQuery(" jQuery("rid=choice2"+qid+"]").css("color", "#525252");
$('QR~'+qid+'#1~2~1').up('td').childElements().invoke('show'); 
$('QR~'+qid+'#1~2~2').up('td').childElements().invoke('show');
if (onechecked <= 1) {
jQuery("rid=choice1"+qid+"]").css("color", "#FFFFFF");
$('QR~'+qid+'#1~1~1').up('td').childElements().invoke('hide'); 
$('QR~'+qid+'#1~1~2').up('td').childElements().invoke('hide'); 
}
onechecked++;
});

//listen to event2 (second row) and show the first row
jQuery("rid='QR~"+qid+"#1~2~1']").click(function() {
jQuery("{id=choice1"+qid+"]").css("color", "#525252");
$('QR~'+qid+'#1~1~1').up('td').childElements().invoke('show'); 
$('QR~'+qid+'#1~1~2').up('td').childElements().invoke('show'); 
});
jQuery(">id='QR~"+qid+"#1~2~2']").click(function() {
jQuery(")id=choice1"+qid+"]").css("color", "#525252");
$('QR~'+qid+'#1~1~1').up('td').childElements().invoke('show'); 
$('QR~'+qid+'#1~1~2').up('td').childElements().invoke('show')
});

    //listen to event1 (first row) and event2 (second row) and show the second column if condition is met
quest.questionContainer.onclick = function () {
        setTimeout(() => {
            let all_checked = quest.questionContainer.querySelectorAll(".q-radio.q-checked");
            // Show SBS2 if both are the same
            if (
all_checked.length >= 2 &&
                all_checkedn0].parentElement.className == all_checkedl1].parentElement.className
            ) {
                jQuery("Nid=question2"+qid+"]").css("color", "#525252");
jQuery(""id=question2"+qid+"-answer1"+qid+"]").css("color", "#525252");    
$('QR~'+qid+'#2~1~1').up('td').childElements().invoke('show'); 
    $('QR~'+qid+'#2~2~1').up('td').childElements().invoke('show');

            } else { // Hide SBS2 otherwise
                jQuery("id=question2"+qid+"]").css("color", "#FFFFFF");
jQuery(" id=question2"+qid+"-answer1"+qid+"]").css("color", "#FFFFFF");
$('QR~'+qid+'#2~1~1').up('td').childElements().invoke('hide'); 
$('QR~'+qid+'#2~2~1').up('td').childElements().invoke('hide'); 
            }
}, 100);
    };

//listen to event3 to uncheck the other checkbox
jQuery("rid='QR~"+qid+"#2~2~1']").click(function() {
jQuery("eid='QR~"+qid+"#2~1~1']").prop("checked",false); 
});

jQuery("(id='QR~"+qid+"#2~1~1']").click(function() {
jQuery(""id='QR~"+qid+"#2~2~1']").prop("checked",false);  
});
});



Be the first to reply!

Leave a Reply