Topic: Clean value of input when use onKeyUpHandler function

Hi,
  I create a input using a onKeyUpHandler (bellow), this function get a field, the function to be executed and the time to work.
  What is happening is: I create this filed dynamically, so when the user doesn't anymore I do a
$objResposta->assign('div of field','innerHTML','');  to clean the div.... when the customer needs I create the field again with no value set.
   The problem is when I create the field again and try to get the value of the field I got the previous value not the empty one.
    The field has this:
<input type="text" name="nameoffield" id="idoffield" onclick="javascript:this.value='';if(this.onkeyup==null) onKeyUpHandler(this,'listSomething',400);" />
 
    Did someone have something near it?
 
                    function onKeyUpHandler(campo, funcao, tempo){
                        var searchTimeout;
                       campo.onkeyup = function (event)
                       {
                            var tecla = (window.Event) ? event.which : event.charCode;
                          if (typeof searchTimeout != "undefined") clearTimeout(searchTimeout);
                          if (typeof paramentro == "undefined") paramentro = "";
                          searchTimeout = setTimeout(funcao+"("+campo.id+","+tecla+")", tempo);
                       };
                    }

Re: Clean value of input when use onKeyUpHandler function

The function "funcao" I send the field object not the id value... so I try to use
field.value
this has the first value I set but if I do document.getElementById(filed.id).value I have different values

Re: Clean value of input when use onKeyUpHandler function

I tried this:

<?php
/**
 * 9/4/2013
 * Trying out clearing a div' innerhtml
 */
//Setup the xajax framework.
include_once("xajax/xajax_core/xajax.inc.php");
$xajax = new xajax();
$xajax->configure('javascript URI', 'xajax/');
//$xajax->configure('debug', true);

function clearinnerhtml(){
  $resp = new xajaxResponse();
  $resp->assign('mydiv','innerHTML','');
  return $resp;
}

function newinput()
{
$resp = new xajaxResponse();
  $resp->assign('mydiv','innerHTML','<input type="text" id="mytext" value="New Input"/> ');
  return $resp;
}
$xajax->register(XAJAX_FUNCTION,'clearinnerhtml');
$xajax->register(XAJAX_FUNCTION,'newinput');
$xajax->processRequest();
?>
<!DOCTYPE html>
<html>
<head>
<?php $xajax->printJavascript() ?>
</head>
<body>
<input type="button" value="Clear Div" onclick="xajax_clearinnerhtml()"/>
<input type="button" value="New Input" onclick="xajax_newinput()"/>
<div id="mydiv" name="mydiv" style="border: 1px solid black;height: 150px;">
<p>Test div...</p>
<input type="text" id="mytext"/>
</div>
</body>
</html>

The function clearinnerHTML() removed the input and p tags and they were not there using firebug or Chrome's tools.

They were there if I looked at the page source with either browser.

The other function, newinput(), added the input to the div tag as expected.

I don't fully understand your javascript functions...

Could you post the php and html for the entire page?

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Clean value of input when use onKeyUpHandler function

Using the multiply exemple I tested it follows the code:
multiply.php
<?php
require("multiply.common.php");

echo '<?xml version="1.0" encoding="UTF-8"?>'

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>xajax Multiplier</title>
        <?php $xajax->printJavascript(); ?>
        <script type="text/javascript" >
function onKeyUpHandler(campo, funcao, tempo){
    var searchTimeout;
   campo.onkeyup = function (event)
   {
        var tecla = (window.Event) ? event.which : event.charCode;
      if (typeof searchTimeout != "undefined") clearTimeout(searchTimeout);
      if (typeof paramentro == "undefined") paramentro = "";
      searchTimeout = setTimeout(funcao+"("+campo.id+","+tecla+")", tempo);
   };
}
    function testeFuncao(campo, tecla) {
        alert(campo+'|'+campo.value);
    }
