CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
CircuitScholar
CircuitScholar

Reputation: 59

Ajax: "no element found" when trying to call a PHP script

I am trying to get JavaScript and PHP working together on my Ubuntu 14.04 LTS system. To that end, I have created the following three files:

index.html

<html>
    <head>
        <script type="text/javascript" src="testJS.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>
    <body>
        <button onClick="testFunction();">Click Me</button>
        <div id="testDiv"></div>
    </body>
</html>

testJS.js

function testFunction() {
    $.ajax({
        url: "testPHP.php",
        success: function(result) {
            $("#testDiv").html(result);
        }
    });
}

testPHP.php

<?php
echo("<h1>This is coming from PHP.</h1>");
?>

All of the above files are stored together within a single file on my desktop. Upon opening index.html in Firefox, and upon clicking the button, nothing happens to the web page and the Firefox console simply shows the following JavaScript errors:

no element found          testPHP.php:4:1
no element found          index.html:4:1

I have read other threads on this site regarding this issue. Adding header('Content-Type: text/plain'); exit(); to my PHP file does not have any effect.

Any help would be appreciated. Thank you.

Update: I have installed Apache2, confirmed it is working by viewing the Apache default page, and moved all three files to /var/www/html. I am experiencing the same issue.

Upvotes: 0

Views: 365

Answers (1)

Harshad Hirapara
Harshad Hirapara

Reputation: 462

Try This:

function testFunction() {
 
  $.ajax({
    url: "<?php echo base_url();?>testPHP.php",
    type:"post",
    success: function(result) {
      $("#testDiv").html(result);
      alert(1)
    }
  });
}
<html>

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

<body>
  <button onClick="testFunction();">Click Me</button>
  <div id="testDiv"></div>
</body>

</html>

Upvotes: 1

Related Questions