PDA

View Full Version : JSpell Evolution and modal panels

hamiltd1
17th June 2008, 03:40 PM
We have started using rich:modalPanels in our application, such as:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:t="http://myfaces.apache.org/tomahawk">

<script LANGUAGE="JavaScript" TYPE="text/javascript" SRC="/jspell/jspellSettings.js" CHARSET="ISO-8859-1"></script>
<script LANGUAGE="JavaScript" TYPE="text/javascript" SRC="/jspell/jspellEvolution.js" CHARSET="ISO-8859-1"></script>
<script>
window.onload=jspellInit;
function getSpellCheckArray() {
var fieldsToCheck=new Array();
fieldsToCheck[0]=[document,"newExpenseComments"];
}
</script>
<rich:modalPanel id="newExpenseModalPanel" height="280" width="900"
minHeight="200" minWidth="900" keepVisualState="false"
autosize="true" headerClass="modalHeader">
<h:form>
<t:inputTextarea cols="22" rows="5" id="newExpenseComments"
forceId="true" value="Hi there">
</t:inputTextarea>
</h:form>
</rich:modalPanel>
</html>

This is saved in a file such as modalPanel.xhtml

In another page it is called as follows:
<a4j:commandLink action="#{handler.doSomeWork}"
oncomplete="Richfaces.showModalPanel('newExpenseModalPanel');"
reRender="modalPanel" value="Add an Expense Entry" />

For this to work I had to change var jspellAttachToHiddenElements=true;
in the jspellSettings.js config file. However, rather than showing the textarea it shows a very tiny iframe with a blue border.

I've used the Mozilla DOM Inspector to find the iFrame's id, but I can't get it to resize or become visible. If I remove the JSpell code the textarea comes up correctly.

Does anyone know what I'm doing wrong? I've been looking at this for the past week and can't find the problem. I also tried calling jspellDetach followed by jspellAttach with no success.

Any help would be greatly appreciated
hamiltd1
18th June 2008, 11:19 AM
I made a button on the stripped down page
and used jspellAreaLookup to get hold of the iFrame like this:

jspellArea=jspellAreaLookup(document.getElementByI d('newExpenseForm:newExpenseComments'));

I then checked jspellArea.style.height and jspellArea.style.width and they are both 0px

How do I set the height and width of the iFrame? That's the only problem I have left to resolve. I don't know the id of the iFrame, since jspellAreaLookup just returns the iFrame object itself.

According to what I've found online, in order to change the height and width of the iFrame I'm supposed to use:

document.getElementById('iFrameId').height=50px;

Please, I really need help with this.

Thanks,
David Hamilton
hamiltd1
19th June 2008, 04:30 PM
I solved this part of the problem, when the page is being loaded I have javascript that calls this expandEditTextarea method. It looks up the iframe using jspellAreaLookup, then I use jspellArea.id to get the IFRAME DOM id.
Once I have the DOM id of the IFRAME, I can use it to set the style height and width. I looked at their values and they were both 0px which is why it was making the box so tiny. This is my method I used below:

function expandEditTextarea() {
jspellArea=jspellAreaLookup(document.getElementByI d('editExpenseModalPanelForm:editExpenseComments') );

document.getElementById(jspellArea.id).style.heigh t=40;
document.getElementById(jspellArea.id).style.width =200;
};

The problem that I was having was that when I would try to set a field on a modelPanel to use JSpell, when the modal panel would load the field would turn into a tiny blue box. Now that part is corrected.

The final part of my problem remaining is the most difficult. Not only are we using modal panels, but we are using a4j in the modal panels. The textarea I want to spell check is actually embedded in an a4j:outputPanel. When I try loading the modal window and include the a4j:outputPanel code, the JSpell Evolution code does not even load at all. There is no IFRAME, no tiny blue box, just a regular textarea with no spell checking at all.

Any help would be greatly appreciated.
Dave
hamiltd1
1st July 2008, 01:29 PM
We are getting closer on this issue, now we've found that in order to get JSpell Evolution to run on a modal panel using an a4j:outputPanel you need to call jspellInit(); in the onShow function of the modalPanel, as shown below:

<rich:modalPanel id="myModalPanel" height="420"
width="700" minHeight="420" minWidth="700" keepVisualState="false"
headerClass="modalHeader" onshow="jspellInit();">

When you do this, you can actually spell check on the modal panel. However, if you submit and have to redisplay the modal panel due to validation errors or other problems, the spell checking will no longer be working. You have to refresh the entire page in order to get it to show up again.

I know people are looking at this thread, hopefully what we are going through is helping someone else as well, even if there is no one else who knows how to solve this problem.

Dave