Echoed Javascript Code from PHP Via AJAX Not Running

Question

My code is meant to get the author of an inputted book using the Google Books API via AJAX. If nothing is inputted it prints "Empty". What it actually does is print out the Javascript code when a book is inputted. When nothing is inputted, it prints "Empty" as it should. How could I modify my code to make the echoed Javascript execute and hence get the author of an inputted book?

Just to see, I replaced the echo part with echo "<script>document.getElementById('txtBox').innerHTML = 'Hello';</script>";. It also prints out the javascript code, so I don't think it has something to do with using the API.

getAuthor.html

<!DOCTYPE html>
<html>  
  <body>
 <!-- Input -->
    <div class="form">
      <form onsubmit="makeRequest(); return false">
        <input type="text" id="inputText" name="inputText">
        <input type="submit">
      </form>
    </div>
 
    <br>
    
    <!-- Output -->
    <div class="txtBox">
      <textarea  id="txtBox">
      </textarea>
    </div>
    
    <!-- AJAX to create output using jEcho.php file-->
    <script>
        function makeRequest() {
            httpRequest = new XMLHttpRequest();
            console.log(httpRequest.responseText);
            httpRequest.onreadystatechange = function() {               
                document.getElementById("txtBox").innerHTML = httpRequest.responseText;
            };
            httpRequest.open("POST", "jEcho.php", true);
            httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            httpRequest.send("inputText=" + document.getElementById("inputText").value);
        }

    </script>
  </body>
</html>

jEcho.php

<?php
$input = $_POST["inputText"];

if ($input == "") {
    echo "Empty";
} else {
    // used to parse
    // e.g. The Rosie Project -> The+Rosie+Project
    $temp = str_replace(" ", "+", $input);    
    
    // create appropiate source
    $scriptSource = "https://www.googleapis.com/books/v1/volumes?q=$temp&callback=handleResponse";
    
    echo "<script>
           function handleResponse(response) {
              var item = response.items[0];
              document.getElementById('txtBox').innerHTML = item.volumeInfo.authors[0];
            }
          </script>
          <script src='$scriptSource'></script>";
}
?>

Links

Echoing Javascript From PHP:

How to call a JavaScript function from PHP?

Echoing javascript from PHP

Google Books API:

https://developers.google.com/books/docs/v1/getting_started

https://developers.google.com/books/docs/v1/using

I don't understand why you are using ajax in jEcho.php? – Nishanth Matha Feb 20 '15 at 05:21 — Nishanth Matha, Feb 20 '15 at 05:21

score 1 · Answer 1 · answered Feb 20 '15 at 08:08

<script> elements are only run when your page is first loaded. Script elements created later on, either by assigning to an element's .innerHTML, creating them using document.createElement(), or otherwise, are not executed.

If you want to have a PHP script send back code to be evaluated, you'll have to do that directly, e.g:

httpRequest.onreadystatechange = function() {               
    eval(httpRequest.responseText);
};

(And remove the <script> tags from the response.)

But since I would remove the script tags how would I use the Google Books API via a url such as https://www.googleapis.com/books/v1/volumes?q=the+rosie+project&callback=handleResponse? — cycloidistic, Feb 20 '15 at 09:52

score 0 · Answer 2 · answered Feb 20 '15 at 05:40

0

Try setting header in jEcho.php file (not tested)

header('Content-Type: application/javascript');

answered Feb 20 '15 at 05:40

NeiL

791
8
35

I put it the line below ` – cycloidistic Feb 20 '15 at 05:44

score 0 · Answer 3 · answered Feb 20 '15 at 05:48

I'm not allowed to comment so:

I'm not certain what has caused it for but could <script src='$scriptSource'></script>"; be called before the handleResponse function. I'm not too sure what is causing it, at the moment, that is my best idea.

Also could you not just have the url already in the code like this: (jEcho.php)

<?php
$input = $_POST["inputText"];

if ($input == "") {
    echo "Empty";
} else {
    // used to parse
    // e.g. The Rosie Project -> The+Rosie+Project
    $temp = str_replace(" ", "+", $input);    

    // create appropiate source
    //$scriptSource = "https://www.googleapis.com/books/v1/volumes?q=$temp&callback=handleResponse";

    echo "
          <script src='https://www.googleapis.com/books/v1/volumes?q=$temp&callback=handleResponse'></script>
          <script>
              function handleResponse(response) {
                 var item = response.items[0];
                 document.getElementById('txtBox').innerHTML = item.volumeInfo.authors[0];
              }
          </script>";
}
?>

I've tried your code and it's still printing the javascript. As with what's causing it, I think it is something to do with the how echoed javascript. The way I'm doing it is based on something I consider hacky and I don't entirely understand how it works. — cycloidistic, Feb 20 '15 at 06:15

Echoed Javascript Code from PHP Via AJAX Not Running

3 Answers3