jQuery append image to end of text causes 'Aw, Snap!' STATUS_BREAKPOINT error if code is wrapped in Chrome | XM Community
Question

jQuery append image to end of text causes 'Aw, Snap!' STATUS_BREAKPOINT error if code is wrapped in Chrome

  • 5 February 2024
  • 2 replies
  • 118 views
R
Rank
Userlevel 5
Badge +11

Hi All,

 

This is a strange one...  I get an ‘Aw Snap’ error in Chrome when I am on a page which has had some JS code running to add in some pictures before and after some specific labels.  This code normally runs fine but on this occasion the error occurs specifically when I go into inspect (ie ctrl+shift+c) / the debug console window.  It doesn’t seem to happen any other time.

 

This is the code that was causing the issue

Qualtrics.SurveyEngine.addOnReady(function()
{
var sad_face_scr = 'https://warnerhotels.eu.qualtrics.com/CP/Graphic.php?IM=IM_8qBpza9jCsgHZ7D';

//The backslash \ identifies that the code continues on a new line but be careful of spaces and apostrophes
//The backslash must not have anything afterwards, not even a space!
//There is a space here: append(' <  so that the image doesn't touch the end of the choice answer

jQuery("#" + this.questionId).find('li.first>span').append(' <img id="sad_face" src=' + sad_face_scr + ' \
style="width: 31px; height: 30px; vertical-align: middle;" />');

});

 If I replaced the image and styling with some simple text that works fine - no crashing when going into inspect.  I then tried (by a stroke of luck) the jQuery all on one line, ie this.

Qualtrics.SurveyEngine.addOnReady(function()
{
var sad_face_scr = 'https://warnerhotels.eu.qualtrics.com/CP/Graphic.php?IM=IM_8qBpza9jCsgHZ7D';

//The backslash \ identifies that the code continues on a new line but be careful of spaces and apostrophes
//The backslash must not have anything afterwards, not even a space!
//There is a space here: append(' <  so that the image doesn't touch the end of the choice answer

jQuery("#" + this.questionId).find('li.first>span').append(' <img id="sad_face" src=' + sad_face_scr + ' style="width: 31px; height: 30px; vertical-align: middle;" />');

});

 

And this now works fine!  

 

In addition to this, I normally would use this code in the addOnLoad() function but because I’m making some changes to the labels of the slider question via the addOnLoad function first (see below code), the above code I’ve discovered needs to be in the addOnReady section.

 

Please can I get some thoughts on this issue.  Is this a bug in that Chrome can’t cope with this ‘\’?  I use this code quite alot as the window I have to work in within Qualtrics is rather small. I have never had this problem before but this is the first time I’ve had to place this code in the addOnReady() function.

 

Is there another way to have this code in the addOnLoad() function?

 

Thanks

 

Rod Pestell

 

For context this is my addOnload() code that repeats the labels and hides the first set of a slider question.  I then want to add smiley faces to the beginning or end of each label (using the above code).

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

jQuery('#' + this.questionId + ' .QuestionText').css({'padding-bottom':'0px'})


//=====code to repeat the label for each slider and remove the first one

	    let labs = document.querySelector(".labels-container"),
        sliders = document.querySelectorAll(".slider-container");

    for (let i = 0; i < sliders.length; i++)
        sliders[i].insertAdjacentHTML("beforeend", labs.outerHTML);

jQuery('#' + this.questionId + ' .numbers').css({'visibility':'hidden'})
jQuery('#' + this.questionId + ' .labels-container:first').css({'visibility':'hidden'})


//======end code

});

 

2 replies

R
Rank
Userlevel 5
Badge +11

Hi All,

 

Quick update.   It seems that I spoke too soon.  The error still occurs even when I have the inspect window open already and it’s when I either move my mouse to other parts of the window or I click ctrl+shift+c to select an element.  This causes both the block preview tab and the survey tab to crash.

 

This is the slider:

 

And as soon as I do ctrl+shoft+c on an item, chrome then crashes:

 

So I am thinking that I do need to try and get my jQuery lines back into the addOnload section.  Below is the full code - please can someone advise?

 

Thanks

 

Rod Pestell

 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

jQuery('#' + this.questionId + ' .QuestionText').css({'padding-bottom':'0px'})

//=====code to repeat the label for each slider and remove the first one

	    let labs = document.querySelector(".labels-container"),
        sliders = document.querySelectorAll(".slider-container");

    for (let i = 0; i < sliders.length; i++)
        sliders[i].insertAdjacentHTML("beforeend", labs.outerHTML);

jQuery('#' + this.questionId + ' .numbers').css({'visibility':'hidden'})
jQuery('#' + this.questionId + ' .labels-container:first').css({'visibility':'hidden'})

//======end code

});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

//====code to add smiley faces to the label headers on scale.  You would normally add this code to the AddOnload section
//but that is being used to generate the HTML elements and so you ave to wait until that's completed.  So this
//is why this code is placed in the addOnReady instance 

//This code will display a happy or sad face for the different end point scale choices of the question
//its assumed that the left most label is first (worst = sad) and right most label is last (best = happy)

var sad_face_scr = 'https://warnerhotels.eu.qualtrics.com/CP/Graphic.php?IM=IM_8qBpza9jCsgHZ7D';
var happy_face_scr = 'https://warnerhotels.eu.qualtrics.com/CP/Graphic.php?IM=IM_aWBqkbrWjugALT7';


//There is a space here: append(' <  so that the image doesn't touch the end of the choice answer

jQuery("#" + this.questionId).find('li.first>span').prepend(' <img id="sad_face" src=' + sad_face_scr + ' style="width: 31px; height: 30px; vertical-align: middle;" /> ');

jQuery("#" + this.questionId).find('li.last>span').append(' <img id="happy_face" src=' + happy_face_scr + ' style="width: 31px; height: 30px; vertical-align: middle;" />');

//===End of code===

});

 

R
Rank
Userlevel 5
Badge +11

 Hi All,

 

Sorry - one more update - it appears that when chrome crashes you can run and inspect elements ok on the first time round.  But when you restart the preview block that’s when it will crash.  I’ve now removed all the code in the addOnReady section.  And so this makes me think the problem is with the addOnload code.  When I prompt this out, it’s fine - no errors.

 

Hoping someone can advise on what might need to change in the addOnload code.

 

Thanks

 

Rod Pestell

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

jQuery('#' + this.questionId + ' .QuestionText').css({'padding-bottom':'0px'})

//=====code to repeat the label for each slider and remove the first one

	    let labs = document.querySelector(".labels-container"),
        sliders = document.querySelectorAll(".slider-container");

    for (let i = 0; i < sliders.length; i++)
        sliders[i].insertAdjacentHTML("beforeend", labs.outerHTML);

jQuery('#' + this.questionId + ' .numbers').css({'visibility':'hidden'})
jQuery('#' + this.questionId + ' .labels-container:first').css({'visibility':'hidden'})

//======end code

});

 

Leave a Reply


Terms & Conditions