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

Question

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

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

So this 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.

How about having the PHP script output the element ID and the text, then use a callback function to add the text to the element? — gen_Eric
– gen_Eric, Commented May 26, 2011 at 19:39
Hello I edited out the ID part of the above it was a mistake. All I need to do is append the the string 'TEST' (which will be from a php array) onto the the correct part of the html. I don't know what you mean by having php output the TEST? Do you mean echo? If I echo it I wouldn't know how to then use a callback function to add it to the element. — James
– James, Commented May 26, 2011 at 19:45
java script isn't transferable with AJAX. If you switch to jQuery, you will not face that problem. I know it because having similar problem. — RRStoyanov
– RRStoyanov, Commented May 26, 2011 at 19:48
First off, I'd recommend just using something like JSON to pass things from PHP to JavaScript. There's not really a great reason to have PHP generate a JS code snippet in this way. But anyway, what are you doing with the XML HTTP request object? As is, any response it's getting will be stored in xmlObj.responseText as plain text, not doing anything. Because of the script tags, it seems like it would be more difficult than necessary to append it to the body of your HTML, and eval() won't work. — brymck
– brymck, Commented May 26, 2011 at 19:58
Yes I didn't know it was stored in that responsetext variable. The answer below solves it nicely. Thanks for the reponse, much appreciated. — James
– James, Commented May 26, 2011 at 20:28

Midas · Accepted Answer · 2011-05-26 19:59:44Z

3

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.

answered May 26, 2011 at 19:59

Midas

7,1695 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Thanks so much! That is exactly what I needed. I am new to javascript so I wasn't aware you could do it that way, yours is a much cleaner approach.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

ajax.php

Javascript

ajax.php

Javascript

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

ajax.php

Javascript

ajax.php

Javascript

Comments

Your Answer

Sign up or log in

Post as a guest

Related