xPages: output field value to the page as plain text

Hi All,

I recently attended a Lotus Notes application development course.

Something came up that I could resolve.

I wanted to use a field value as part of a some Javascript code. e.g.
document.getElementById("staff_pictures").src = 'NotesFieldUsername.jpg';

Open in new window

Where NotesFieldUsername is the field value.

The tutor suggested I  use an input box and reference its value.  e.g.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<!--  Notes fields  -->	
	<xp:inputText id="inputText1" value="#{document1.Staff_Fullname}"></xp:inputText>
	<xp:br></xp:br>
	<xp:image url="http://intranet/images/loading.png" id="image1"></xp:image>
<!--/  Notes fields  -->
<!--  update image SRC  -->	
	<script type="text/javascript">
	user_fullname = document.getElementById('view:_id1:inputText1').value;
	document.getElementById("view:_id1:image1").src="http://intranet/images/people/"+user_fullname+".jpg";
	</script>
<!--  update image SRC  -->	
</xp:view>

Open in new window

While this works, it requires input boxes to hold the values, which seems over the top in my opinion.  It also requires me to use the correct element ID 'view:_id1:inputText1' rather than inputText1

So my question is; how can I output a field value as just plain text? e.g.
document.getElementById("staff_pictures").src = '<xp:Text value="#{document1.Staff_Fullname}"></xp:Text>.png';

Open in new window



Many thanks
LVL 2
detox1978Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Let me just start by saying that I know nothing about Lotus Notes.

If you only write
<div>#{document1.Staff_Fullname}</div> 

Open in new window

inside a div on the page, does it render the actual value of displays #{document1.Staff_Fullname} anyway?

<xp:inputText id="inputText1" value="#{document1.Staff_Fullname}"></xp:inputText>

Open in new window

is a server-side control that renders a normal <input type="text" /> but with a server-side changed ID.
And server-side controls can't be "injected" client-side.

So the trick here is to find a way to print the value on the page directly.
in ASP.net for instance the templating language is like <%= document1.Staff_Fullname %>
If document1 is a public property server-side on the page, at render time this whole tag acts as a place-holder for the actual document1.Staff_Fullname value.

See is Lotus Notes have something similar. From your code I'm guessing #{document1.Staff_Fullname} should do the trick.
0
Sjef BosmanGroupware ConsultantCommented:
Not such a bad guess at all... :)

Try with
     document.getElementById("#{id:image1}").src = 'NotesFieldUsername.jpg';

or use staff_pictures in both cases if you want to, as the id of the <xp:image> tag (instead of image1) and in the script statement.
0
detox1978Author Commented:
If I run the code below, it alerts the text #{id:image1} rather than processing it

<script type="text/javascript">
alert("#{id:image1}")
</script>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Sjef BosmanGroupware ConsultantCommented:
Yes, that's because XPages doesn't handle the script-tag.

      <xp:scriptBlock id="scriptBlock1">
            <xp:this.value><![CDATA[            
alert("#{id:image1}")
]]></xp:this.value>
      </xp:scriptBlock>

You can find this element as Output script under the Core Controls.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
detox1978Author Commented:
Excellent thanks.  Didnt realise there was a correct way to add your own javascript.
0
detox1978Author Commented:
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Lotus IBM

From novice to tech pro — start learning today.