Notes/Domino XPages Development Forum - Rich Text in Dojo XPage

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal

~Kim Dworesakonyetsi

Mar 14, 2011, 3:53 PM

33 Posts

Resolved

Rich Text in Dojo XPage

Category: Dojo and Client Side JavaScript
Platform: All
Release: 8.5.2
Role: Developer
Tags: Dojo
Replies: 2

I have created a Dojo layout for an application which is working fine for dojo dialogs, tool-tips etc. The problem I am having is when I add a Rich Text field to the form I am presented with the following error and the screen appears with no CSS applied and no Rich Text field.

Message: 'dijit.byId(...)' is null or not an object. The error is not a prompt but appears in the bottom left hand side of IE8.

The line causing a problem is shown below, taken from the source.

dijit.byId('view:_id1:_id21:callback1:inputRichText1').initForEdit();

Has anyone seen this before? I am running 8.5.2 and the Rich Text editor works fine in a plain XPage with no Dojo elements. I have attached my code below.

Thanks to anyone who can help!

Ian

=============================

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoTheme="true"

xmlns:xc="http://www.ibm.com/xsp/custom" dojoParseOnLoad="false">

<xp:this.resources>

<xp:dojoModule name="dijit.Dialog"></xp:dojoModule>

</xp:this.resources>

body, html { width:100%; height:100%; margin:0; padding:0;

overflow:hidden; } #masterBc { width:100%; height:100%; }

#rightSide, #leftSide { width:275px; } #topRight {

background:#ededed; } #bottomCorner { height:175px; } .lorem {

padding:7px; font-weight:normal; }

</style>

dojo.addOnLoad(function(){

dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.AccordionContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("dijit.layout.TabContainer");

dojo.require("dojo.parser"); dojo.addOnLoad(function(){

dojo.parser.parse(); }); });

</script>

<div dojoType="dijit.layout.AccordionContainer"

region="left" id="leftSide">

<div dojoType="dijit.layout.AccordionPane"

title="Top">

Test Text

</p>

</div>

<div dojoType="dijit.layout.AccordionPane"

title="Center">

</div>

<div dojoType="dijit.layout.AccordionPane"

title="Bottom">

</div>

<div dojoType="dijit.layout.ContentPane"

title="First Tab">

Test Text

</p>

</div>

<div dojoType="dijit.layout.ContentPane"

title="Another Tab">

<xp:panel></xp:panel>

</div>

<div dojoType="dijit.layout.BorderContainer" region="right"

id="rightSide">

<div dojoType="dijit.layout.ContentPane" region="center"

id="topRight">

<xp:button value="Label" id="button1">

<xp:eventHandler event="onclick"

submit="false">

<xp:this.script><![CDATA[dijit.byId("myDialogWrapper").show() ]]></xp:this.script>

</xp:eventHandler>

</xp:button>

<xp:br></xp:br>

<xc:dominoToolTip connectID="button1">

<xp:this.facets>

<xp:span xp:key="ToolTipContent">

Hello there!

<xp:inputRichText id="inputRichText1" value="#{applicationScope.hui}"></xp:inputRichText>

</xp:span>

</xp:this.facets>

</xc:dominoToolTip>

</div>

<xp:panel></xp:panel>

<div dojoType="dijit.layout.ContentPane" region="bottom"

splitter="true" id="bottomCorner">

</div>

</body>

<div id="myDialogWrapper" dojoType="dijit.Dialog"

style="display:none">

<xp:panel>

<xp:br></xp:br>

<xp:viewPanel rows="30" id="viewPanel1">

<xp:this.facets>

<xp:pager partialRefresh="true"

layout="Previous Group Next" xp:key="headerPager" id="pager1">

</xp:pager>

</xp:this.facets>

<xp:this.data>

<xp:dominoView var="view1" viewName="Requests">

</xp:dominoView>

</xp:this.data>

<xp:viewColumn columnName="$1" id="viewColumn1">

<xp:viewColumnHeader value="Created"

id="viewColumnHeader1">

</xp:viewColumnHeader>

</xp:viewColumn>

<xp:viewColumn columnName="Title" id="viewColumn2">

<xp:viewColumnHeader value="Title"

id="viewColumnHeader2">

</xp:viewColumnHeader>

</xp:viewColumn>

</xp:viewPanel>

</xp:panel>

</div>

</xp:view>

~George Umboosicheketsi

Mar 15, 2011, 6:36 AM

15 Posts

Re: Rich Text in Dojo XPage

This is just a guess because I don't really know much about Dojo...

I think putting your dojo.require() calls inside a dojo.addOnLoad() call delays them until the actual page content has finished loading.

The dijit.byId() call could be running earlier, at which point "dijit" might not have been created yet.

You could try either:

- In the javascript in the page source, move those dojo.require() outside the addOnLoad() call; or

- Instead of entering dojo.require() calls manually, add the required Dojo Modules as Resources in the xpage (or custom control) properties.

~Kim Dworesakonyetsi

Mar 15, 2011, 10:25 AM

33 Posts

Re: Rich Text in Dojo XPage

Scott

If you tell me where you live I'll come and buy you a pint!

Thanks a lot, I'm no master at Dojo either but am a big fan of the look, feel and performance it offers.

Taking the statements outside of the onLoad event did the trick.

Thanks for taking the time to review and reply.

Ian