CODEWITHSUNDEEP
javajavascriptjsfjakarta-ee
Mango
Mango

Reputation: 660

how to call a java function from javascript using JSF

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

Upvotes: 0

Views: 6414

Answers (2)

Maddy
Maddy

Reputation: 3816

   <h:inputText value="#{yourbackingBean.first}">
                <f:ajax event="blur" render="cm" listener="#{yourbackingBean.caluculate}"/>
     </h:inputText>
     h:inputText value="#{yourbackingBean.second}" id="cm"/>
          </h:form>

  • Here event can be your choice like
    blur,change,keyup,keydown etc.........

    Listener is the method to be called when particular event triggered.

    Here caluclate is the method consist of logic to populate
    remaining fields in your jsp.

your Backing Bean 

          private int first=1;
          private int second=1;
    //Getters and Setters
     public void caluculate(AjaxBehaviorEvent evt)
       {
        second=first*1000;
       }

Upvotes: 1

Adeel Ansari
Adeel Ansari

Reputation: 39887

You can't. The most you can do is to make an AJAX request. Similar question has been answered here, How to access a java object in javascript from JSP?

Upvotes: 0

Related Questions