Hide the title of variable set on form load

abhishekte · ‎03-13-2014

Hi,

I have variable set which is attached to multiple item. I want to hide the Title of variable set on the catalog form for some of the items on form load.

Please guide me on the same, how we can access the title of variable set on form load and hide on that catalog item without affection the other item.

justin_drysdale · ‎03-13-2014

You can accomplish this using DOM methods.

First you need the id of the variable set label. You can inspect the page source for the id, or you can use a browser developer tool. Please see the screenshot to see what I mean. I made a variable set display it's label, I opened up the catalog item and then I right clicked it and selected 'Inspect Element'. I am in Firefox.

Once you have the id, in my case it is: 'label_fd95e715c443d1005579b0616ee82249' you can hide all child nodes under it. This is the easiest way!

var el = document.getElementById('label_fd95e715c443d1005579b0616ee82249');//lookup and use your var set id


while( el.hasChildNodes() ){


       el.removeChild(el.lastChild);


}

So you would add this bit of code (with your var set's id) to an onLoad and it should strip it from the page.

View solution in original post

justin_drysdale · ‎03-14-2014

"

Just one more thing..when i copy the "unique inspector" I am getting only "#label_id"

"

Make sure you are right clicking on the <td> tag that holds the Label text. If you right click the <td> with the id= in it, you won't get any of the child nodes. Please see SCreenshot2 to see what I mean.

"

please let me know what

"td:nth-child(1) > table:nth-child(1) > tbody:nth-" this line is doing and query selector is doing.

"

In DOM (Document Object Model) each element/tag on the page is called a node. Nodes can have child nodes.

All that extra stuff after the id is for drilling down to the HTML tag we are interested in changing/deleting.

Note in the HTML structure we have essentially:

<tr id="label_fd95e715c443d1005579b0616ee82249">


   <td>


       <table>


           <tr>


             <td>


                 LABEL TEXT

So how do we get to the Label text? There is no id on the <td> that contains the LABEL TEXT. So we have to drill down to it!

We have an id on the <tr> a few steps up, so we can use that as the starting point/parent.

is the parent node. To get to the next node/tag down we can use:

>td:nth-child(1)

To get to the next node/tag down we can use:

>table:nth-child(1)

and so on until we get to the <td> holding the LABEL TEXT.

The whole thing looks like this in CSS:

#label_... > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1)

which matches up exactly with how the HTML tags are structured on the page; tr, then td, then table, then tr, then finally the td with the label text.

If you wanted to style it yellow, you could add this to the CSS:

#label_... > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1)


{


   color:yellow;


}

Now the syntax I just posted is CSS syntax. In Javascript, .querySelector() allows us to use CSS syntax!

var path = '#label_fd95e715c443d1005579b0616ee82249 > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1)';//CSS Syntax


var el = document.querySelector(path);//using the CSS syntax to find the <td> with the label text in it.


el.innerHTML = "\xA0\xA0\xA0\xA0Your New Text Label!\xA0\xA0!\xA0\xA0!!\xA0\xA0\xA0";//placing a custom label.


	Links:

CSS Id and Class

https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Introduction

abhishekte · ‎03-15-2014

Thank you.Now i got some idea:)