CODEWITHSUNDEEP
javascriptphp
John
John

Reputation: 952

PHP include in JavaScript is not working

I've JavaScript and I want to run a include script in the JavaScript . I tried the following statement:

outputEl.innerHTML = '<?php include "./change/ud1.php";?>';

When I run the script I get no response.

Does someone know why I didn't get any response and how I can fix it?

I tried to replace the PHP include with an html iframe. That worked but that is not the best solution for me.

Upvotes: 9

Views: 3012

Answers (13)

Amaan Iqbal
Amaan Iqbal

Reputation: 761

You can't do this directly. If you want to replace the contents in this manner you have following two options

  1. send AJAX request to that file and then that file will send the entire html as the data parameter of success function and then you can use that data wherever you want.

  2. Or else you have to redirect to that page and you want some data to be sent to that file, then you can have as a get request.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>    
    $.ajax({
       type: "POST",
       url: "<?php include "./change/ud1.php"; ?>",  //ensure URL is correct
       data: { }, //send some data if you want to that file or else remove this line
       dataType: "html",
       success: function(data) {
           if($.trim(data)) {
                $('#outputEl').html(data);
           } else {
                alert("Something went wrong!!");
           }
       }, error: function() {
           alert("ERROR!");
       }
   });
</script>

And you can perform step 2 as

&lt;script&gt;
    window.location.href = "./change/ud1.php";  //And pass any parameters to that file if you wish as a GET request
&lt;/script&gt;

Let me know if you require any further help

Upvotes: 2

Govind Samrow
Govind Samrow

Reputation: 10179

You can't do this because PHP code render before JavaScript. There are many alternative ways to do this:

if outputEl is a ID of a div element:

1- Without jQuery/JavaScript

<div id="outputEl"><?php include "./change/ud1.php";?></div>

2- Use jQuery load function

$("#outputEl").load('./change/ud1.php');

3- With JavaScript function

window.onload = function() {
  if (XMLHttpRequest)
    var x = new XMLHttpRequest();
  else
    var x = new ActiveXObject("Microsoft.XMLHTTP");
  x.open("GET", "./change/ud1.php", true);
  x.send();
  x.onreadystatechange = function() {
    if (x.readyState == 4) {
      if (x.status == 200)
        outputEl.innerHTML = x.responseText;
      else
        outputEl.innerHTML = "Error loading document";
    }
  }
}

Upvotes: 1

Oscar P&#233;rez
Oscar P&#233;rez

Reputation: 11

The PHP code is rendered on the server, with Javascript you are on the client and you can not render PHP if you are not on the server.

Upvotes: 1

nobody
nobody

Reputation: 21

make single quotes to double quotes and try

Upvotes: 2

Sharad Kale
Sharad Kale

Reputation: 971

No Need to use javascript in this case

you can use response directly where you want

<div id="outputEl"><?php include "./change/ud1.php";?></div>

Upvotes: 11

AJM
AJM

Reputation: 119

You can also use jquery to load the content of the php file in your specified html element.

 $.get("path/to/yourfile.php", function(data, status){  
    outputEl.innerHTML = data;
});

Upvotes: 3

Von
Von

Reputation: 304

This is not right approach. You should take html into a php variable and then use that PHP variable into JavaScript. If you are using MVC then its quite easy. I posted answer without using MVC :

$html = file_get_contents('path/to/YOUR/FILE.php');

In Javascript

var html = '<?php echo $html; ?>';

Upvotes: 2

iprog21
iprog21

Reputation: 1

this will work also. put this code in your .php, you can put script in your .php

<script type="text/javascript">
   outputEl.innerHTML = "<?php include './change/ud1.php';?>";
</script>

Upvotes: -1

Aman Agarwal
Aman Agarwal

Reputation: 114

Simply Use 

<script type="text/javascript" src="filename.php"></script>

Also pass this header("Content-type: text/javascript"); on top of the php file.

Upvotes: 2

Maulik
Maulik

Reputation: 2991

  • php is a server-side language.
  • JavaScript is client side language.

so php can only execute on your server and JavaScript executes on user's browser.

there is no way in which php code going to run in JavaScript (browser). so you need to use ajax like this.

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // server sent data successfully in this.responseText variable
        document.getElementById("output1").innerHTML = this.responseText;
    }
};

//Request data from a server
xhttp.open("GET", "path/to/php/include-script.php", true);
xhttp.send();

Learn more about ajax here.

Upvotes: 4

Chris Lear
Chris Lear

Reputation: 6742

You can't run php inside a .js file. As I understand it, you're going to need to fetch the content of the php file from your js file.

Here's a bare-bones implementation.

var xhr = new XMLHttpRequest();

xhr.onload = function () {
    outputEl.innerHTML = this.response;
};

xhr.open('GET', './change/ud1.php', true); // you may need to correct the url to be relative to the js file
xhr.send();

It might be easier and more robust to use jquery, in which case (once you've included the jquery library) you can just use something like this

$(outputEl).load("change/ud1.php");

Upvotes: 7

Jawahar Sharma
Jawahar Sharma

Reputation: 127

Try this 

$("#output1").load("change/ud1.php");

Upvotes: 1

Minar_Mnr
Minar_Mnr

Reputation: 1405

Two ways :

First: 

 <script>
      document.write('<?php echo include_once "./change/ud1.php";?>');
   </script>

Second: 

<script type="text/javascript" src="./change/ud1.php"></script>

Upvotes: 1

Related Questions