JavaScript, PHP, Bootstrap - Error suspected from modal - Unable for a PHP file to receive a value from a JavaScript file

Question

I've got a database already populated. I also have a function (in JavaScript) that "catches" the id of that element for which a button was pressed, something like this:

   Name of subject   |   Actions
-----------------------------------------
      Chemistry      | Edit / Delete
       Algebra       | Edit / Delete

So, if I pressed "Delete", a javascript function gets the the id of that subject, and sends a request with AJAX, in this way:

function confirmationDeleteSubject(boton){

  var materiaId = parseInt(boton.value);
  console.log(materiaId);

  $.ajax({
    url: 'http://localhost/path/showSubject.php',
    type: "POST",
    data: {"materiaId": materiaId},
    dataType: "html",
    beforeSend: function() {    
      console.log("Processing...");
    },
    success: function(data) {
      if( data == "OK") {
        //location.href = "http://localhost/path/main.php";
        return;
      }
      if( data == "ERROR") {
        alert("error, please try again");
        return;
      }
      alert("Server message: " + data);
    }
  });
}

There is then a php file that deals with getting the data for that specific id, and attempts to show it in a modal:

<?php

  include("conexionDatos.php");

  // Inicialization
  $materiaId = "";

  // This receives the data from the JavaScript function
  $materiaId = $_POST['materiaId'];

  // Query to get the data for that id
  $SQL = "SELECT m.id, m.name, m.description, m.hours, c.name AS carreer_name FROM subjects m JOIN carreers c ON (m.carreer_id = c.id) WHERE m.id = '$materiaId'";
  $result = $CONN->query($SQL);

  // This part "inserts" into the table in the modal
  if($result->num_rows > 0) {
    while($row = $result->fetch_assoc()){
      echo "<tr>"; 
      echo "<td>{$row['name']}</td>";
      echo "<td>{$row['description']}</td>";
      echo "<td>{$row['hours']}</td>";
      echo "<td>{$row['carreer_name']}</td>";  
      echo "</tr>";
    }
  } else {
    echo "<tr><td>No data found<td></tr>";
  }

  $CONN->close();

?>

This code, when pressed actually brings the data for the id selected, but not in the modal. It brings all the data into an alert by localhost, following the code in the AJAX call, this part:

alert("Server message: " + data);

After that alert, a modal pop up, but the table is empty, and it reads No data found.

It has a warning that says:

Notice: Undefined index: materiaId in C:\blablabla\muestroMateria.php on line 12

Which I don't fully understand why, because the data pops up in the alert, but it's like the php file receives no id and so the modals reads "no data found"

EDIT: Even if my questions deals qith an Undefined Index warning, to me it goes further than that, somewhere between the AJAX code and the PHP file. I still can't realize what it is.

Answer 1

This line is problematic. Your POST array doesnt have the designated key.

$materiaId = $_POST['materiaId']

You should make sure that you are sending the right data (browser inspector / Network tab), and also protect from situations when, as has been mentioned, your variable is null.

$materiaId = isset($_POST['materiaId']) ? $_POST['materiaId'] : '';

or

$materiaId = array_key_exists('materiaId', $_POST) ? $_POST['materiaId'] : '';

You also need to check what data the PHP script is receiving (json variable, or normal array of sent variables - or nothing for some reason) - you can use

echo var_export($_POST, true); as your PHP script response, to debug what the script is receiving (and in what format).