CODEWITHSUNDEEP
javascriptphpjqueryajax
Krigen
Krigen

Reputation: 1

AJAX Post Successful but PHP not responding

I'm having trouble with an AJAX POST to PHP call.

JS in an PHP file (tableOutput.php)

var changedArr=[];
var undoRedoArr=[];

//For editing data, http://tabulator.info/docs/3.3
$("#tabulator").tabulator({
     cellEdited:function(cell){
    //this is called whenever a cell's value is edited.
      var value = cell.getValue();
      var theID = cell.getRow().getIndex();
      var ip=cell.getRow().getData();
      var field = cell.getField();
      var x=Object.values(ip);
      console.log(ip);
      changedArr.push(x);
      },
});

//called when I hit a button
function saveChanges(){
       $.ajax({
         url: "getInfo.php/",
         type:'POST',
         data: {'ipString':changedArr},
         success: function(){
            alert("SAVED!");
         },
         error: function(XMLHttpRequest, textStatus, error){
            alert("AJAX error: " + textStatus + "; " + error);
         }
       })
   console.log(changedArr);
}

</script>

<?php
   include "getInfo.php";
?>

PHP code in a different file (getInfo.php)

<?php
 if(!empty($_POST['ipString'])){
   echo '<script language="javascript">';
   echo 'alert("Post")';
   echo '</script>';
 }

 if(!empty($_REQUEST['ipString'])){
   echo '<script language="javascript">';
   echo 'alert("Request")';
   echo '</script>';
 }

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

Earlier in the files, I have a GET command that works.

HTML in tableOutput.php

<div class=form>
  <form onsubmit="fillTable()" >
     <input type="submit" name="deny" value="Denied" />
     <input type="submit" name="permit" value="Permitted" />
  </form>
</div>

getInfo.php

$test="'CREATE'";
if( isset( $_GET['deny'] )){
  $test="'DENY'";
}
if( isset( $_GET['permit'] )){
  $test="'CREATE'";
}

Tried on Fedora and Windows. Code is on a server. Browser: Firefox

The Ajax posts successfully. I get an alert box saving "SAVED!", but nothing echos on the page. If I use window.location.href instead, then the getInfo.php echos to the page. The problem is that I get redirected to the getInfo.php page, which I don't want.

How do I get the Ajax to post to the getInfo.php file? Why is it not working?

Upvotes: 0

Views: 280

Answers (3)

Krigen
Krigen

Reputation: 1

The problem was not with the code posted. At the beginning of getInfo.php, I forgot to add "php" It was:

<?

instead of:

<?php

Upvotes: 0

Liakos
Liakos

Reputation: 572

It is important to understand that when including a php file (like getInfo.php), the output is written on the client side and cannot be accessed by php anymore.

What you want is to request the getInfo.php, get its response the write it on the client side.

Client:

<script>
    function saveChanges(){
       $.ajax({
         url: "getInfo.php/",
         type:'POST',
         data: {'ipString':changedArr},
         success: function(textResponse /* you MUST use this parameter*/){
            alert("SAVED!");
            // textResponse is the string the server sends. do whatever you want with this
            document.getELementById("out").innerHTML = textResponse;
         },
         error: function(XMLHttpRequest, textStatus, error){
            alert("AJAX error: " + textStatus + "; " + error);
         }
       })
   console.log(changedArr);
}
</script>

<div id="out"></div>

At the server side, it is important you do not include any <head> or <body> tags, otherwise you will have a new document inside your <div id="out"></div>! You should write just pure text, or something that can be put inside a div element, like a table.

Server: getInfo.php

<?php
if (isset($_POST['ipString'])) {
    echo "A request has been made"; 
}
?>

or write pure html closing the php tags (a nice trick):

<?php
if (isset($_POST['ipString'])) {
    ?>
    A request has been made
    <?php
}
?>

If your getInfo.php file needs to have its <head> and <body> tags, you must exit() the script so the rest of the file will not be sent.

<?php
if (isset($_POST['ipString'])) {
    echo "A request has been made"; 
    exit(); // exit here so ajax doesn't get the rest of the file
}
?>
<html>
    <head></head>
    <body></body>
</html>

Finally, if you want to be flexible and have your client do stuff based on what the server sends, you should try JSON which converts objects to strings and vice versa.

Upvotes: 0

Matt Spinks
Matt Spinks

Reputation: 6698

It looks like you are trying to mix two different mechanisms here (AJAX and post-back). When you use AJAX, simply echo-ing output will not insert that content into the DOM (like it does when using a full post-back). Your echo statement puts data into the output stream that is then consumed by your success function. And it will stay there unless you programmatically (using javascript/jQuery) insert it into the DOM. You can manually insert that into the DOM. There are many ways of doing that. The key is looking at your response object. This is one possibility:

function saveChanges(){
       $.ajax({
         url: "getInfo.php/",
         type:'POST',
         data: {'ipString':changedArr},
         success: function(response){
            alert("SAVED!");
            //add the script element to the DOM body
            $(response).appendTo('body');
         },
         error: function(XMLHttpRequest, textStatus, error){
            alert("AJAX error: " + textStatus + "; " + error);
         }
       })
   console.log(changedArr);
}

Upvotes: 1

Related Questions