</script>
    </head>
    <body>
        <div id="novotexto"><input type="text" name="x" id="x" value="2" size="3" onfocus="javascript:if(this.onkeyup==null) onKeyUpHandler(this,'testeFuncao',400);"/></div> *
        <input type="text" name="y" id="y" value="3" size="3" /> =
        <input type="text" name="z" id="z" value="" size="3" />
        <input type="text" name="a" id="a" value="" size="3" />
        <input type="button" value="Calculate" onclick="xajax_multiply(document.getElementById('x').value,document.getElementById('y').value);return false;" />
        <input type="button" value="Calculate" onclick="xajax_multiplya(document.getElementById('z').value);return false;" />
<input type="button" value="Novo Campo" onclick="xajax_novocampo();" />
    </body>
</html>

/*Multiply.server.php*/
<?php
function multiply($x, $y)
{
    $objResponse = new xajaxResponse();
    $objResponse->assign("z", "value", $x*$y);
    return $objResponse;
}
function multiplya($z)
{
    $objResponse = new xajaxResponse();
    $objResponse->assign("a", "value", $z);
    return $objResponse;
}
function novocampo()
{
    $objResponse = new xajaxResponse();
    $objResponse->assign('novotexto', "innerHTML", '<input type="text" name="x" id="x" value="7" size="3" onfocus="javascript:if(this.onkeyup==null) onKeyUpHandler(this,\'testeFuncao\',400);"/>');
    return $objResponse;
}

require("multiply.common.php");
$xajax->processRequest();
?>

When you focus on the field "x" and press a key it will display the value "2"... after that you press the button "Novo Campo" it will re-create the field "x", now if you focus on this new field and press a key it will display the first value not the new one.

This is happening on the Firefox with firebug... with a Chrome it didn't happen maybe is a firebug problem :-(

Re: Clean value of input when use onKeyUpHandler function

multiply.coomon.php
<?php


require_once ("../../xajax_core/xajax.inc.php");

$xajax = new xajax("multiply.server.php");
$xajax->setCharEncoding('ISO-8859-1');
$xajax->setFlag("decodeUTF8Input",true);
$xajax->configure('javascript URI','../../');
$xajax->register(XAJAX_FUNCTION,"multiply");
$xajax->register(XAJAX_FUNCTION,"multiplya");
$xajax->register(XAJAX_FUNCTION,"novocampo");
?>

Re: Clean value of input when use onKeyUpHandler function

Firefox is the problem. I think I have to destroy the keyuphandler before re-create the input, do you know how I can do it?

Re: Clean value of input when use onKeyUpHandler function

This happens just with Firefox browser when I create 2 time the same input.id and use a keyhuphadler... I already tried to clearTimeout to solve the problem but it didn't work... the solution is not create the same input on the page.

Re: Clean value of input when use onKeyUpHandler function

From http://www.xajax-project.org/en/docs-tu … vehandler/

Function: removeHandler


function removeHandler($sTarget,$sEvent,$sHandler)
Parameters:
sTarget (string) The id of the element.
sEvent (string) The name of the event.
sHandler (string) The javascript function that is called when the event is fired.
Returns:
object The object.

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Clean value of input when use onKeyUpHandler function

I tried but it's getting the same error. I wrote a new version of multiply

http://pastebin.com/ess9qRHw

When you focus on the first field it's set a keyup event you press any key it will show the value and the time on a div... if you press "novo campo" the filed X is recreated, when you press any key there again it will take the value before you had clicked on "Novo campo" button

I named the function set on the keyuphandler and call before re-create the field:
$objResponse->removeHandler('x','onkeyup','keyupevent');
should be enough?

Re: Clean value of input when use onKeyUpHandler function

Well I messed with your code and have it working. I combined it into one file so it is easier to follow...

<?php
/*
    File: multiply.php

    Example which demonstrates a multiplication using xajax.
    
    Title: Multiplication Example
    
    Please see <copyright.inc.php> for a detailed description, copyright
    and license information.
*/

