Replace Label in side by side question via JavaScript | XM Community
Solved

Replace Label in side by side question via JavaScript


Userlevel 5
Badge +11

Hi All,

I need to replace the label 'Pub and Kitchen' with a value from an embedded field. It's in a side by side question. I'm getting really confused when writing the jQuery(....).find(...).replace command and so would be grateful for some points.

Here is what the HTML looks like
image.pngSome questions
In jQuery(#... does the # represent an id and a dot . represents a class element?
so given the above HTML code, should I be able to do something like
jQuery("#choice13QID180.LabelWrapper").replace("Pub and Kitchen",".....");
or is it because it's a LabelWrapper or has span in front of the label I'm wanting to change does it mean I have to use a .find(...) command?

Any guidance or other examples would be much appreciated when dealing with span'd things. All the searches I've found so far haven't really helped as it's more to do with the syntax I feel I'm struggling with here.

Thanks

Rod Pestell

icon

Best answer by TomG 9 May 2022, 20:59

View original

4 replies

Userlevel 7
Badge +27

Yes, # identifies an id and . identifies a class (just like CSS selectors).
find() searches the descendants of a jQuery object.
replace is a JavaScript function, not a jQuery function (i.e., you would use it on a DOM element, not a jQuery object).
Do this:
jQuery("#choice13QID180").find(".LabelWrapper>label>span).html("New label text");

Userlevel 5
Badge +11

Hi TomG
Thanks for the guidance. I really feel as if I'm blundering about in this world of Javascript and I've not yet managed to find the help pages I need to fill in the missing gaps of my knowledge to put it all together!! Anyhow.
I spotted the example needed an extra double quote so I fixed that:
jQuery("#choice13QID180").find(".LabelWrapper>label>span").html("New label text");
but then I was having problems with it reporting back this when I did a console.log(...)
ƒ (t){var e,n,r,i=this[0];{if(arguments.length)return r=yt.isFunction(t),this.each(function(n){var i;1===this.nodeType&&(i=r?t.call(this,n,yt(this).val()):t,null==i?i="":"number"==typeof i?i+="":yt.isA…
I then went down many wild and wacky routes trying to figure out what was wrong. Was it something special about the side by side question or a space missing inbetween the " and .LabelWrapper. I tried splitting the find into separate parts. I changed .html to .text and .val. All were reporting the same thing as above.
I then realised I could run this line from the console window directly which is a new piece of learning I didn't realise you could do (surely there is a document or set of help pages which must mention this for the novice like me?!). So knowing that helped me mess around a little more and so I then type in the code as it is above and it worked!! But it wasn't working in the code within the question... The penny dropped - it was because I was putting it in an onload function.

So I moved it to onReady and hey presto it worked!! :D
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/


jQuery("#choice13QID180").find(".LabelWrapper>label>span").text("test");

});

The page now loads and for a brief moment (on occasions - not always) you see the old text before it's replaced with the new text. Is there a way to improve this? eg. is there something I could do in the addOnLoad section first or could this code be put in a different function (is there maybe an addOnJustBeforeReady perhaps?!)
There are times when writing jQuery that a space is put before the class or ID or something but then there are times that you don't. Do you have any helpful bullet points or websites you could point me to that would explain this with some (perhaps Qualtrics) related examples? Or even how you use the great than or less than arrows would be great to know as googling that doesn't seem to find anything. It's these little bits of syntax info which are stopping me in my tracks as I don't have any software nor know of any software which would help guide me to this degree. Visual Studio I'm assuming wouldn't help?
It would be nice to be able to inspect some HTML and I click on the item I'm trying to alter and then the app then asks what I want to do with it and then it writes the basic code for me - now that would be something worth having!

Thanks very much again

Rod Pestell

Userlevel 7
Badge +27

Rod_Pestell ,
jQuery uses CSS selectors (with a few jQuery specific psuedo classes added).
Tom

Userlevel 5
Badge +11

Thanks Tom - That page will be a great help.

Leave a Reply