Question

There seems to be a problem with the code I have for calling php from javascript with jquery ajax. The ajax call seems to be successful but I don’t get the correct information returned from the php function.

In the php function I create a SQL query. I send back the query as a reponse to debug it before performing a delete query. Here is the HTML for the div to show the query.

 <div id="thenode" style="position: absolute; top: 30px; left: 0px; width: 150px; background-color: white; z-index: 9999;">&nbsp;</div>

Here is the jquery ajax call. There are two variables being sent to the PHP function: nodeid for node to be delete, and option delete for the function.

function deleteitem()
{

     //get selected node
     var selectnod = getCookie('pnodid'); 

     //define php info and make ajax call
     $.ajax({
         url: "uptree.php",
         type: "POST",
         data: { node: selectnod, option: "delete" },
         cache: false,
         success: function (response) {
             $('#thenode').html(response);
         }
     });

}

Here is the PHP function.

<?php

function uptree() {

  $node = $_POST['node'];
  $option = $_POST['option'];

  if($node == '' || $option == '') {
    return '';
  }

  $dbco = mysql_connect('localhost', 'root', 'mmowebdb');
  if (!$dbco)
    {
    die('Could not connect: ' . mysql_error());
    }

  mysql_select_db("pagelinks", $dbco);

  $sql = "DELETE FROM dtree_table WHERE nid='$node'";

  return $sql;
}

?>

Should be straightforward but this ajax call returns an empty string and causes the div in the HTML to disappear. This is the first time I use ajax in an actual project. The problem must be easy to find for someone who knows what ajax really does. Can you tell the problems?

Answer 1

I found the answer! Thanks to all of you who had suggestions about the SQL call. But here is the actual answer to my question.

There are four steps in making an ajax Javascript to PHP call. The first two steps happen in the Javascript. The other two steps happen in the PHP.

Step 1. In Javascript decide what variables are needed in the PHP function, retrieve them.

Step 2. Make the ajax call to the PHP function. jquery has a convenient way of passing values to PHP. You have a an array of name-value pairs like this in the data item for the ajax call.

 data: { node: selectnod, option: "delete" },

Step 3. Have your PHP function ready in a PHP file. Write the function like this.

function updatetree($node, $option) {

Step 4. Echo a call to the php function within that PHP file.

With these four steps you should have a succesful call to PHP and be able to return information to javascript from the PHP function.

Here is the javascript function.

function deleteitem()
{

     //Get selected node to send to PHP function
     var selectnod = getCookie('pnodid'); 

     //Define php info, specify name of PHP file NOT PHP function
     //Note that by loading the PHP file you will probably execute any code in that file
     //that does not require a function call
     //Send PHP variables in the data item, and make ajax call
     //On success perform any action that you want, such as load a div here called thenode
     $.ajax({
         url: "uptree.php",
         type: "POST",
         data: { node: selectnod, option: "delete" },
         cache: false,
         success: function (response) {
             $('#thenode').html(response);
         }
     });

}

Here is the PHP file uptree.PHP. It has a function defined, called updatetree. It also has an echo statement to call that function. This just seems to be the way to cause the function to run. Ajax itself doesn’t call the function.

<?php

//Function defined here
//The variables will come from the ajax data statement
function updatetree($node, $option) {

  if($node == '' || $option == '') {
    return 'Select an item in the tree.';
  }

  $dbco = mysql_connect('localhost', 'root', 'mmowebdb');
  if (!$dbco)
    {
    die('Could not connect: ' . mysql_error());
    }

  mysql_select_db("pagelinks", $dbco);

  $sql = '';
  switch($option) {
     case 'delete':
        $sql = "DELETE FROM dtree_table WHERE nid='$node'";
        break;
     case 'add':
        list($pagename, $address) = explode(",", $page);
        $pagename = trim($pagename);
        $address = trim($address);
        $sql = "INSERT INTO dtree_table (nid, pid, name, url) values (NULL, ".$node.", '".$pagename."', '".$address."')";
        break;
     case 'update':
        break;
  }

  if (!empty($sql)) return $sql;
}

//echo statement to run function, variables sent by ajax are retrieved with $_REQUEST
//they could have also been retrieved with $_GET or $_POST
echo updatetree(trim($_REQUEST['node']),trim($_REQUEST['option']),trim($_REQUEST['page']));

?>

So to recap. Javascript gets variables, makes ajax call to PHP file. Ajax loads PHP file which contains echo statement that causes PHP function to run. That PHP function is defined in that same file. The function return statement sends information back to javascript through ajax. Javascript does something with that information, e.g. load it into a div on the HTML page.