/*
    Section: Files
    
    - <multiply.php>
    - <multiply.common.php>
    - <multiply.server.php>
*/

/*
    @package xajax
    @version $Id: xajax.inc.php 362 2007-05-29 15:32:24Z calltoconstruct $
    @copyright Copyright (c) 2005-2007 by Jared White & J. Max Wilson
    @copyright Copyright (c) 2008-2009 by Joseph Woolley, Steffen Konerow, Jared White  & J. Max Wilson
    @license http://www.xajaxproject.org/bsd_license.txt BSD License
*/
require_once ("xajax/xajax_core/xajax.inc.php");

$xajax = new xajax();
$xajax->configure('javascript URI','xajax/');
//$xajax->configure('debug', true);
$xajax->register(XAJAX_FUNCTION,"multiply");
$xajax->register(XAJAX_FUNCTION,"multiplya");
$xajax->register(XAJAX_FUNCTION,"novocampo");

function multiply($x, $y)
{
    $objResponse = new xajaxResponse();
    $objResponse->assign("z", "value", $x*$y);
    return $objResponse;
}
function multiplya($z)
{
    $objResponse = new xajaxResponse();
    $objResponse->assign("a", "value", $z);
    return $objResponse;
}

function novocampo()
{
    $objResponse = new xajaxResponse();
    $objResponse->removeHandler('x','onkeyup','testeFuncao'); //NOTE the parameters
    $objResponse->assign('novotexto', "innerHTML", '<input type="text" name="x" id="x" value="7" size="3" onfocus="javascript:if(this.onkeyup==null) onKeyUpHandler(this,\'testeFuncao\',400);"/>');
    $objResponse->assign('teste', "innerHTML","");  
    return $objResponse;
}

$xajax->processRequest();


echo '<?xml version="1.0" encoding="UTF-8"?>'

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>xajax Multiplier</title> 
        <?php $xajax->printJavascript(); ?> 
        <script type="text/javascript" >
    function onKeyUpHandler(campo, funcao, tempo){
      
      var searchTimeout;
       campo.onkeyup = function keyupevent(event) 
       {
          var tecla = (window.Event) ? event.which : event.charCode;
          if (typeof searchTimeout != "undefined") clearTimeout(searchTimeout);
          if (typeof paramentro == "undefined") paramentro = "";
          searchTimeout = setTimeout(funcao+"("+campo.id+","+tecla+")", tempo);
       };
    }
    function testeFuncao(campo, tecla) 
    {
      var today=new Date();
      var h=today.getHours();
      var m=today.getMinutes();
      var s=today.getSeconds();
      document.getElementById('teste').innerHTML = campo.value+"|"+h+":"+m+":"+s;
    }
    </script>
    
    </head> 
    <body> 
        <div id="novotexto">
    <input type="text" name="x" id="x" value="2" size="3" onfocus="javascript:if(this.onkeyup==null) onKeyUpHandler(this,'testeFuncao',400);"/>
    * 
    </div>
        <input type="text" name="y" id="y" value="3" size="3" /> = 
        <input type="text" name="z" id="z" value="" size="3" /> 
        <input type="text" name="a" id="a" value="" size="3" /> 
        <input type="button" value="Calculate" onclick="xajax_multiply(document.getElementById('x').value,document.getElementById('y').value);return false;" />
        <input type="button" value="Calculate" onclick="xajax_multiplya(document.getElementById('z').value);return false;" />
    <input type="button" value="Novo Campo" onclick="xajax_novocampo();" />
    
<div id="teste"></div>

    </body> 
</html>

Hope this helps...

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Clean value of input when use onKeyUpHandler function

I'm still getting the same error... which Firefox version are you using?
On the video bellow you can check what is happening.
http://www.youtube.com/watch?v=IGssJxp6 … e=youtu.be

Re: Clean value of input when use onKeyUpHandler function

