Question

我有两个标签为“文字模式”和“黑客模式”的单选按钮。如果选择了“文本模式”，则只显示<h:inputTextarea/>，并且HTML编辑器的内容必须为空。如果选择了Html模式，则应显示<rich:editor/>，并且Text textarea必须为空。默认选择是文本模式。（即如果用户在文本模式下添加文本并导航到HTML模式，我们希望在显示富：编辑器之前清除textarea，反之亦然）

 <input id="textMode" type="radio" name="text" value="textMode">Text mode</input>
 <input id="htmlMode" type="radio" name="text" value="htmlMode">Html mode</input>

 <table id="questionText">
  <tr>
   <td id="textQuestionField">
    <h:inputTextarea value="#{forum.message}" cols="80" rows="3"/>
   </td>

   <td id="htmlQuestionField">
    <rich:editor theme="advanced" useSeamText="true" viewMode="visual" autoResize="true" value="#{forum.message}">
     <f:param name="theme_advanced_buttons1" value="newdocument,separator,cut,copy,paste,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,hr,removeformat,visualaid,separator,sub,sup"/>
     <f:param name="theme_advanced_buttons2" value="bullist,numlist,separator,outdent,indent,blockquote,separator,undo,redo,separator,link,unlink,anchor,separator,image,cleanup,help,code,separator,forecolor,backcolor"/>
     <f:param name="theme_advanced_buttons3" value="fontselect,fontsizeselect,formatselect,styleselect,separator,charmap"/>
     <f:param name="theme_advanced_resizing" value="true"/>
     <f:param name="theme_advanced_toolbar_location" value="top" />
     <f:param name="theme_advanced_toolbar_align" value="left" />
        </rich:editor>
    </td>
 </tr>
</table>


function textHtmlQuestionHandler(tableId, radioButtonTextId, radioButtonHtmlId, textQuestionId, htmlQuestionId) {
    // Text Mode is enabled by default
    jQuery(radioButtonTextId).attr('checked', true);
    jQuery(tableId).find(htmlQuestionId).hide();

    jQuery("input[type='radio']").change(function() {
        // Hide HTML question field, if text mode is enabled
        if (jQuery(radioButtonTextId).is(':checked')) {
            jQuery(tableId).find(textQuestionId).show();
            jQuery(tableId).find(htmlQuestionId).hide();
        } else if (jQuery(radioButtonHtmlId).is(':checked')) {
            // Hide text question field, if HTML mode is enabled
            jQuery(tableId).find(htmlQuestionId).show();
            jQuery(tableId).find(textQuestionId).hide();
        }
    });
}

如何实现这一目标？

Answer 1

您不应仅在客户端执行此操作。您必须通知服务器端的JSF组件树以及状态的更改。否则它将无法显示模型值，更不用说按照您对客户端状态的期望来处理它。您必须使用真实的JSF <h:selectOneRadio>组件显示radiobuttons，并使用RichFaces的内置<a4j:support>来激发部分提交。

<h:selectOneRadio value="#{forum.editmode}" valueChangeListener="#{forum.editmodeChanged}">
    <f:selectItem itemValue="text" itemLabel="Text mode" />
    <f:selectItem itemValue="html" itemLabel="HTML mode" />
    <a4j:support event="change" reRender="questionText" />
</h:selectOneMenu>

<h:panelGroup id="questionText">
    <h:inputTextarea value="#{forum.message}" rendered="#{forum.editmode == 'text'}" />
    <rich:editor value="#{forum.message}" rendered="#{forum.editmode == 'html'}" />
</h:panelGroup>

在此示例中，<a4j:support>将在radiobutton组的每次更改时重新呈现<h:panelGroup id="questionText">。 panelgroup包含textarea和rich editor，其渲染属性又取决于所选的radiobutton值。

每当#{forum.message}发生变化时，您都可以使用valuechangelistener清除#{forum.editmode}。

public void editmodeChanged(ValueChangeEvent event) {
    this.message = null;
}

对于您希望保留默认模式的情况，不要忘记将#{forum.editmode}后面的属性值预设为bean的构造函数中的某个默认值。即。

public Forum() {
    this.editmode = "text";
}

如何清除单选按钮更改时元素的内容

1 个答案: