access to an event from a function within a function

**tlacaelelrl** · May 11, 2011 18:47

I have this script

Code HTML4Strict:

<head>
<style type="text/css">
.correct_field
	{
		padding-right:18px;
		background:url("http://www.sitepoint.com/forums/images/correct_field.png") no-repeat 100% 0;
	}
.incorrect_field
	{		
		padding-right:18px;
		background:url("http://www.sitepoint.com/forums/images/incorrect_field.png") no-repeat 100% 0;
	}		
</style>
<script type="text/javascript">
var thefield;
var thevalue;
var NOnumbershere=new RegExp(/\d/);
var NOsymbolshere=new RegExp(/[+.,*ª!"·$%&()= ?¿¡º^`´ç;:_-]/);
function check_text_field(event)
	{
		thefield=event;
		thevalue=thefield.value;
		numbers();
	}
function numbers(event)
	{
if (NOnumbershere.test(thevalue) == true)
{
thefield.className="incorrect_field";
}
	}
</script>
</head>
<body>
<input type="text" id="test" onchange="check_text_field(this)" />
</body>

Which does not work, what I am trying to acomplish is set the class of an object, if I do the whole thing inside a function it all works, however if I create another function that calls a second function it does not, how could I use the object that fired the event in the numbers() function?

**tlacaelelrl** · May 11, 2011 19:37

I have just figured that my problem is something else, but don´t really know what it is, I have done some tests with a smaller script, this one to be exact

Code JavaScript:

var NOnumbershere=new RegExp(/\d/);
var NOsymbolshere=new RegExp(/[+.,*ª!"·$%&()= ?¿¡º^`´ç;:_-]/);
function check_text_field2(event)
{
thefield=event;
thevalue=thefield.value;
thevaluetolower=thevalue.toLowerCase();
numbers2();
}
function numbers2()
{
if (NOnumbershere.test(thevaluetolower) == true)
{
thefield.className="incorrect_field";
}}

It works just fine when I use it, however my problem starts when I try to implement it in another page, I have a page that is loaded with a menu, one of the menu options calls another page (ajax) and loads inside a div the script above with some fields, when I check using firebug the script is loaded, however when I call the function the script does not work and firebug produces an error

"check_text_field2 is not defined"

but it is defined, why doesn´t it work? or am I doing something wrong?

**paul_wilkins** · May 11, 2011 21:51

Originally Posted by tlacaelelrl

"check_text_field2 is not defined"

but it is defined, why doesn´t it work? or am I doing something wrong?

There are many possible reasons why that may be happening on the page.

A look at a test page the exhibits the problem will help us to provide a rapid solution.

**tlacaelelrl** · May 11, 2011 23:07

Originally Posted by paul_wilkins

There are many possible reasons why that may be happening on the page.

A look at a test page the exhibits the problem will help us to provide a rapid solution.

here is a link to it

although you might want to see the original code which is this

Code PHP:

<?php
require_once ('../../includes/configuration/conf.php');
defined( 'app_killer' ) or die( 'Restricted access' );
?>
<script src="restricted/components/form/js.js" type="text/javascript"></script>
<style type="text/css">
.formcontainer
{
width:500px;
}
.consoleoferrors
{
text-align:left;
width:auto;
height:auto;
position:fixed;
top:auto;
bottom:auto;
right:10px;
background:red;
color:white;
}
.consoleoferrors2
{
text-align:left;
width:auto;
height:auto;
position:fixed;
bottom:10px
right:10px;
background:red;
color:white;
}
.correct_field
{
padding-right:18px;
background:url("../images/correct_field.png") no-repeat 100% 0;
}
.incorrect_field
{		
padding-right:18px;
background:url("../images/incorrect_field.png") no-repeat 100% 0;
}		
form.registration fieldset 
{
margin-bottom: 10px;
background: url("restricted/components/form/images/form-fieldset.gif") repeat-x scroll left bottom transparent;
}
form.registration legend 
{
padding: 0 2px;
font-weight: bold;
}
form.registration label 
{
display: inline-block;
line-height: 1.8;
vertical-align: top;
width: 200px;
}
form.registration fieldset ol 
{
margin: 0;
padding: 0;
}
form.registration fieldset li 
{
list-style: none;
padding: 5px;
margin: 0;
background: url("restricted/components/form/images/form-divider.gif") repeat-x scroll left bottom transparent;
}
form.registration fieldset fieldset 
{
border: none;
margin: 3px 0 0;
}
form.registration fieldset fieldset legend 
{
padding: 0 0 5px;
font-weight: normal;
}
form.registration fieldset fieldset label 
{
display: block;
width: auto;
margin-left: 123px;
}
form.registration em 
{
font-weight: bold;
font-style: normal;
color: #f00;
}
form.registration fieldset input
{
border-top:0px;
border-right:0px;
border-left:medium #85b9e9 double;
border-bottom:medium #85b9e9 double;
}
* 
{
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; 
}
a:hover 
{
background:
#ffffff; 
text-decoration:none;
}
a.tooltip span 
{
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:auto;
}
a.tooltip:hover span
{
display:inline; 
position:absolute; 
border:1px solid #cccccc; 
background:#ffffff; 
color:#6c6c6c;
}
</style>
<?php
//variables.php
$regular_text_fields=array ($name, $onames, $lastn1, $lastn2);
$email_text_fields=array ($email, $emailc);
$password_text_fields=array ($password, $passwordc);
$field_labels=array ($name, $onames, $lastn1, $lastn2, $email, $emailc, $password, $passwordc);
$counter_f_l=0;
$field_labelstt=array ($namett, $onamestt, $lastn1tt, $lastn2tt, $emailtt, $emailctt, $passwordtt, $passwordctt);
$counter_f_l_tt=0;
$counter_r_t_f=0;
$counter2_r_t_f=4;
$counter_e_t_f=0;
$counter2_e_t_f=2;
$counter_p_t_f=0;
$counter2_p_t_f=2;
?>
<div id="formcontainer">
<form id="registration" class="registration" action="../../../libraries/users/students/reg_post.php" method="post" name="registration">
<fieldset>
<legend><?php echo "$userdata"; ?></legend>
<ol>
<input type="hidden"  value="1" id="buttonvalue">
<?php
//build_form.php
while ($counter2_r_t_f>0)
{
$counter2_r_t_f --;
echo '<li><label for="' . $field_labels[$counter_f_l] . '">' . $regular_text_fields[$counter_r_t_f] . '</label><input type="text" name="' . $field_labels[$counter_f_l] . '" id="' . $field_labels[$counter_f_l] . '" onchange="check_text_field2(this)"><a class="tooltip"><img align="right" src="restricted/templates/site/basic/images/icons/info.png"/><span>' . $field_labelstt[$counter_f_l_tt] . '</span></a></li>';
$counter_r_t_f ++;
$counter_f_l_tt ++;
}
while ($counter2_e_t_f>0)
{
$counter2_e_t_f --;
echo '<li><label for="' . $field_labels[$counter_f_l] . '">' . $email_text_fields[$counter_e_t_f] . '</label><input type="text" name="' . $field_labels[$counter_f_l] . '" id="' . $field_labels[$counter_f_l] . '"><a class="tooltip"><img align="right" src="restricted/templates/site/basic/images/icons/info.png"/><span>' . $field_labelstt[$counter_f_l_tt] . '</span></a></li>';
$counter_e_t_f ++;
$counter_f_l_tt ++;
}
while ($counter2_p_t_f>0)
{
$counter2_p_t_f --;
echo '<li><label for="' . $field_labels[$counter_f_l] . '">' . $password_text_fields[$counter_p_t_f] . '</label><input type="text" name="' . $field_labels[$counter_f_l] . '" id="' . $field_labels[$counter_f_l] . '"><a class="tooltip"><img align="right" src="restricted/templates/site/basic/images/icons/info.png"/><span>' . $field_labelstt[$counter_f_l_tt] . '</span></a></li>';
$counter_p_t_f ++;
$counter_f_l_tt ++;
}
?>
</ol>
</fieldset>
</form>
</div>

all files referenced and also all the variables that are called exist

**paul_wilkins** · May 11, 2011 23:40

On the web page, the NOnumbershere variable is contained within the check_text_field_2() function. That reduces its visibility to within that function, or to whatever retains the scope of that function.

A useful idea would be to pass the variable as a parameter to the numbers2() function, or if it's only going to be used in the numbers2() function, to move the variable out of the the parent function and in to numbers2() instead.

**tlacaelelrl** · May 11, 2011 23:52

Originally Posted by paul_wilkins

On the web page, the NOnumbershere variable is contained within the check_text_field_2() function. That reduces its visibility to within that function, or to whatever retains the scope of that function.

A useful idea would be to pass the variable as a parameter to the numbers2() function, or if it's only going to be used in the numbers2() function, to move the variable out of the the parent function and in to numbers2() instead.

I actually ,oved the variable inside that function thinking that might help overcome the problem, but in the inicial script I had it outside the functions, however that does not solve the problem, if you hapen to have firebug tipe any number in the first field then click outside of it and firebug will give you an error stating that the function is not defined which, as you can see, is defined

**paul_wilkins** · May 11, 2011 23:56

Originally Posted by tlacaelelrl

will give you an error stating that the function is not defined which, as you can see, is defined

I thought we were talking about the variable? Do you have a function not defined error as well?

**tlacaelelrl** · May 12, 2011 00:06

Originally Posted by paul_wilkins

I thought we were talking about the variable? Do you have a function not defined error as well?

that is my actual problem look at this

Code JavaScript:

<head>
<style type="text/css">
.correct_field
	{
		padding-right:18px;
		background:url("http://www.sitepoint.com/forums/images/correct_field.png") no-repeat 100% 0;
	}
.incorrect_field
	{		
		padding-right:18px;
		background:url("http://www.sitepoint.com/forums/images/incorrect_field.png") no-repeat 100% 0;
	}		
</style>
<script type="text/javascript">
var NOnumbershere=new RegExp(/\d/);
var NOsymbolshere=new RegExp(/[+.,*ª!"·$%&()= ?¿¡º^`´ç;:_-]/);
function check_text_field2(event)
	{
		thefield=event;
		thevalue=thefield.value;
		thevaluetolower=thevalue.toLowerCase();
		check();
	}
function check()
{
if (NOnumbershere.test(thevaluetolower) == true)
{
thefield.className="incorrect_field";
}
else if (NOsymbolshere.test(thevaluetolower) == true)
{
thefield.className="incorrect_field";
}
else
{
thefield.className="correct_field";
}
}
 
</script>
</head>
<body>
<input type="text" id="test" onkeyup="check_text_field2(this)"  />
</body>

that script works just fine no errors, the problem is when I try to use that script with php, php is writing all the functions as well all the fields and it does it fine, if I check the source in firebug php did what it was supposed to, but for some reason the javascript does not work, it gives me an undefined variable, here is the way I am adding the fields in the form

Code PHP:

while ($counter2_r_t_f>0)
{
$counter2_r_t_f --;
echo '<li><label for="' . $field_labels[$counter_f_l] . '">' . $regular_text_fields[$counter_r_t_f] . '</label><input type="text" name="' . $field_labels[$counter_f_l] . '" id="' . $field_labels[$counter_f_l] . '" onchange="check_text_field2(this)"><a class="tooltip"><img align="right" src="restricted/templates/site/basic/images/icons/info.png"/><span>' . $field_labelstt[$counter_f_l_tt] . '</span></a></li>';
$counter_r_t_f ++;
$counter_f_l_tt ++;
}

that code does add all the fields correctly and applies the onchange="check_text_field2(this)" to all of them however when the onchange event ocurs the script does not work

**paul_wilkins** · May 12, 2011 00:21

Originally Posted by tlacaelelrl

that code does add all the fields correctly and applies the onchange="check_text_field2(this)" to all of them however when the onchange event ocurs the script does not work

Can that been experienced at the link you provided before?

**tlacaelelrl** · May 12, 2011 00:27

Originally Posted by paul_wilkins

Can that been experienced at the link you provided before?

yes it can.

**tlacaelelrl** · May 12, 2011 00:30

I dont know what might be the problem, I have created a new file, this one

Code PHP:

<?php
require_once ('../../includes/configuration/conf.php');
defined( 'app_killer' ) or die( 'Restricted access' );
?>
<?php
echo '
<script type="text/javascript">
var NOnumbershere=new RegExp(/\d/);
var NOsymbolshere=new RegExp(/[+.,*ª!"·$%&()= ?¿¡º^`´ç;:_-]/);
function check_text_field2(event)
	{
		thefield=event;
		thevalue=thefield.value;
		thevaluetolower=thevalue.toLowerCase();
		check();
	}
function check()
{
if (NOnumbershere.test(thevaluetolower) == true)
{
thefield.className="incorrect_field";
}
else if (NOsymbolshere.test(thevaluetolower) == true)
{
thefield.className="incorrect_field";
}
else if (thevaluetolower.length <= 1)
{
thefield.className="incorrect_field";
}
else
{
thefield.className="correct_field";
}
}
 
</script>
';
?>
<style type="text/css">
.formcontainer
{
width:500px;
}
.consoleoferrors
{
text-align:left;
width:auto;
height:auto;
position:fixed;
top:auto;
bottom:auto;
right:10px;
background:red;
color:white;
}
.consoleoferrors2
{
text-align:left;
width:auto;
height:auto;
position:fixed;
bottom:10px
right:10px;
background:red;
color:white;
}
.correct_field
{
padding-right:18px;
background:url("images/correct_field.png") no-repeat 100% 0;
}
.incorrect_field
{		
padding-right:18px;
background:url("images/incorrect_field.png") no-repeat 100% 0;
}		
form.registration fieldset 
{
margin-bottom: 10px;
background: url("images/form-fieldset.gif") repeat-x scroll left bottom transparent;
}
form.registration legend 
{
padding: 0 2px;
font-weight: bold;
}
form.registration label 
{
display: inline-block;
line-height: 1.8;
vertical-align: top;
width: 200px;
}
form.registration fieldset ol 
{
margin: 0;
padding: 0;
}
form.registration fieldset li 
{
list-style: none;
padding: 5px;
margin: 0;
background: url("form-divider.gif") repeat-x scroll left bottom transparent;
}
form.registration fieldset fieldset 
{
border: none;
margin: 3px 0 0;
}
form.registration fieldset fieldset legend 
{
padding: 0 0 5px;
font-weight: normal;
}
form.registration fieldset fieldset label 
{
display: block;
width: auto;
margin-left: 123px;
}
form.registration em 
{
font-weight: bold;
font-style: normal;
color: #f00;
}
form.registration fieldset input
{
border-top:0px;
border-right:0px;
border-left:medium #85b9e9 double;
border-bottom:medium #85b9e9 double;
}
* 
{
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; 
}
a:hover 
{
background:
#ffffff; 
text-decoration:none;
}
a.tooltip span 
{
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:auto;
}
a.tooltip:hover span
{
display:inline; 
position:absolute; 
border:1px solid #cccccc; 
background:#ffffff; 
color:#6c6c6c;
}
</style>
<?php
//variables.php
$regular_text_fields=array ($name, $onames, $lastn1, $lastn2);
$email_text_fields=array ($email, $emailc);
$password_text_fields=array ($password, $passwordc);
$field_labels=array ($name, $onames, $lastn1, $lastn2, $email, $emailc, $password, $passwordc);
$counter_f_l=0;
$field_labelstt=array ($namett, $onamestt, $lastn1tt, $lastn2tt, $emailtt, $emailctt, $passwordtt, $passwordctt);
$counter_f_l_tt=0;
$counter_r_t_f=0;
$counter2_r_t_f=4;
$counter_e_t_f=0;
$counter2_e_t_f=2;
$counter_p_t_f=0;
$counter2_p_t_f=2;
?>
<div id="formcontainer">
<form id="registration" class="registration" action="../../../libraries/users/students/reg_post.php" method="post" name="registration">
<fieldset>
<legend><?php echo "$userdata"; ?></legend>
<ol>
<input type="hidden"  value="1" id="buttonvalue">
<?php
//build_form.php
while ($counter2_r_t_f>0)
{
$counter2_r_t_f --;
echo '<li><label for="' . $field_labels[$counter_f_l] . '">' . $regular_text_fields[$counter_r_t_f] . '</label><input type="text" name="' . $field_labels[$counter_f_l] . '" id="' . $field_labels[$counter_f_l] . '" onkeyup="check_text_field2(this)"><a class="tooltip"><img align="right" src="../../templates/site/basic/images/icons/info.png"/><span>' . $field_labelstt[$counter_f_l_tt] . '</span></a></li>';
$counter_r_t_f ++;
$counter_f_l_tt ++;
}
while ($counter2_e_t_f>0)
{
$counter2_e_t_f --;
echo '<li><label for="' . $field_labels[$counter_f_l] . '">' . $email_text_fields[$counter_e_t_f] . '</label><input type="text" name="' . $field_labels[$counter_f_l] . '" id="' . $field_labels[$counter_f_l] . '"><a class="tooltip"><img align="right" src="../../templates/site/basic/images/icons/info.png"/><span>' . $field_labelstt[$counter_f_l_tt] . '</span></a></li>';
$counter_e_t_f ++;
$counter_f_l_tt ++;
}
while ($counter2_p_t_f>0)
{
$counter2_p_t_f --;
echo '<li><label for="' . $field_labels[$counter_f_l] . '">' . $password_text_fields[$counter_p_t_f] . '</label><input type="text" name="' . $field_labels[$counter_f_l] . '" id="' . $field_labels[$counter_f_l] . '"><a class="tooltip"><img align="right" src="../../templates/site/basic/images/icons/info.png"/><span>' . $field_labelstt[$counter_f_l_tt] . '</span></a></li>';
$counter_p_t_f ++;
$counter_f_l_tt ++;
}
?>
</ol>
</fieldset>
</form>
</div>

and it works fine, problem is, when I load that same file through ajax, can ajax disable the javascript functions?

**paul_wilkins** · May 12, 2011 00:30

I don't see a "function not defined" issue on that page. There is an undefined variable issue though.

So let's get our terminology straight. Are you experiencing a problem with a function not being defined, or a problem with a variable not being found.

**tlacaelelrl** · May 12, 2011 00:42

Originally Posted by paul_wilkins

I don't see a "function not defined" issue on that page. There is an undefined variable issue though.

So let's get our terminology straight. Are you experiencing a problem with a function not being defined, or a problem with a variable not being found.

a function is not being found

I think I might have found the problem, I was reading that the file returned by ajax is plain text, which I think means the javascript is not being executed those causing the functions no to be declared, do you know if there is any way I can call these functions? (the functions are loaded by ajax)

**paul_wilkins** · May 12, 2011 00:45

Originally Posted by tlacaelelrl

a function is not being found

I think I might have found the problem, I was reading that the file returned by ajax is plain text, which I think means the javascript is not being executed those causing the functions no to be declared, do you know if there is any way I can call these functions? (the functions are loaded by ajax)

I will stop trying to help with this issue until I am able to help in a beneficial manner.

**tlacaelelrl** · May 12, 2011 00:47

Originally Posted by paul_wilkins

I will stop trying to help with this issue until I am able to help in a beneficial manner.

lol, I think I am not explaining myself very clearly, thank you for all your help.

User Tag List

Thread: access to an event from a function within a function

Thread Tools

Display

access to an event from a function within a function

Bookmarks

Bookmarks

Posting Permissions