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

我有两个标签“文本模式”和“Html模式”单选按钮。如果选择了文本模式，则只应显示<h:inputTextarea/>，并且HTML编辑器的内容必须为空。如果选择Html模式，则应显示<rich:editor/>，并且文本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(); 
     } 
    }); 
}

如何实现这一目标？

来源

2010-09-20 Achaius

你不应该仅仅在客户端做这件事。您必须通知服务器端的JSF组件树以及状态更改。否则，它将无法显示模型值，更不用说像您期望从客户端状态那样处理它。您必须使用真实的JSF <h:selectOneRadio>组件显示单选按钮，并使用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>将在单选按钮组的每个变化重新呈现<h:panelGroup id="questionText">。面板组包含textarea和丰富的编辑器，其渲染属性依次取决于所选的单选按钮值。

只要#{forum.editmode}发生变化，您可以使用valuechangelistener清除#{forum.message}。

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

不要忘了预设的财产背后的价值#{forum.editmode}一些默认值在bean的构造方法，你想保留默认模式的情况。即

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

来源

2010-09-20 13:00:03 BalusC

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

回答

相关问题