Element ID as CSS selector for an XPage

HCL Domino Domino Forum
1

I would like to use element ID as CSS selector for an XPage. Apperently defined element ID is prefixed dynamically when the page is being rendered into HTML. E.g. element ‘TitleOriginal’ is changed into ‘view:_id1:TitleOriginal’.I now wonder if can use element ID as CSS seletor at all. Any idea?

2

Subject: Re: Element ID as CSS selector for an XPage

Not sure if this is what you’re looking for, but this post shows how to get the relevant prefix for the custom control:

https://www-10.lotus.com/ldd/nd85forum.nsf/ShowMyTopicsAllFlatweb/71ffb0d0349e7d44852575c8005bdf10?OpenDocument

Alternatively, again I’m not sure if this is of use, but from one custom control I needed to access a data source for use in a repeat control. The datasource though was defined in a separate custom control, so I passed the name as a property into the current custom control. This code worked (I’m not 100% sure, but I think it mimics the fixed value from javascript):

<xp:repeat id=“repeat1” rows=“3” var=“newsEnt” indexVar=“newsIndex”>

<xp:this.value><![CDATA[${javascript:return "#{" + compositeData.datasourceName + "}"}]]></xp:this.value>

Hopefully it might be of some use.

Regards

Paul

3

Subject: Element ID as CSS selector for an XPage

XPAGES convert every id you put on xp: elements.

If you really need to use element id as css selector, you can use non xp: tags.

for example,

id will not be changed by Domino.

you can then define in your css #myCssSelector{}

Anyway, if you need to use css with xp: elements, define your css on a class.

for example you can enter : <xp:text styleClass=“myCssSelector”>

in your stylesheet, you can now define your css attributes this way : .myCssSelector{}

Hope it helps.

4

Subject: Thanks to everyone

Thanks to everyone for valueable responses.

5

Subject: Also watch out for “special characters”…

In addition to what Paul and Luc wrote, be aware that, at least in jQuery and perhaps in other JavaScript frameworks, the : causes problems when included as an ID selector.

I found a jQuery function that correctly escapes the special characters and I use it whenever I need to reference an XPage element by ID.

function jq(myid)

{//This function returns a valid JQuery ID name for

//elements named with odd characters

return ‘#’+myid.replace(/:/g,“\:”).replace(/./g,“\.”);}

For other frameworks there are probably similar functions if this one does not help.