js script loaded into div with ajax doesn't work

[bugboy]

I have a page being generated with PHP, it includes a DIV who's content gets swapped with ajax. the new content contains the following function call PHP echo'd inside the parent DIV.

The code works fine when originally loaded in the DIV but not when it's been swapped there with ajax.

Should i be putting the function call somewhere else in the code? The $row_num needs to reflect the row number originally clicked to call the ajax function.

Ok i'm going to attempt to post the actually code.. the Bytes system always looses when i submit.. it cuts it off at the first close code tag. sorry it won't let me post the code.. keeps cutting it off...

here are the functions:

function el(tid) 
    {
    return document.getElementById(tid);
    }
 
    el(\'focus_here\').onkeydown=function(e)
                { 
                e=e||window.event;
                var kc = e.keyCode; 
                if(kc==13)
                    {
                    new_row(\''.$row_num.'\')
                    }
                    else
                    {
                    resize_textarea(this, \''.$indent_compensate.'\')
                    }
                }

Here is the new code to be added with ajax:

elseif($_SESSION['state'][$row_num]=='edit')
                {
                echo'<textarea id="focus_here" name="edit" rows="1" spellcheck="true" 
                onblur="save_edit_row(\''.$row_num.'\')" 
                onkeydown="resize_textarea(this, \''.$indent_compensate.'\')"  
                onfocus="resize_textarea(this, \''.$indent_compensate.'\')" '.
                $handle.'
                </textarea></div>';
                echo'<script type="text/javascript">
 
                document.getElementById(\'focus_here\').focus(); 
 
                el(\'focus_here\').onkeydown=function(e)
                { 
                e=e||window.event;
                var kc = e.keyCode; 
                if(kc==13)
                    {
                    new_row(\''.$row_num.'\')
                    }
                    else
                    {
                    resize_textarea(this, \''.$indent_compensate.'\')
                    }
                }
                </script>';
 
                }

[bugboy]

Ok i'm going to attempt to post all the code

[bugboy]

ok finally managed to get all the code into the first post by editing it.

[gits]

when you 'load' JavaScript-code with ajax then you have to eval() it explicitly since this is not similar to a 'normal' page-load and the code isn't evaled and you cannot use it.

kind regards

[bugboy]

Cool! I've been trying everything..

Ok.. so I've read about it and tried eval()ing different things and i'm afraid i just don't get it.. it seems that it only needs to be used for some parts of the code.. but which ones.. any further help would be greatly appreciated!

here is one of many stabs at it..

                echo'<script type="text/javascript">
 
                document.getElementById(\'focus_here\').focus(); 
 
                eval(el(\'focus_here\').onkeydown=function(e))
                { 
                eval(e=e||window.event);
                eval(var kc = e.keyCode); 
                eval(if(kc==13)
                    {
                    new_row(\''.$row_num.'\')
                    }
                    else
                    {
                    resize_textarea(this, \''.$indent_compensate.'\')
                    }
                })
 
 
                </script>';

[gits]

nope ... you need to have the JavaScript-code to be evaled at the client ... so you might echo it to a certain element like a hidden textarea. then get it in your callback from that div and eval the code ... i hope you get the basic idea?

tha callback is the function that is assigned to you request's onreadystate-handler.

kind regards

[bugboy]

i'm so lost.. sorry... i though i understood how this all works but i'm getting muddled..

Does echoing it to an element mean putting it inside the element's tags? When does the call back happen.. are you talking about when the code if first sent to the page.. or when, in this case, the 'return' key is hit.. which would be the second ajax request.

Even just hearing this said in a different way may help, i'm self teaching so my understanding or lack of the vocabulary may be to blame. I Think i understand the principles just not clear the order or location of the actions needed..

arrrg

[bugboy]

Ok i Got it... it was way simpler than i was making it.. i just put it into an onkeyup event and it worked duh.. i was trying to put i outside the textarea in <script> tags... it still confuses me because it's acting on the onkeydown=function(e) thing.. i'm learning by trial and error so i find solutions that i don't understand..

thanks for you help, much appreciated.

onkeyup="el(\'focus_here\').onkeydown=function(e)
                { 
                e=e||window.event;
                var kc = e.keyCode; 
                if(kc==13)
                    {
                    new_row(\''.$row_num.'\')
                    }
                    else
                    {
                    resize_textarea(this, \''.$indent_compensate.'\')
                    }
                }" 

[gits]

?? it is working now? the confusion is right ;) ... in case you have the same event-handler already before your update then it works with those one and not with your new one ... since the new one is not available since it isn't evaled in your page ...

basicly things follow the following schema:

- webpage is loaded
- html and javascript is parsed and evaled

-> page and code works

- you make an ajax-request and get html-code & javascript-code
- you add it to a div
- the html is rendered into the DOM
- the script is not parsed and evaled ... so this should be done explicitly ...

-> just seperate the js-code in any way like writing (echoing) it to a hidden element - then retrieve it from there and eval this 'text' that the script-code is in this moment ... that will make it available for use in the page ->

in case you don't need to change the handler ... then you could just leave out the js-code from the response ... this is the 'better' way ... the js-code typically shouldn't be loaded dynamically ... but this is just a rule of thumb that comes from my experience and someone could have another view on that matter ...

loading script-code dynamically makes it very difficult to maintain larger code-bases since the handling and code isn't well centralized and could be well debuged ... it would be better to centralize the scriptcode for a page and just update the content and not the behaviour ...

kind regards

[bugboy]

Thanks so much, you've been a great help!

Kind regards

Bugboy