Comment effacer le contenu d'un élément sur le bouton radio

Question

J'ai deux boutons radio d'étiquette 'Mode texte' et 'Mode Html'. Si le mode texte est sélectionné, seul le code <h:inputTextarea/> doit être affiché et le contenu de l'éditeur HTML doit être vide. Si le mode Html est sélectionné, <rich:editor/> doit être affiché et la zone de texte Text doit être vide. La sélection par défaut est le mode Texte. (À savoir si l'utilisateur ajoute du texte en mode texte et accède au mode HTML, nous voudrions effacer le textarea avant de montrer les riches: rédacteur en chef et vice-versa)

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

Comment y parvenir?

Answer 1

Vous ne devriez pas faire cela uniquement du côté client. Vous devez également informer l'arborescence des composants JSF du côté serveur du changement d'état. Sinon, il ne sera pas capable d'afficher la valeur du modèle, et encore moins de le traiter comme vous l'attendez de l'état du côté client. Vous devez afficher les radiobuttons en utilisant un vrai composant JSF <h:selectOneRadio> et envoyer des soumissions partielles à l'aide de <a4j:support> de RichFaces.

<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> 

Dans cet exemple, le <a4j:support> sera réengendrer la <h:panelGroup id="questionText"> à chaque changement du groupe de RadioButton. Le groupe de panneaux contient la zone de texte et l'éditeur riche dont l'attribut rendu dépend à son tour de la valeur du bouton radio sélectionné.

Vous pouvez utiliser le valuechangelistener pour effacer le #{forum.message} chaque fois que le #{forum.editmode} a changé.

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

Ne pas oublier de prérégler la valeur de la propriété derrière #{forum.editmode} à une valeur par défaut dans le constructeur de haricot, pour le cas où vous souhaitez conserver un mode par défaut. C'est à dire.

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