How to embed or include php file in the innerHTML in ajax?

Question

I want to display the contents of the php file and I tried to include the php file in ajax but it doesn't work.

solution 1 doesn't work

document.getElementById("txtMeaning").innerHTML = "<center><img src='images/img_layout/exploro_logo.png'><?php include 'word.php' ?></center>";

solution 2 still doesn't work

document.getElementById("txtMeaning").innerHTML = "<center><img src='images/img_layout/exploro_logo.png'<script type='text/javascript' src='wotd.php'></script>";

Here's the code for ajax if there's no input it will display the word of the day

function showMeaning(word)
{ 
    if(word.length == 0)
    {
         document.getElementById("txtMeaning").innerHTML = "<center><img src='images/img_layout/exploro_logo.png'><?php include 'word.php' ?></center>";

//the word of the day must be displayed here but it doesn't work

        return false;
    }

    else{
            xmlHttp=GetXmlHttpObject()
            if (xmlHttp==null)
            {
                alert ("Browser does not support HTTP Request")
                return
            }
            var url = "get_word.php"
            url = url + "?word=" + word
            xmlHttp.onreadystatechange=stateChanged 
            xmlHttp.open("GET",url,true)
            xmlHttp.send(null)
    }       

}

here's my php code for generating the word of the day

<?php
        $con=mysql_connect("localhost","root","");
        mysql_set_charset("UTF8", $con);                                            

        if(!$con)
            {
                die("Could not connect." .mysql_error());
            }

        mysql_select_db("dictionary_ajax", $con);


        $query = "SELECT eng_word" . 

                 " FROM english".

                 " ORDER BY RAND(DAY(NOW())) LIMIT 1";

        $result = mysql_query($query) or die(mysql_error()); 

        $num_rows = mysql_num_rows($result);                                                    

        if($num_rows==0)
        {
            echo "No Results Found. Please try again";
        }

        while($row=mysql_fetch_array($result))
        {
            echo "<center><div class='wotd'>Word of the day:</div><div class='word'>".$row['eng_word']."</div></center>";

        }
        mysql_close($con);
?>

N3R4ZZuRR0 · Answer 1 · 2015-12-09T13:58:04.323

0

Using jQuery, you could you use one of their ajax calls to load your html from include.php.

<div id="content"></div>

<script>
$(document).ready(function() {
  $("#content").load("/yourpath/include.php");
});
</script>

or, without using jQuery, you may try this,

 <div id ="content"></div>

 <script>
 function loadphpfile() {
   var x = document.getElementById("content");
   x.innerHTML = '<?php include_once "include.php";?>';
 }      
 loadphpfile();    
 </script>

edited Dec 09 '15 at 13:58

answered Dec 09 '15 at 13:47

N3R4ZZuRR0

2,400
4
18
32

I want to load the php file it in the `innerHTML=""` – Jude Howell Sarabia Dec 09 '15 at 13:51
I have edited the question to include it in `innerHTML=""` – N3R4ZZuRR0 Dec 09 '15 at 13:58
But the `innerHTML=""` is in the external file. – Jude Howell Sarabia Dec 09 '15 at 14:05
if it is in an another JS file then it would probably work. – N3R4ZZuRR0 Dec 10 '15 at 16:03

score 0 · Answer 2 · answered Dec 09 '15 at 13:54

A better approach would be to call the php file via an AJAX request and then append the response to the relevant DOM element.

Overview of AJAX using vanilla Javascript: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Docs on JQuery Post and Get short cuts. https://api.jquery.com/jquery.get/ http://api.jquery.com/jquery.post/

There are examples of what you are trying to do in the JQuery .get docs

score 0 · Answer 3 · edited May 23 '17 at 10:27

You should make an AJAX call to get HTML from your server, then put the response to a DOM element with JavaScript.

So, in your case this may look like:

<center>
    <img src="images/img_layout/exploro_logo.png">
    <div id="wordOfTheDay"></div>
</center>
<script type="text/javascript">
    /**
    * Gets a word of the day
    */
    function getWordOfTheDay() {
        //Makes AJAX call
        var xhttp;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            //Adds the response to the DOM element with ID wordOfTheDay
            document.getElementById("wordOfTheDay").innerHTML = xhttp.responseText;
            }
         };
         xhttp.open("GET", "word.php", true);
         xhttp.send();
    }
    //Invoke the function to get the word of the day
    getWordOfTheDay();
</script>

With a popular framework like jQuery, this may look like this:

<center>
    <img src="images/img_layout/exploro_logo.png">
    <div id="wordOfTheDay"></div>
</center>
<script type="text/javascript">
    /**
    * Gets a word of the day
    */
    function getWordOfTheDay() {
        //Makes AJAX call
        $.get("word.php", function (response) {
            $('#wordOfTheDay').html(response);
        });
    }
    //Invoke the function to get the word of the day
    getWordOfTheDay();
</script>

More examples of using AJAX here - http://www.w3schools.com/ajax/ajax_examples.asp

More info about jQuery get method - https://api.jquery.com/jquery.get/

Also there are very good explanations of AJAX on stackoverflow here - How does AJAX work?

score 0 · Answer 4 · answered Dec 09 '15 at 14:10

Try isolating the html+js files and API call yout .php file

app |-- www/index.html
    |-- www/js/main.js 
    |-- www/api/word.php

Create html for view and include your javascript file and the jQuery library.
Get your data from the php file and return a json file
Call the *.php api file url using $.ajax Read more
Update DOM from the ajax data object

Hope that helps

How to embed or include php file in the innerHTML in ajax?

4 Answers4