Calling JS from PHP

how do i get JS call to work from within a PHP page. Here is my stripped code. please note the multiple file names.

file1.php - calls JS function in file2.js (working fine).
file2.js - makes http_request to file3.php to do some stuff. (working fine)
file3.php - check some stuff in the db (working), then makes the following JS call to a <span> in file1.php (not working)

echo" <script language=Javascript><!--";
echo" document.getElementById('email_hint').style.visibility = 'visible';";
echo" //--></script>";

Code (markup):

file1.php <span> tag

<span id="email_hint" style="visibility:hidden;">Email all ready assigned to a member.</span>

HTML:

My questions is why does the <span> never hear/process the getElementById call? Could it be that the call to the *document.* only refers to elements in file3.php? What say you?

FYI, file3.php is all php, it has no HTML.

 

The code isn't working, cause it's returned as responseText, rather than being executed. When you make a http request whatever happens stays in the scope of the called object (in your case 'file3.php'). You can use session variables, etc., but the code is not loaded in the page, therefor JS cannot be executed from the requested object. When you make the request everything happens on the server, and JS is client-side.. Life would've been much much easier if the thing you are trying to do was working

You have to change the way things work. i.e. you can show that span when you get the responseText on your http request from the server.

 

that's not true, xlcho. you can get the output of an ajax request and you can choose to evaluate it or do whatever else you want with it...

check the ajax handler - if it's set to evaluate the response or evaluate scripts from the XHR request. Depends on what framework/javascript lib you use to handle this... For example, in mootools you'd do something like:

new Request({
    url: "file3.php",
    method: "get",
    evalScripts: true, // you can set this so any part of the response between <script> tags gets evaluated (run)
    evalResponse: false, // or it can eval the whole response,
    onComplete: function() {
        // or you can do something like this here:
        $("email_hint").show(); // if the response does not matter
        // but if it needs to control the output, eg, it's a form checker and one of your fields is wrong...
        // eval(this.response.text); // for this to work you need to remove the <script> tags.
    }
}).send(); // end XHR 

Code (markup):

so yes, it's very doable. bear in mind that the above won't work w/o the mootools javascript framework, but treat it as pseudo code and adapt to whatever you have

 

mootools YES... im using it in this project. its my first attemp at moo tools. can you point me to a full example using mootools and your example? Currently i use a separate XHR request script. if i can do it all within mootools thats sweet.

 

SOLUTION - Thanks to *Stryker250* and all other who helped me get on the right track.

(FYI.. trim() function is part of this lib - PHP to Javascript Project, http://kevin.vanzonneveld.net/techblog/article/phpjs_licensing/)

file2.js - Listened for the XHR "responseText" value sent back from the requested page. Depending on the reply, I did something.

        if (trim(http_request.responseText)=='email'){
            document.getElementById('email_hint').style.visibility = 'visible';
        }else if(trim(http_request.responseText)=='email_new'){
            document.getElementById('email_hint').style.visibility = 'hidden';
        }

Code (markup):

file3.php - Depending on what was PHP'd from data send by file2.js, I echo'd either "email" or "email_new". (As is in my script, nothing else can be echo'd on the page.)

 

dimitar christoff - still interested in your mootools usage though...

 

er, trim() is a part of mootools. so is clean() and more. _http://mootools.net/docs/Native/String
do not spend time duplicating work it can all do out of the box like the ajax or string functions. what's the point in using mootools otheriwse?

i don't get what you'd like about the mootools usage though.

to conform with your new file2.php - apparently you are returning a string and comparing against it... so probably something like that:

// mootools 1.2 request.xhr 
new Request({
    url: "file3.php",
    method: "get",
    onComplete: function() {
        $("email_hint").setStyle("display", (this.response.text.trim() == "case1") ? "none" : "block");
    }
}).send(); // end request

Code (markup):