Show dialog conditionally based on textbox value

sholly · 17 Aug 2010, 16:45

Hi folks,

In the project we are working on, we have a requirement that a popup be displayed based on the numeric value in a textbox. I was doing it with a little snippet of Javascript on the onblur method of the textbox, but it doesn't work in IE 8, which we have to support. Is there a better method of displaying a popup conditionally based on the value in a textbox?

17 Aug 2010, 16:53

Can you post your code? You can use p:ajax oncomplete event and pass request parameter callbacks. Example;

http://www.primefaces.org/labs/ui/dialogLogin.jsf

sholly · 17 Aug 2010, 18:05

Okay, so I rewrote the code based on the login demo.... and it works fine in Firefox 3.6.8, but not in Internet Explorer 8. I'm going to post my code (please note, we are using primefaces as a plugin inside a Grails project):

The textbox in question (composite):

Code: Select all

<p:outputPanel style="layout:block; background-color:grey">
	<i:textbox id="returnedQtyInput" value="#{issuesReturnsBean.editIssueLineInstance.returnedQty}" size="6" 
												   rendered="#{sec:ifAnyGranted('Roles.noRetun')}"
												   disabled="#{issuesReturnsBean.returnsDisabled}">
		<p:ajax event="blur" oncomplete="returnCheck(xhr, status, args);" actionListener="#{issuesReturnsBean.checkReturns}"/>		   
	</i:textbox>
</p:outputPanel>

The composite textbox:

Code: Select all

<!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:f="http://java.sun.com/jsf/core"
         xmlns:ui="http://java.sun.com/jsf/facelets"
         xmlns:composite="http://java.sun.com/jsf/composite"
         xmlns:p="http://primefaces.prime.com.tr/ui">
   <h:head>

   <title>This will not be present in rendered output</title>
		
   </h:head>

   <h:body>

   <composite:interface>
   	 <composite:attribute name="value" default="" required="true"/>
   	 <composite:attribute name="id" />
   	 <composite:attribute name="required" default="false" />
   	 <composite:attribute name="disabled" default="false" />
   	 <composite:attribute name="readonly" default="false" />
   	 <composite:attribute name="size" default="19" />
   	 <composite:attribute name="maxlength" default="255" />
   	 <composite:attribute name="onBlur" default="" />
   	 <composite:attribute name="onFocus" default=""/>
   	 
   	 
   </composite:interface>

   <composite:implementation>
   
    <h:outputText rendered="#{cc.attrs.required}"><div class="requiredTxt"><img src="/#{grailsApplication.metadata['app.name']}/images/textbox/icn_required_7x7.png" border="0" /></div></h:outputText>
    <h:outputText rendered="#{!cc.attrs.required}"><div class="requiredTxt">&nbsp;</div></h:outputText>
    <div class="leftTxt"></div>
    
    <p:outputPanel id="#{cc.attrs.id}-txt" display="block" styleClass="txt-middle-#{cc.attrs.disabled}">
    	<h:inputText id="#{cc.attrs.id}" required="#{cc.attrs.required}" disabled="#{cc.attrs.disabled}" readonly="#{cc.attrs.readonly}" 
   		             value="#{cc.attrs.value}" size="#{cc.attrs.size}" maxlength="#{cc.attrs.maxlength}" onblur="#{cc.attrs.onBlur}"   onfocus="#{cc.attrs.onFocus}">
   			<composite:insertChildren/>
   	    </h:inputText>
    </p:outputPanel>
    
   	<div class="rightTxt"></div>
   </composite:implementation>

   </h:body>

   </html>

The dialog tags:

Code: Select all

<div class="dialog">
           	<p:dialog header="#{m['module.issuesreturns.returns.dialogtitle']}" id="returnsDialog" 
           	widgetVar="returnsDialog" resizable="false" >
</p:dialog>
</div>

The backing bean code (groovy):

Code: Select all

     void checkReturns(ActionEvent ae) {

		if(editIssueLineInstance.returnedQty > 0) {
			renderReturns = true
		} else{
			renderReturns = false
		}
		RequestContext context = RequestContext.getCurrentInstance();
		context.addCallbackParam("renderReturns", renderReturns);
	}

And finally, the javascript code (I am just trying to show the dialog to make sure it works)
The javascript is in its own file:

Code: Select all

function returnCheck(xhr, status, args) {
	returnsDialog.show();
}

When I use Internet Explorer 8, I notice that I get an error on the page, specifically the error seems to be in the javascript file:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)

Message: Object doesn't support this property or method
Line: 129
Char: 2
Code: 0
URI: https://localhost:8443/Storeroom/js/application.js

Is there some reason why the dialog won't show itself?

sholly · 17 Aug 2010, 18:46

Fixed it... I gave the component the same name for both the id and the widgetVar, I changed the id of the dialog, and now everything works.

Show dialog conditionally based on textbox value

Who is online