Pressing a button to run a php script which echos a javascript script

Here is the end of the javascript which runs when the button is clicked

xmlObj.open ('GET', /ajax.php, true);
xmlObj.send ('');
}

So thi开发者_高级运维s executes the php script ajax.php in the root directory:

<?php
echo "<script type='text/javascript'>\n";
echo "var e = document.getElementById('widget_more_');\n";
echo "e.innerHTML += '<p> <a>TEST</a> </p>';\n";
echo "</script>";
?>

Which is a javascript code that searches the html document for the element by id and appends the TEST link to it. I have ran this javascript in the html normally without trying to echo it through php and it works! BUT not when I try to do it through php! What am I doing wrong?

The reason I am doing it this way is because TEST is actually going to be a string from a php variable.

Please advise me.

Thanks.

---

Better would be:

ajax.php

<?php
$string = 'TEST';
echo $string;
?>

JavaScript

window.onload = function() {
    var e = document.getElementById('widget_more_');
    xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xmlhttp.open('GET', '/ajax.php', true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            e.innerHTML += '<p><a>' + xmlhttp.responseText + '</a></p>';
        }
    }
    xmlhttp.send(null);
}

I don't really understand why you can't use a PHP variable.

---

There isn't a whole lot of benefit of writing javascript inside of a php, typically that would just lead to unnecessary coupling of code. For future note however, it is possible to define javascript from PHP or any other server side language in a couple of ways.

The first would be simply striping the script tags from your php and calling eval from javascript:

ajax.php

<?php
echo "var e = document.getElementById('widget_more_');\n";
echo "e.innerHTML += '<p> <a>TEST</a> </p>';\n";
?>

Javascript

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //For function scope
        eval(xmlhttp.responseText);
        //For global scope
        window.eval(xmlhttp.responseText);
    }
}

Alternately a "slightly" more flexible solution:

ajax.php

<?php
echo "function showTest(){";
echo "    var e = document.getElementById('widget_more_');\n";
echo "    e.innerHTML += '<p> <a>TEST</a> </p>';\n";
echo "}";
?>

Javascript

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //Now we will dynamically create your script element in the header
        //Get the header element on the page
        var head= document.getElementsByTagName('head')[0];
        //Create the new script tag
        var script= document.createElement('script');
        script.type= 'text/javascript';
        script.innerHTML = xmlhttp.responseText;
        //Append the new script to the header
        head.appendChild(script);
        showTest();
    }
}

These examples are more for academic purposes than practical (although dynamically loading javascript has it's uses, see the google ajax api's). Both of these examples still leave your code heavily coupled. Midas's answer is a much more proper way of accomplishing what you are after.