JavaScript for Visual Web JSF Components

[abhi.uppala]

Hi,

I am developing a web app in which, on page the input text field has default Text "Address Line 1". Now, when the user clicks on text field I want to clean up the value and empty the input field. I am having problem doing this with JavaScript.

Here is the JSP of the element:

<webuijsf:form binding="#{SignUp.signup1}" id="signup1" style="background-color: #ccccff; height: 456px; left: 0px; top: 96px; position: absolute; width: 1200px">
<webuijsf:textField binding="#{SignUp.add1}" columns="40" id="add1" immediate="true" style="left: 240px; top: 240px; position: absolute" text="Address Line 1"/>
</webuijsf:form>

The JavaScript is:

document.signup1.add1.value="";

This did not work.

I then tried

document.signup1.add1.value="";

Even this did not work.

Kindly help me on this

Thanks
Abhishek Uppala

[Christopher Lam]

You can't use the IDs, in your case, "add1", as it is because the tag converts it to another ID with some prefix. Do a view source in your browser and you will know what I mean.

If you know the position of the field, e.g. if "add1" is the 2nd field in the form, you can do this:

document.forms[0].elements[1].value = "";

Hope this help,

Christopher Lam

On 22-Dec-2009, at 11:13 PM, abhi.uppala wrote:

[abhi.uppala]

[Christopher Lam]

Hi,

elements is an array and takes in only integers within the square brackets. My earlier example below assumes that the add1 field is the 2nd element in the form.

Anyway, If you want to use the ID of the element, you have to do this:

<script language="JavaScript">
function setNull()
{
add1Elem = document.getElementById("_signup1:add1");
add1Elem.value = "";
}
</script>

Regards,

Christopher Lam

On 23-Dec-2009, at 12:54 AM, abhi.uppala wrote:

[abhi.uppala]

Hi Chris,

I understand this may be painful to you, but I am worried it is still not working for me.

Here is the code snippet:

<webuijsf:head>
<script type="text/javascript">
function setNull()
{
add1Elem = document.getElementById("_signup1:add1");
add1Elem.value = "";

}
</script>
</webuijsf:head>
<webuijsf:body id="body1" style="-rave-layout: grid">
<webuijsf:form id="form1"/>
..............................
..............................
..............................
<webuijsf:textField binding="#{SignUp.add1}" columns="40" id="add1" immediate="true" onClick="return setNull();" style="left: 240px; top: 240px; position: absolute" text="Address Line 1"/>
..............................
..............................
</webuijsf:form>
</webuijsf:body>
</webuijsf:html>

[jyeary]

Without knowing which version of Woodstock you are using, take a look at the TLD for the component.

Try something like

[jyeary]

Here is my sample project using NB 6.5.1

On Thu, Dec 24, 2009 at 3:32 PM, John Yeary <address-removed ([email]address-removed[/email])> wrote:

[abhi.uppala]

Hi jyeary

Thanks for your script. I could modify it to fit my need.

Now that it is working, I would like to know what is the difference between using <script> and <webuijsf:script>

Thanks
Abhishek Uppala



[quote="jyeary"]Here is my sample project using NB 6.5.1

On Thu, Dec 24, 2009 at 3:32 PM, John Yeary <address-removed ([email]address-removed[/email])> wrote:

[abhi.uppala]

I would also like to get directions towards any material available for Javascript in Visual Web JSF. NetBeans does not give inline suggestions for <webuijsf:script>.

I am trying to validate whether two input fields are equal in onChange event and it is not working.

This is what I tried:
<webuijsf:script>
function verifyvalue()
{
var node1=document.getElementById('form2:value1');
var node2=document.getElementById('form2:value2');
var value1=node1.getProps({value});
var value2=node2.getProps({value});
if(value1!=value2)
{
//do some action
}
}
</webuijsf:script>

<webuijsf:textInputField binding="#{SignUp.value2}" id="value2" immediate="true" onChange="setTimeout('verifyvalue();',0);return false;" style="left: 240px; top: 72px; position: absolute"/>


Thanks
Abhishek Uppala

[abhi.uppala]

I would also like to get directions towards any material available for Javascript in Visual Web JSF. NetBeans does not give inline suggestions for <webuijsf:script>.

I am trying to validate whether two input fields are equal in onChange event and it is not working.

This is what I tried:
<webuijsf:script>
function verifyvalue()
{
var node1=document.getElementById('form2:value1');
var node2=document.getElementById('form2:value2');
var value1=node1.getProps({value});
var value2=node2.getProps({value});
if(value1!=value2)
{
//do some action
}
}
</webuijsf:script>

<webuijsf:textInputField binding="#{SignUp.value2}" id="value2" immediate="true" onChange="setTimeout('verifyvalue();',0);return false;" style="left: 240px; top: 72px; position: absolute"/>


Thanks
Abhishek Uppala

[jyeary]

The <script> tag can be used, but it becomes a fixed element in your code. If you use the Woodstock <webuijsf:script> tag, you can inject your Javascript, or make dynamic changes to it by using the binding attribute of the tag.

On Mon, Dec 28, 2009 at 9:57 PM, abhi.uppala <address-removed ([email]address-removed[/email])> wrote:

[abhi.uppala]

I am again facing the same problem and am not able to figure this out. Here is the code:

<script type="text/javascript" language="JavaScript">
function handle(){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?"));


if (
strQueryString.indexOf("error") > -1 ){
var aParam = strQueryString.split("=");
strReturn = aParam[1];
if(strReturn=="some error")
alert("Something went wrong");
else if(strReturn=="db error")
alert("There was an error while registration.Please try again. Thank You!");

}
}
}

</script>

<webuijsf:body id="body1" style="-rave-layout: grid" onLoad="setTimeout('handle();',0);return false;">

i also tried <webuijsf:body id="body1" style="-rave-layout: grid" onLoad="return handle();return false;">

But none of this is displaying the alert box on page load

Kindly help me on this

Thanks
Abhishek Uppala