如何清除單選按鈕更改元素的內容

我有兩個標籤「文本模式」和「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

如何清除單選按鈕更改元素的內容

回答

相關問題