Topic: dynamic row with onChange event

hello, i have a xajax generated row in my master-detail page, and each row contains a number of column field. one field contains a javascript event which is causing me problem when i delete a row. after deleting a row, i re-arrange the remaining rows' indexes. but the contents inside the javascript are not reflecting. here's a part of the code.

when adding the row,

function add_pur_row($table_id, $data, $form_id)
{
$id = $data['next'];

$obj = new xajaxResponse();
$obj->create($table_id,'tr','row_'.$id);
$obj->create('row_'.$id, 'td', 'txt_qty'.$id);
$obj->assign('txt_qty'.$id, 'innerHTML','<input type="text" id="qty_'.$id.'" name="qty_'.$id.'" style="width:50px;" onChange="compute_net_cost(this.value,document.getElementById(\'cost_'.$id.'\').value,\'net_cost_'.$id.'\');" value='.$data['input_qty'].'>');
}

when deleting the row,
function delete_pur_row($id, $data, $form_id
{
            $obj = new xajaxResponse();
           
            $obj->remove('row_'.$id);
           
            //reorder row #           
            $row_length = $data['next'];
            //$obj->script('alert('.$row_length.')');
            $current_id = $id;

            for ($i = $id + 1; $i < $row_length ; $i++) {
                 $obj->assign('row_'.$i, 'id', 'row_'.$current_id);
                               $obj->assign('txt_qty'.$i, 'id', 'txt_qty'.$current_id);
                 $obj->assign('qty_'.$i, 'name', 'qty_'.$current_id);
                $obj->assign('qty_'.$i, 'id', 'qty_'.$current_id);            
                 $obj->assign('qty_'.$i, 'value', 'qty_'.$current_id);
                 $obj->script('qty_'.$current_i, 'onChange', 'compute_net_cost(this.value,document.getElementById(\'cost_'.$current_id.'\').value,\'net_cost_'.$current_id.'\');');
                        }
}

am i using the $obj->script syntax correctly? i haven't find any related post from the web regarding this.

thanks very much for any help.

jina

Re: dynamic row with onChange event

Hi,

The script function takes a single string argument. I like to use double quotes so I can use single quotes without escaping them and I can use php variables as well.

btw $obj->alert('message string') so you don't need to script an alert.

Ed

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

Re: dynamic row with onChange event

hello ed,

thanks for the reply and the tip of using double quotes.

re my problem, so it should be,
$obj->script("compute_net_cost(this.value,document.getElementById(\'cost_'.$current_id.'\').value,\'net_cost_'.$current_id.'\');");

i want it to be reflected to the input element [qty_$current_id] as onChange event. the change is the cost_$current_id and net_cost_$current_id since a row is deleted.

thanks again!

jina

Re: dynamic row with onChange event

That should work but with the double quotes you do not need to escape the single quotes.

$obj->script("compute_net_cost(this.value,document.getElementById('cost_$current_id').value,net_cost_$current_id);");

When you use double quotes php replaces the $variable names with their values.

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

Re: dynamic row with onChange event

Hello, the $obj->script is not working.

i think i'll rephrase my question.

i have this dynamically xajax-added row,

<input type="text" id="text_1" name="text_1" onChange="compute(this.value, document.getElementById('amt_1');">
<input type="text" id="text_2" name="text_2" onChange="compute(this.value, document.getElementById('amt_2');">

when row1 has been deleted, the second row becomes row 1, so
<input type="text" id="text_2" name="text_2" onChange="compute(this.value, document.getElementById('amt_2');">
supposedly should become
<input type="text" id="text_1" name="text_1" onChange="compute(this.value, document.getElementById('amt_1');">,
but what happened is
<input type="text" id="text_1" name="text_1" onChange="compute(this.value, document.getElementById('amt_2');">

i couldn't get to change the onChange script. i used the following syntax to change the id and name index, but cannot change the onChange script index.
$obj->assign('text_'.$i, 'name', 'text_'.$current_id);
$obj->assign('text_'.$i, 'id', 'text_'.$current_id);   

any ideas?

thanks a lot!

Re: dynamic row with onChange event

Try using the response object setEvent() method.  $resp->setEvent($id, $event, $script);
There is also a removeHandler() method. $resp->removeHandler($id, $event, $script);

Take a look at the docs and tutorials page...

Ed

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

Re: dynamic row with onChange event

hello ed,

thanks a lot for the $resp->setEvent tip!!! it does work now. thank you!

thou i don't understand much what's the removeHandler for? did you mean clearEvents?

docs and tutorials page is kinda hard to use. i wouldn't know what or where to look for my problem. but thanks to you!!

regards,
jina

Re: dynamic row with onChange event

Remove handler removes an event handler from an element.

If you have an onclick handler on a button remove handler can disassociate the handler from the button.

Ed

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