php/ajax issue - advice required

[condoug]

Hi all

My problem is more related to ajax driven content (I think) so I hope it's OK to post here. In a nutshell, I am experiencing a strange problem in my PHP form.

I run an ajax function via an onchange event on a list box. This populates an empty DIV with the content dynamically created via the PHP script I call from my ajax function.

Inside that div (i.e. my ajax driven content) I have another list box which when you change it, it fires another ajax function to populate a 2nd div (so the 2nd div is a child of the 1st div)

The problem I have is that I cannot seem to run any javascript from inside that 2nd child div.

I.e. if I use this:

	    echo "<script type=\"text/javascript\" language=\"JavaScript\">\n<!--\nalert('this is a test');\n//-->\n</script>\n";

nothing happens at all, but if I put that same line of code inside the parent div it works fine!

Am i missing something here?

[Res]

It's not something that AJAX can do out of the box, and it's a little dangerous to enable such behaviour. The reason for this (as I understand) is the same reason you can't do cross domain requests, in defense against cross-site scripting attacks.

This is how I know how to do it, there is probably a better way as doing this is very ill advised.

Basically you have to extract the JS from the response string of the XMLHTTP object, then eval the string. This is a bad idea because of the eval function, it's just one letter way from being evil.

This function finds the <script> open and closing tags, then parses everything inbetween.

function parseStringEvalJS(input){
    var str = input;
    var startTag = str.indexOf("<script");
    var startLen = 8;
    var endTag =  str.indexOf("</script");
    var endLen = 9;

var startChar = startTag + startLen;
var endChar = endTag - startChar;

//check if we have code to parse.
if(startTag == -1 || endTag == -1){
   return true;
}else{
    //parse our whats in <script> tags.
    var code = str.substr(startChar, endChar);
    try{eval(code);}
    catch(err){}
    //get our new str minus the code.
    var newStr = str.substr(endTag+endLen);
    parseStringEvalJS(newStr);
}

return true;
}

Where I handle the request object, I add this little bit.

  if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
      obj.innerHTML = XMLHttpRequestObject.responseText;
      parseStringEvalJS(XMLHttpRequestObject.responseText);               

   }

So that part is just like normal, but after I load the content into my html object, I then run my JS Parser against it.

I'm extremely interested in other replies to this thread, as I know the method I just posted is less than ideal.