I'm using JSF2.0 and trying to call a java function from javascript but couldn't achieve this. I've a jsp with datatable, where 2 of my columns(Material and Desc) fetch data from the popup jsp.Now the user enters data in 2 other fields(Unit and Qty), taking these 4 as input parameters I have a java function which returns the rest of the values (NetPrice and NetTax in my example) How can I call the java method here such that I can get the values to my jsp's(test.jsp) text fields.Here is the code snippet of my trail
test.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script LANGUAGE="JavaScript">
function testPrevSibling(buttonElement) {
try {
// alert(buttonElement);
var inputText = buttonElement.previousSibling;
while (inputText.nodeType!=1)
{
inputText =inputText.previousSibling;
}
// alert(inputText.id);
return inputText.id;
} catch(ex) {
alert("bad " + ex);
}
}
function testNextSibling(buttonElement) {
try {
// alert(buttonElement);
var inputText = buttonElement.nextSibling;
while (inputText.nodeType!=1)
{
inputText =inputText.nextSibling;
}
// alert("next sibling-->"+inputText.innerHTML);
return inputText;
} catch(ex) {
alert("bad " + ex);
}
}
// var inputId;
function popUp(URL,buttonRef) {
var inputId = testPrevSibling(buttonRef);
// alert(inputId);
day = new Date();
id = day.getTime();
URL = URL+"?inputId="+inputId;
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=1,statusbar=0,menubar=0,resizable=1,width=250,height=800 left = 630,top = 502');");
}
function getDetails(inputId,matVal,desc){
var inputRef = document.getElementById(inputId);
var tdRef = inputRef.parentNode;
var tdNextRef = testNextSibling(tdRef);
// alert("td Ref-->"+tdRef+"td next Ref-->"+tdNextRef);
var descRef = tdNextRef.firstChild;
// alert("Child ref-->"+descRef);
// alert("Current JSP-->"+matVal+"input Id-->"+inputId+"desc-->"+desc);
document.getElementById(inputId).value = matVal;
descRef.value = desc;
}
</script>
<title>JSP Page</title>
</head>
<body>
<f:view>
<h:form>
<br>
<h:panelGrid bgcolor="#9AC8E6" width="100%">
<h:dataTable id="d" value="#{SalesCreate.orderBean.itemList}" var="iBean" bgcolor="#9AC8E6" border="10" cellpadding="5" cellspacing="3" rows="10" width="100%" dir="LTR" frame="hsides" rules="all" >
<h:column>
<f:facet name="header">
<h:outputText style=""value="Material" />
</f:facet>
<h:inputText id="mat" value="#{iBean.material}" > </h:inputText>
<h:commandButton value="..." onclick="javascript:popUp('MaterialList.jsp',this)" > </h:commandButton>
<h:commandButton style="display:none" value="..." onclick="" > </h:commandButton>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Description" />
</f:facet>
<h:inputText id="desc" value="#{iBean.description}" > </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Unit" />
</f:facet>
<h:inputText value="#{iBean.unit}" > </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Quantity"/>
</f:facet>
<h:inputText value="#{iBean.quantity}"> </h:inputText>
<h:form>
<h:commandLink value="get Pricing" action="#{SalesCreate.pricingForQuotation}" >
<f:param name="mat" value="#{iBean.material}" />
<f:param name="unt" value="#{iBean.unit}" />
<f:param name="qty" value="#{iBean.quantity}" />
</h:commandLink> </h:form>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Unit Price" />
</f:facet>
<h:inputText value="#{iBean.netPrice}" > </h:inputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Total Price" />
</f:facet>
<h:inputText value="#{iBean.netTax}" > </h:inputText>
</h:column>
</h:dataTable>
</h:panelGrid>
</h:form>
</f:view>
</body>
popup.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script LANGUAGE="JavaScript">
function testNextSibling(buttonElement) {
try {
// alert(buttonElement);
var inputText = buttonElement.nextSibling;
while (inputText.nodeType!=1)
{
inputText =inputText.nextSibling;
}
alert("next sibling-->"+inputText.innerHTML);
return inputText.innerHTML;
} catch(ex) {
alert("bad " + ex);
}
}
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
function setMaterialValue(mat,matNum){
// alert("mat " + mat);
var desc = testNextSibling(mat);
// alert("Description-->"+desc);
var inputId = gup("inputId");
window.opener.getDetails(inputId,matNum,desc);
// window.opener.document.getElementById(mat).value;
window.close();
}
</script>
<title>JSP Page</title>
</head>
<f:view>
<body>
<h:dataTable id="datatbl" value="#{SalesCreate.inquiryMaterialList}" var="materialList" bgcolor="#9AC8E6" border="10" cellpadding="5" cellspacing="3" rows="3000" width="100%" dir="LTR" rules="all">
<h:column>
<f:facet name="header">
<h:outputText style=""value="Material" />
</f:facet>
<h:form>
<h:commandLink style="" id="materialId" value="#{materialList.material}" onclick="javascript:setMaterialValue(this,#{materialList.material})" ></h:commandLink>
<h:outputText style="display:none" value="#{materialList.description}"></h:outputText>
</h:form>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style=""value="Description" />
</f:facet>
<h:form>
<h:commandLink style="" value="#{materialList.description}" onclick="javascript:setDescriptionValue(#{materialList.description})" ></h:commandLink></h:form>
</h:column>
</h:dataTable>
</body>
</f:view>
I've tried using a commandLink but I want it to be done when the textfield looses its focus or something similar
