代码之家 › 专栏 › 技术社区 › Achaius

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

richfaces jsf jquery

Achaius · 技术社区 · 14 年前

我有两个单选按钮的标签'文本模式'和'Html模式'。如果仅选择文本模式 <h:inputTextarea/> <rich:editor/>

 <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();
        }
    });
}

如何做到这一点?

1 回复 | 直到 14 年前

BalusC 14 年前

你不应该只在客户端做这件事。您还必须将状态的变化通知服务器端的JSF组件树。否则它将无法显示模型值,更不用说按照您从客户端状态所期望的方式来处理它了。您必须使用真正的JSF来显示单选按钮 <h:selectOneRadio> <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:支持> 将重新渲染 <h:panelGroup id="questionText">

#{forum.message} 每当 #{forum.editmode} 已经改变了。

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

别忘了预先设定后面的财产价值 #{论坛.editmode} 在bean的构造函数中设置一些默认值,以便保留默认模式。即。

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