Hi I'm trying to align vertically two elements
The code is
<h:panelGrid columns="2">
<a4j:outputPanel layout="block">
<h:form>
<h:inputText id="text1" label="text1" value="#{opBean1.text}">
<f:validateLength maximum="10" />
<a4j:ajax event="keyup" execute="#this" render="out1" onerror="return false;" />
</h:inputText><br/>
<h:outputText id="out1" rendered="#{not empty opBean1.text}" value="Approved Text: #{opBean1.text}" />
</h:form>
</a4j:outputPanel>
<a4j:outputPanel layout="block">
<h:form>
<h:inputText id="text2" label="text2" value="#{opBean1.text2}">
<f:validateLength maximum="10" />
<a4j:ajax event="keyup" execute="#this" render="out2" onerror="return false;" />
</h:inputText><br/>
<h:outputText id="out2" rendered="#{not empty opBean1.text2}" value="Approved Text: #{opBean1.text2}" />
</h:form>
</a4j:outputPanel>
</h:panelGrid>
As you can see,
the <h:panelGrid> contains two columns.
Each column has a <a4j:outputPanel> element.
The problem is that the vertical size of the <a4j:outputPanel> can change.
(The <h:outputText id="xxx" rendered="#{not empty opBean1.xxx}" value="Approved Text: #{opBean1.xxx}" /> element is only rendered if the xxx value is not empty in the managed bean opBean1)
So if I enter some text in the first a4j panel, it will contain two lines vertically, whereas the other a4j panel will contain only one.
Therefore, the second panel's inputText field will not be aligne anymore with the first panel's text field.
I know this might be hard to understand without any graphical representation, so I'll show you what I mean :
Before entering text:
inputText1 inputText2
After entering text:
inputText1
inputText2
outputText1
I would like it to be:
inputText1 inputText2
outputText1
EDIT (sorry for the identation ... I don´t know how to make it better)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Mission Page</title><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/skinning.ecss.jsf?db=eAHjW!XqPQAE!QKS" /><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jquery.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-base-component.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-event.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/message.js.jsf?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/msg.ecss.jsf?db=eAHjW!XqPQAE!QKS&ln=org.richfaces" /></head><body><table>
<tbody>
<tr>
<td><div id="j_idt6">
<form id="j_idt7" name="j_idt7" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt7" value="j_idt7" />
<span style="font-weight: bold;">Name: </span><input id="j_idt7:clientName" type="text" name="j_idt7:clientName" onblur="av_aea6d620643bb708da4bf66b58ae27d6(event,"j_idt7:clientName",this)" />
<br /><span class="rf-msg " id="j_idt7:j_idt10"></span><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />
</form></div></td>
<td><div id="j_idt11">
<form id="j_idt12" name="j_idt12" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt12" value="j_idt12" />
<span style="font-weight: bold;">Contact: </span><input id="j_idt12:contact" type="text" name="j_idt12:contact" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />
</form></div></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-csv.js.jsf?ln=org.richfaces"></script><script type="text/javascript">
//<![CDATA[
window.av_aea6d620643bb708da4bf66b58ae27d6=function(event,id,e,da){var p={da:da,v:[{f:RichFaces.csv.validateRequired,p:{} ,m:{"detail":"name cannot be null","severity":0,"summary":"name cannot be null"} }]};
RichFaces.csv.validate(event,id,e,p);
}
$(document).ready(function() {
new RichFaces.ui.Message("j_idt7:j_idt10",{"forComponentId":"j_idt7:clientName","showSummary":false,"showDetail":true} )
});
//]]>
</script></body>
</html>
Related
Hey trying to disable/enable inputText based on a change event when a selectBooleanCheckbox is selected/unselected. Currently though, regardless of what whether or not the checkbox is selected, the inputText will always be disabled. Do I need to instead attach a listener to the checkbox? It seems in this case the inputText is never getting re-rendered.
HTML:
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}" ajax="true" event="change" update="hour"/>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
Tested on PrimFaces 6.0,6.1 and 6.2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<title>PrimeFaces Test</title>
</h:head>
<h:body>
<h:form>
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}">
<p:ajax update="hour"></p:ajax>
</p:selectBooleanCheckbox>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
</h:form>
</h:body>
</html>
I am writing a jsp using struts2. After the page is opened in browser and when i click the 'view page source' I am getting the html code in which I am seeing some script which I have not written in struts2 jsp.
My struts2 jsp is
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="form_container" align="center">
<s:if test="hasActionErrors()" > <!-- Print error messages if any -->
<div class="errorMessages" >
<s:actionerror/>
</div>
</s:if>
<s:if test="hasActionMessages()" > <!-- Print action messages if any -->
<div class="successMessages" >
<s:actionmessage/>
</div>
</s:if>
<s:form action="registerOphthalmologist" method="post" validate="true">
<s:hidden key="role" label="role" value="O" />
<s:textfield key="username" label="Choose UserName" required="true"/>
<s:password key="password" label="Choose Password" required="true"/>
<s:textfield key="givenName" label="Name" required="true"/>
<s:textfield key="surname" label="Surname" required="true"/>
<s:textfield key="age" label="Age" required="true" value=""/>
<s:select key="gender" label="Gender"
list="#{'M':'Male','F':'Female'}"
required="true"/>
<s:textfield key="contactNumber" name="contactNumber" label="Contact Number" required="true"/>
<s:textfield key="email" name="email" label="email" required="true"/>
<s:textfield key="city" name="city" label="City" required="true"/>
<s:textfield key="district" name="district" label="District" required="true"/>
<s:textfield key="state" name="state" label="State" required="true"/>
<s:textfield key="country" name="country" label="country" required="true"/>
<s:textfield key="postalCode" name="postalCode" label="Postal Code" required="true"/>
<s:textfield key="degree" label="Qualification" required="true"/>
<s:textfield key="university" label="University" required="true" value=""/>
<s:textfield key="hospitalName" label="Hospital Name" required="true"/>
<s:textfield key="experience" label="Years of Experience" required="true" value=""/>
<s:checkbox key="checkMe" fieldValue="true" label="Agree to terms & Conditions"/>
<s:submit value="Register" align="center"/>
</s:form>
</div>
<div class="footer">
<p align="center">Designed and maintained by SSSIHL</p>
</div>
In the Html code the following code is being added.
<script type="text/javascript" src="/Sairam/struts/xhtml/validation.js"></script>
<script type="text/javascript">
function validateForm_registerOphthalmologist() {
form = document.getElementById("registerOphthalmologist");
clearErrorMessages(form);
clearErrorLabels(form);
var errors = false;
return !errors;
}
I don't know why and how it is being added. Can any one tell what is happening?
Here is my code:
Topic one: <h:form> <h:commandButton value="+" /> <h:commandButton value="-" />
</h:form>
I want the + and - buttons to be on same line next to the the text Topic one:.
Use a css class like this on your form:
.your-class {
display: inline;
}
Wrap your buttons with <h:panelGroup>:
<h:panelGroup>
<h:commandButton value="+" /> <h:commandButton value="-" />
</h:panelGroup>
Here is my html code.
<table >
<tr>
<th rowspan="3">
<h:selectOneRadio layout="pageDirection"
onClick="alert('selam')" id="selectOneRadio">
<f:selectItem itemValue="Categori" itemLabel="Radio 1" />
<f:selectItem itemValue="Service" itemLabel="Radio 2" />
<f:selectItem itemValue="Follower" itemLabel="Radio 3" />
</h:selectOneRadio>
</th>
<td>
<h:inputText value="inputText 1" />
</td>
</tr>
<tr>
<td>
<h:inputText value="inputText 2" />
</td>
</tr>
<tr>
<td>
<h:inputText value="inputText 3" />
</td>
</tr>
</table>
I want to Select One of the radioButtons. When I click one of them I want the inputText be disabled.
For example:
İf I click Radio 1 , then input Text 1 will be disabled.
İf I click Radio 2 , then input Text 2 will be disabled.
İf I click Radio 3 , then input Text 3 will be disabled.
How can I do this?
Bind the radio button value to a managed bean property and use <f:ajax> to send an ajax request and update parts of the view when the radio button changes and use disabled attribute to disable the <h:inputText> depending on the selected radio button item value.
E.g.
<h:panelGroup id="inputs">
<table>
<tr>
<th rowspan="3">
<h:selectOneRadio value="#{bean.radio}" layout="pageDirection">
<f:selectItem itemValue="Categori" itemLabel="Radio 1" />
<f:selectItem itemValue="Service" itemLabel="Radio 2" />
<f:selectItem itemValue="Follower" itemLabel="Radio 3" />
<f:ajax render="inputs" />
</h:selectOneRadio>
</th>
<td>
<h:inputText value="#{bean.input1}" disabled="#{bean.radio == 'Categori'}" />
</td>
</tr>
<tr>
<td>
<h:inputText value="#{bean.input2}" disabled="#{bean.radio == 'Service'}" />
</td>
</tr>
<tr>
<td>
<h:inputText value="#{bean.input3}" disabled="#{bean.radio == 'Follower'}" />
</td>
</tr>
</table>
</h:panelGroup>
with
#ManagedBean
#ViewScoped
public class Bean {
private String radio;
private String input1;
private String input2;
private String input3;
// ...
}
Have a look at this, i think this is what you are looking for
<html>
<head>
<script type="text/javascript">
function enable_area(opt)
{
//get the required document element and disable corresponding element.
document.form.textarea1.disabled = (opt == 'Categori' ? true : false);
document.form.textarea2.disabled = (opt == 'service' ? true : false);
document.form.textarea3.disabled = (opt == 'Follower' ? true : false);
}
</script>
</head>
<body>
<form action="" method="post" name="form">
<!--Pass the value field as selector when clicked on radio button-->
Radio1 <input type="radio" name="radio" value="Categori" onclick="enable_area(this.value);" />
<textarea name="textarea1"></textarea>
<br />
Radio2 <input type="radio" name="radio" value="service" onclick="enable_area(this.value);" />
<textarea name="textarea2"></textarea>
<br />
Radio3 <input type="radio" name="radio" value="Follower" onclick="enable_area(this.value);" />
<textarea name="textarea3"></textarea>
</form>
</body>
</html>
I want to ask that sometimes what happen that if I use PrimeFaces Rich Text Editor then instead of showing Rich Text Editor, it shows normal inputTextArea. I want to know what can be the reasons that Rich Text Editor is not shown. Why it shows normal text Area instead of Rich Text Area? My Javascript is also enabled. Please tell me the reasons.
Thanks
Edit:
Here is my code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="title">Add City Images</ui:define>
<ui:define name="content">
<h:form id="cityDetailForm" prependId="false" >
<p:growl id="messages" showDetail="true" life="2000"> </p:growl>
<p:panel id="panel1"
style="border-color: #000000;width: 954px;position: absolute;left: 150px;height: 450px;-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(../PIE/PIE.htc)">
<strong Class="MainHeader">
<p:spacer width="10"/> City Detail
</strong>
<h:panelGrid columns="5"
border=""
width="20%"
style="position: absolute; top: 50px;"
columnClasses="asteriskColumns, nameColumns" >
<h:outputText value="*" />
<h:outputText value="Map: " />
<p:fileUpload id="cityMap"
description="Image"
update="city messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="city"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false">
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<h:commandLink value="remove"
title="Remove Picture"
style="color: #0d5b7f;text-decoration: underline"
onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">
<f:ajax event="click"
render="city"
listener="#{cityDetail.removeImage}"/>
</h:commandLink>
.....
</h:panelGrid>
<h:panelGrid columns="1"
border=""
width="60%"
style="position: absolute; top: 40px;left: 350px;height: 410px ">
<p:editor value="#{cityDetail.CKeditorValue}" widgetVar="editor" width="600"/>
</h:panelGrid>
<h:commandButton id="preview"
value="Preview"
action="#{cityDetail.preview}"
style="position: absolute; top: 470px; left: 400px"
styleClass="ButtonStyle" />
<h:commandButton id="save"
value="Save"
actionListener="#{cityDetail.sendImagesToDatabase}"
action="#{cityDetail.save}"
style="position: absolute; top: 470px; left: 475px;"
styleClass="ButtonStyle">
</h:commandButton>
<h:commandButton id="cancel"
value="Cancel"
action="#{cityDetail.cancel}"
style="position: absolute; top: 470px; left: 550px;"
styleClass="ButtonStyle" />
<link type="text/css" rel="stylesheet" href="css/jquery.modaldialog1.css"/>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.modaldialog.js"></script>
<h:commandButton id="YesAfterSaveBtn" onclick="$(dialogmask).hide();$(dialog).hide()" action="#{cityDetail.goBack}" style="background-color: #e6eff6;border: #e6eff6"></h:commandButton>
<h:outputText value="#{cityDetail.errorScript}" escape="false"/>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
You can see that i am using Prime Faces editor, but it is showing me inputTextArea. Although i didn't try the solution but this is what i asked for.
thanks
Try the following
set <f:view contentType="text/html"/>
as mentioned in the following thread of primefaces forum p:editor like h:inputTextArea