Import external JS library not working?

AndreaA
AndreaA Community Member Qubie ✭
edited May 3 in Custom Code

Hi all,

in one of my surveys, I am using an external JavaScript library (to check whether the user input is an IBAN code).

The way I do this is to put in the survey header the following:

<script src="<URL>"></script>

where "<URL>" is the link to a file that I have saved in my Qualtrics library containing the script.

Within the question I then add the following script:

Qualtrics.SurveyEngine.addOnload(function()
{

window.timerID = setInterval('var check = IBAN.isValid(document.getElementById("QR~QID38~7").value);console.log(check)',200);

/* Change input method to Enter, with input validation */
document.on("keydown", function(e) {
	if (e.keyCode === 13 && check == true) $('NextButton').click();
})

document.on("keydown", function(e) {
	if (e.keyCode === 13 && check == false)
	{
		alert("Bitte geben Sie eine gültige IBAN ein.") ;
	}
})

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	jQuery('#NextButton').hide();						  
	
});

The aim of the code block is to call the function every 0.2 seconds to check in real-time whether the input is a valid IBAN code and to allow the user to submit the page, pressing ENTER, only if the code is valid.

All of this worked until two days ago. Now I can't submit the page with ENTER and in the console I get this: "Uncaught ReferenceError: IBAN is not defined at <anonymous>:1:13".


I would be extremely grateful if anybody helped me to figure this out. Thanks a lot!

Answers

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Yes. Qualtrics will block them. Use jQuery.getScript() to get around this.

    jQuery.getScript("URL", function(){.....code here...});

  • AndreaA
    AndreaA Community Member Qubie ✭

    Hi @ahmedA , thanks for your help!


    I changed the code as follows, and it is not working:

    Qualtrics.SurveyEngine.addOnload(function()
    {
    jQuery.getScript("https://raw.githubusercontent.com/arhs/iban.js/master/iban.js", function(){
    	window.timerID = setInterval('var check = IBAN.isValid(document.getElementById("QR~QID38~7").value);console.log(check)',200);
    });
    
    
    /* Change input method to Enter, with input validation */
    document.on("keydown", function(e) {
    	if (e.keyCode === 13 && check == true) $('NextButton').click();
    })
    
    document.on("keydown", function(e) {
    	if (e.keyCode === 13 && check == false)
    	{
    		alert("Bitte geben Sie eine gültige IBAN ein.") ;
    	}
    })
    
    
    });
    

    What am I doing wrong?


    Also, my previous solution (calling the library from the header and then using the function in the question) was working until a few days ago and it is also reported in Qualtrics Javascript Guidelines (https://www.qualtrics.com/support/survey-platform/survey-module/question-options/add-javascript/): do you have any idea of why this is not working anymore?


    Thanks again!

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Since its hosted on Github, its not a problem with Qualtrics but instead with Github not allows CORS. Use githack and use that URL.

    However, I would recommend you revise your code, since its using too many resources needlessly.

  • AndreaA
    AndreaA Community Member Qubie ✭

    Hi @ahmedA , thanks for your suggestion and sorry for the late reply!

    The issue is not Github per se, as originally I used Qualtrics itself as a host. Potentially also Qualtrics does not allow CORS. If that's the case, there's a need for a general fix IMHO, as this method is currently the only way to use external libraries.

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    CORS stands for cross origin. If you have it in your library, then there should be no problem with CORS, because the origin and the destination will correspond to the same domain.