How to invoke PHP file in AJAX/JavaScript?

Question

I have this code that GET the php file using an AJAX method. The goal is to inform the user if the movie table is empty or not. If the table is empty, it will display a confirm box that will ask if the user wants to add movies or not?

Here's my index.php file:

<a href="#" onclick="checkMovieTable('../ajaxphp/moviestbl.php')" title="Movies">Movies</a>

Here's my moviestbl.php:

<?php
include ('../phpfunc/connect'); //includes the connection to mysql
$checkMovieTable = mysql_query("SELECT * FROM movies ORDER BY title ASC") or die("Table not found");
$countRows = mysql_num_rows($checkMovieTable);
if($countRows == 0){
?>
 <script language="JavaScript">
 var option = confirm("No Movies found. Add Movies now?");
 if(option ==true){
   //redirect to another page
   window.location = "../addmedia.php?add=movies";
 }
 else{
    //do nothing. return to current window.
 }
 </script>
<?php
 }
?>

And finally, here's my AJAX file.

<script>
/*connect to database then count the table, if it's zero, dispLay a confirmation box*/
var XMLHttpRequestObject = false;

if(window.XMLHttpRequest){
        XMLHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject){
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");      
}

function checkMovieTable(dataSource){
    //get data from the server
    //onreadystatechange = stores a function
    var obj = document.getElementById("readystate");
    XMLHttpRequestObject.open("GET", dataSource);

    XMLHttpRequestObject.onreadystatechange = function() {
        if(XMLHttpRequestObject.status == 200){
            obj.innerHTML = XMLHttpRequestObject.responseText;
        }
    }
    XMLHttpRequestObject.send(null);

}
</script>

When I click the link, it is not doing or displaying anything. need help. thanks.

If this is all your code then your click handler calls a function that doesn't exist — user1864610
– user1864610, Commented Jun 22, 2013 at 7:25
In checkMovieTable() you need to return false to prevent the link being followed. If you don't I think the page will reload and you won't see the changes — user1864610
– user1864610, Commented Jun 22, 2013 at 7:30
Your "moviestbl.php" should create a response that an AJAX caller can decode - at the moment you are returning HTML containing JavaScript - I'm not sure if that will execute when you inject it into the DOM. Do you have any console errors? Use JSON instead maybe, and move the JavaScript confirm to your last file. — halfer
– halfer, Commented Jun 22, 2013 at 7:33

Giju Eldhose · Accepted Answer · 2013-06-22 07:47:03Z

1

You will need to get the data from server using an ajax request , the response could be in JSON format.

Suggestions .

use jQuery and $.ajax - for pulling data from server
on getting the response - do the confirm and switch window

You can structure the logic to handle specific logics at client & server

PHP : logic on server could beCreate and interface for responding with JSON result for status of entries on movie table. your current query should work fine.
Javascript: Make use of the interface defined on php to to query data and make use of the 'confirm' javascript to do the switching.

Right now if you change

<a href="#" onclick="checkMovieTable('../ajaxphp/moviestbl.php')" title="Movies">Movies</a>
to 
<a href="/ajaxphp/moviestbl.php" title="Movies">Movies</a>

You should see it working with page reloads and redirects.

answered Jun 22, 2013 at 7:47

Giju Eldhose

211 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam · Accepted Answer · 2013-06-22 07:43:50Z

This will probably work better:

<?php
include ('../phpfunc/connect'); //includes the connection to mysql
$checkMovieTable = mysql_query("SELECT * FROM movies ORDER BY title ASC") or die("Table not found");
$countRows = mysql_num_rows($checkMovieTable);
if($countRows == 0){
    echo "empty";
 }
?>

<script>
/*connect to database then count the table, if it's zero, dispLay a confirmation box*/
var XMLHttpRequestObject = false;

if(window.XMLHttpRequest){
        XMLHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject){
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");      
}

function checkMovieTable(dataSource){
    //get data from the server
    //onreadystatechange = stores a function
    var obj = document.getElementById("readystate");
    XMLHttpRequestObject.open("GET", dataSource);

    XMLHttpRequestObject.onreadystatechange = function() {
        if(XMLHttpRequestObject.status == 200){
            obj.innerHTML = XMLHttpRequestObject.responseText;
            if(XMLHttpRequestObject.responseText === "empty"){
                var option = confirm("No Movies found. Add Movies now?");
                if(option == true){
                    //redirect to another page
                    window.location = "../addmedia.php?add=movies";
                } else{
                //do nothing. return to current window.
                }
             }
        }
    }
    XMLHttpRequestObject.send(null);

}
</script>

thanks for answering but it is still not doing anything. there's no error in the console, either, so i dont know what i am doing wrong.

ladybug · Accepted Answer · 2013-06-24 10:52:48Z

I was able to make the code run now. Thanks to Firebug and coffee. The anchor tag is the problem. I don't know why, but when I used the img instead, it worked.

<img alt="movies" style="cursor:hand;cursor:pointer;" onclick="checkMovieTbl('/movies/ajaxphp/moviestbl.php')"/>

The PHP Script file:

<?php
//fetch the data from the table movies
include '../phpfunc/connect.php';
$checkMovieTable = mysql_query("SELECT * FROM movies ORDER BY title ASC") or die("Table not found");
$countRows = mysql_num_rows($checkMovieTable);
$json = json_encode($countRows);
if($json == 0){
    echo $json;
}
?>

And lastly, the AJAX file.

var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
} 
else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function checkMovieTbl(url){
    //if not false
    if(XMLHttpRequestObject){
        XMLHttpRequestObject.open("GET", url, false); //not sync
        XMLHttpRequestObject.onreadystatechange = function(){
            if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
                var response = XMLHttpRequestObject.responseText;
                //alert(XMLHttpRequestObject.responseText + "readyState:" + XMLHttpRequestObject.readyState + "\nStatus:" +XMLHttpRequestObject.status);
                if(response==0){
                    //execute something here
                }
            }
            else{
                alert(XMLHttpRequestObject.responseText + "readyState:" + XMLHttpRequestObject.readyState + "\nStatus:" +XMLHttpRequestObject.status);
            }
        }
        XMLHttpRequestObject.send();
    }

}

Thanks to everyone who answered my questions and helped me. Chiao!

Collectives™ on Stack Overflow

How to invoke PHP file in AJAX/JavaScript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related