Did you do this:

$objResponse->removeHandler('x','onkeyup','testeFuncao')

in novocampo()?

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Clean value of input when use onKeyUpHandler function

I did... I also tried to
$objResponse->removeHandler('x','onkeyup','keyupevent');

Do you know JavaScript code to destroy all data from a object?
I already tried save the id of the setTimeout and do a clearTimeout but it also haven't solved.

Re: Clean value of input when use onKeyUpHandler function

Have you copied my last code and tried it on your system?

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Clean value of input when use onKeyUpHandler function

Yes, the video I recorded it's using your code.
Did you use the firefox? if so which version?

Re: Clean value of input when use onKeyUpHandler function

Well, I have egg on my face...
I guess I only tried Chrome. I have messed further and come up with this:

<?php
//disallow caching
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
require_once ("xajax/xajax_core/xajax.inc.php");

$xajax = new xajax();
$xajax->configure('javascript URI','xajax/');
//$xajax->configure('debug', true);
$xajax->register(XAJAX_FUNCTION,"novocampo");



function novocampo()
{
    $objResponse = new xajaxResponse();
    //$objResponse->removeHandler('x','onkeyup','testeFuncao');
    //$objResponse->assign('novotexto', "innerHTML", 
    //                     '<input type="text" name="x" id="x" value=7 size="3" 
    //                     onfocus="javascript:onKeyUpHandler(this,\'testeFuncao\');"/>');
    $objResponse->assign('x','value','7');
    $objResponse->assign('teste', "innerHTML","");  
    return $objResponse;
}

$xajax->processRequest();



?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>xajax Multiplier</title> 
        <?php $xajax->printJavascript(); ?> 
        <script type="text/javascript" >
    function onKeyUpHandler(campo, funcao, tempo){
      
      var searchTimeout;
       campo.onkeyup = function keyupevent(event) 
       {
          var tecla = (window.Event) ? event.which : event.charCode;
          if (typeof searchTimeout != "undefined") clearTimeout(searchTimeout);
          if (typeof paramentro == "undefined") paramentro = "";
          searchTimeout = setTimeout(funcao+"("+campo.id+","+tecla+")", tempo);
       };
    }
    function testeFuncao(campo, tecla) 
    {
      var today=new Date();
      var h=today.getHours();
      var m=today.getMinutes();
      var s=today.getSeconds();
      xajax.$('teste').innerHTML = campo.value+"|"+h+":"+m+":"+s;
    }
    </script>
    
    </head> 
    <body> 
        <div id="novotexto">
    <input type="text" name="x" id="x" value="2" size="3" onfocus="javascript: onKeyUpHandler(this,'testeFuncao');"/>
    </div>
        
    <input type="button" value="Novo Campo" onclick="xajax_novocampo();" />
    
<div id="teste"></div>

    </body> 
</html>

Tested with FF and it works...

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Clean value of input when use onKeyUpHandler function

Hi,
   If I just create once the field and to a keyuphandler event it will work perfectly. What I would like is create the field again and re-create the keyuphandler.
   I developed a form that the user can choose some "part" to appear, so also, he can close the other parts to close. The form is created by dynamic so if he open a part two times it will create just one field because it had been erased the first one when he closed it. But when I use the keyuphandler it have this problem.
    Do you know other way to make the keyup event start just after a few seconds after the user have stopped typing?

Thank you for your help!

Re: Clean value of input when use onKeyUpHandler function

You could use the onblur event to handle the field when the user leaves it

Do a JS to hide it with css, do whatever with the value and clear the field.

Another js to handle showing the file.


This would do away with the key handlers all together.

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Clean value of input when use onKeyUpHandler function

Yes, that's what I will do (hide the field).
I can't use the onblur because the user doesn't need to get out the field to start the event.
What I want to do is reduce the incoming request for the server, so I have to wait a few seconds to wait the user wrote at least a few chars before make the search...

Thank you again!