ICEfaces
  1. ICEfaces
  2. ICE-2898

<ice:inputRichText /> does not participate in form submission like <ice:inputTextArea /> does

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.7RC1
    • Fix Version/s: 1.7.1
    • Component/s: None
    • Labels:
      None
    • Environment:
      Liferay 4.4.2 + Tomcat 6.0.16 bundle + JSF 1.1 + ICEfaces 1.7RC1

      Description

      I've been working with the <ice:inputRichText /> component and it seems like the only way to get the HTML contents (value) of the component into the server-side bean is to click the "Save" icon. This is counter-intuitive to the way that the rest of the ICEfaces input components work, such as the <ice:inputTextArea /> component.

      In a typical web form, you expect to type-in values into fields, and hit a SUBMIT button at the bottom of the page. When I do this with an <ice:inputRichText /> component, the value is not submitted to the bean. Additionally, it does not pass its value in an "onblur" type of mechanism with ICEfaces partial submit.

      Although the attached file is a portlet designed for use within Liferay, I suspect that this is a problem in the webapp world as well.

      I guess what I'm saying is that from a usability perspective, we just can't expect the end-user to know that he has to click on the "Save" icon to partial-submit his rich text before clicking on the SUBMIT button at the bottom of the page.

      To reproduce this scenario:

      1. Download and Install the Liferay 4.4.2 + Tomcat 6.0.16 bundle
      2. Run the bundle, which will create a $HOME/liferay/deploy folder
      3. Download the sample-icefaces-rich-text-portlet.war attached to this ticket and copy to $HOME/liferay/deploy
      5. Start IE7
      6. Login as test@liferay.com with password test
      7. Position the mouse over the "Welcome" dock in the upper right hand corner
      8. Navigate to "My Places > My Community > Private Pages"
      9. Add a page named "Rich Text"
      10. Under the "Add Content" menu, expand the "Samples" category
      11. Add the "Sample ICEfaces Rich Text" portlet
      12. Monitor the Tomcat log
      13. Type in a name in the "name" field and press TAB on the keyboard to cause an ONBLUR -- see that the setBiography() setter gets called via partial submit (since ICEfaces submits the whole form. Note that the default value of "I was born in 1902..." is passed to the setter.
      14. Change the year in the rich text component from 1902 to 2002 and press TAB on the keyboard -- notice that the cursor DOES NOT LEAVE the rich text component as it should. What it should do, is cause an ONBLUR event, invoke the ICEfaces partial submit mechanism, and then send input focus to the SUBMIT button.
      15. Click on the SUBMIT button -- check the Tomcat log, and note that the new year value of "2002" is not passed to the setter -- instead, "1902" is passed.

        Activity

        Hide
        Ken Fyten added a comment -

        This has to do with how the FCKEditor component itself works. Will review for 1.7.1 to see if we can make it support partialSubmit, etc. as per other input components.

        Show
        Ken Fyten added a comment - This has to do with how the FCKEditor component itself works. Will review for 1.7.1 to see if we can make it support partialSubmit, etc. as per other input components.
        Hide
        Neil Griffin added a comment -

        Back in early 2007 I sent y'all a plain-old JSF (non D2D) component that I wrote for the FCKEditor, in hopes that ICE-1240 would be come a reality. While this component had no understanding of partialSubmit, its "value" did indeed get submitted when a SUBMIT button was clicked. So even if partialSubmit is not possible, then perhaps just making the "value" attribute get submitted on the form submit would be good. I'd be happy to send it to you again. Actually its available in the new PortletFaces project if you want to look at it there:
        http://lportal.svn.sourceforge.net/viewvc/lportal/incubation/portletfaces/

        Show
        Neil Griffin added a comment - Back in early 2007 I sent y'all a plain-old JSF (non D2D) component that I wrote for the FCKEditor, in hopes that ICE-1240 would be come a reality. While this component had no understanding of partialSubmit, its "value" did indeed get submitted when a SUBMIT button was clicked. So even if partialSubmit is not possible, then perhaps just making the "value" attribute get submitted on the form submit would be good. I'd be happy to send it to you again. Actually its available in the new PortletFaces project if you want to look at it there: http://lportal.svn.sourceforge.net/viewvc/lportal/incubation/portletfaces/
        Hide
        Ken Fyten added a comment -

        Adnan, can you comment on how feasible this change is? I was under the impression that the underlying FCKEditor component was wired to only save with the save button, but is there a way we could make this work?

        Show
        Ken Fyten added a comment - Adnan, can you comment on how feasible this change is? I was under the impression that the underlying FCKEditor component was wired to only save with the save button, but is there a way we could make this work?
        Hide
        Adnan Durrani added a comment -

        Yes its possible to save the value of the FCKEditor on the partialSubmit. In fact when the component was designed, it was causing the more then one instances of the inputRichTexts to be saved on a "save" action. Please see the following case.
        http://jira.icefaces.org/browse/ICE-2719

        To fix this the above case we had to put the check, that the inputRichText should only save the value when the save button clicked on it.

        Show
        Adnan Durrani added a comment - Yes its possible to save the value of the FCKEditor on the partialSubmit. In fact when the component was designed, it was causing the more then one instances of the inputRichTexts to be saved on a "save" action. Please see the following case. http://jira.icefaces.org/browse/ICE-2719 To fix this the above case we had to put the check, that the inputRichText should only save the value when the save button clicked on it.
        Hide
        Adnan Durrani added a comment -

        trunk: revision16738
        branch 1.7.1: revision 16739

        • The following new attribute added to the inputRichText component.
          *saveOnSubmit

        Default to false. Setting this attribute to "true", will cause the inputRichText component to participate in the form submission.

        Show
        Adnan Durrani added a comment - trunk: revision16738 branch 1.7.1: revision 16739 The following new attribute added to the inputRichText component. *saveOnSubmit Default to false. Setting this attribute to "true", will cause the inputRichText component to participate in the form submission.
        Hide
        Neil Griffin added a comment -

        The saveOnSubmit="true" attribute isn't working in 1.7.1

        Show
        Neil Griffin added a comment - The saveOnSubmit="true" attribute isn't working in 1.7.1
        Hide
        Leray Fab added a comment -

        I confirm the saveOnSubmit option added to the 1.7.1 is not working for me too, or at least, not every times...

        I use icefaces 1.7.1 + Seam.

        If I try to submit my form using :

        <ui:define name="contentData">
        <s:validateAll>
        <table class="splitPane_70_30">
        <tr>
        <td>
        <ice:inputRichText id="axisDescription" height="400px"
        value="#

        {searchAxisCreate.newSearchAxis.description}

        " language="fr" skin="silver"
        saveOnSubmit="true" toolbar="Athena Simple" customConfigPath="/js/athena/fckConfig.js" />
        </td>
        </tr>
        </table>
        </s:validateAll>
        </ui:define>

        <ice:commandLink id="validate" action="#

        {searchAxisCreate.chooseRecipients()}" type="submit">
        <ice:outputText value="#{messages['athena.commons.action.Next']}" />
        <s:conversationId />
        </ice:commandLink>

        it is not working everi time i try : some times, the backing bean setter is called, some times not... Threrefore I use this workaround:

        <ice:commandLink id="validate" action="#{searchAxisCreate.chooseRecipients()}

        " type="submit"
        onclick="Athena.commons.icefaces.saveRichInputText();">
        <ice:outputText value="#

        {messages['athena.commons.action.Next']}

        " />
        <s:conversationId />
        </ice:commandLink>

        with the given java script function (extracted from the fckeditor javascript code):

        /**

        • Trigger a submit for all rich input text editors on the page.
          */
          Athena.commons.icefaces.saveRichInputText = function()
          {
          var all = Ice.Repository.getAll();

        for (i=0; i < all.length; i++)
        {
        var instanceName = all[i].thirdPartyObject.InstanceName;
        var editIns = FCKeditorAPI.GetInstance(instanceName);

        if (editIns != null)

        { var element = $(instanceName); element.value = editIns.GetXHTML(true); }

        }

        var form = Ice.util.findForm(element);
        iceSubmit(form,element,new Object());

        return false;
        }

        When doing this, I force twice the submission for the richInputText and my backing bean setter searchAxisCreate.newSearchAxis.description is called as well. Nevertheless, it works but it is not the way it should work... The saveOnSubmit should already does this job (and, I repeat, it does not every times).

        At that point, I have a problem with my workaround. I have a form with required input texts and I want to add a Cancel button with a popup message to confirm or not this cancelation. With my workaround, I also have to submit the form with ice:commandLink because, if I don't do it and choose not to cancel and go back to my page (using s:link for example), I lose the text I typed in the richInputText... No problem, I use the commandLink : but it means I have to fill in all the required fields just to have the possibility to make the cancel button work!!! (if not all the required fields are filled in, the submission is not performed indeed...)

        Today, I'm quite stuck because I have two possibilities :

        • I keep going on with the buggy saveonSubmit that submit "when it wants to" and my cancel mechanism works fine
        • I use my workaround, but, in case of presence of required fields, I have to fill in the fields just to allow the cancel button to work... which is crazy...

        Thanks for your help.

        Show
        Leray Fab added a comment - I confirm the saveOnSubmit option added to the 1.7.1 is not working for me too, or at least, not every times... I use icefaces 1.7.1 + Seam. If I try to submit my form using : <ui:define name="contentData"> <s:validateAll> <table class="splitPane_70_30"> <tr> <td> <ice:inputRichText id="axisDescription" height="400px" value="# {searchAxisCreate.newSearchAxis.description} " language="fr" skin="silver" saveOnSubmit="true" toolbar="Athena Simple" customConfigPath="/js/athena/fckConfig.js" /> </td> </tr> </table> </s:validateAll> </ui:define> <ice:commandLink id="validate" action="# {searchAxisCreate.chooseRecipients()}" type="submit"> <ice:outputText value="#{messages['athena.commons.action.Next']}" /> <s:conversationId /> </ice:commandLink> it is not working everi time i try : some times, the backing bean setter is called, some times not... Threrefore I use this workaround: <ice:commandLink id="validate" action="#{searchAxisCreate.chooseRecipients()} " type="submit" onclick="Athena.commons.icefaces.saveRichInputText();"> <ice:outputText value="# {messages['athena.commons.action.Next']} " /> <s:conversationId /> </ice:commandLink> with the given java script function (extracted from the fckeditor javascript code): /** Trigger a submit for all rich input text editors on the page. */ Athena.commons.icefaces.saveRichInputText = function() { var all = Ice.Repository.getAll(); for (i=0; i < all.length; i++) { var instanceName = all [i] .thirdPartyObject.InstanceName; var editIns = FCKeditorAPI.GetInstance(instanceName); if (editIns != null) { var element = $(instanceName); element.value = editIns.GetXHTML(true); } } var form = Ice.util.findForm(element); iceSubmit(form,element,new Object()); return false; } When doing this, I force twice the submission for the richInputText and my backing bean setter searchAxisCreate.newSearchAxis.description is called as well. Nevertheless, it works but it is not the way it should work... The saveOnSubmit should already does this job (and, I repeat, it does not every times). At that point, I have a problem with my workaround. I have a form with required input texts and I want to add a Cancel button with a popup message to confirm or not this cancelation. With my workaround, I also have to submit the form with ice:commandLink because, if I don't do it and choose not to cancel and go back to my page (using s:link for example), I lose the text I typed in the richInputText... No problem, I use the commandLink : but it means I have to fill in all the required fields just to have the possibility to make the cancel button work!!! (if not all the required fields are filled in, the submission is not performed indeed...) Today, I'm quite stuck because I have two possibilities : I keep going on with the buggy saveonSubmit that submit "when it wants to" and my cancel mechanism works fine I use my workaround, but, in case of presence of required fields, I have to fill in the fields just to allow the cancel button to work... which is crazy... Thanks for your help.

          People

          • Assignee:
            Unassigned
            Reporter:
            Neil Griffin
          • Votes:
            3 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: