GET call not working with JQUERY using an AJAX call

ZJGreen
November 22, 2023
260 views
1 vote
2 Answers

Can anyone see a problem with this? It was working but now ‘genitive’ comes back as undefined and the url doees not seem to be getting executed. The call is passed the ID of a constellation for example 42 = Hydra, the call should return the genitive which is Hydrae.

function updateSN(ev) {
  ev.preventDefault();
  var e = document.getElementById("frm_GreekID");
  var gid = e.value;
  var text = e.options[e.selectedIndex].text;
  var cons = document.getElementById("frm_Constellation");
  var ctxt = cons.value;
  alert("CVAL = " + ctxt);
  $.ajax({
    url: "ggenitive.php",
    type: "POST",
    data: {
      c: ctxt,
    },
    success: function (response) {
      // show response for success
      let genitive = response.value;
      alert("GENITIVE = " + genitive);
      document.getElementById("frm_StarName").value = gid + " " + genitive;
    },
  });
}

in the ggenitive.php page I get the correct response when changing the $_POST to $_GET and passing the constellation value in the url, i know the function is getting called because the alert boxes work.

Here is the ggenitive.php if this helps

<?php
require( '../db_connect.php' );
include( '../inc/tvms_inc.php' );
//var_dump($_POST);
session_start();
$qga = "SELECT cGenitive FROM `ast_cons` WHERE id = '".$_POST['c']."'";
$rga = mysqli_query( $conn, $qga )or die( "<div class='container'><table class='table'><tr><th>COULD NOT PERFORM QUERY [GENITIVE]</th></tr><tr><td>" . $qga . "</td><tr>" . mysqli_error( $conn ) . "</td></tr></table></div>" );
$row=mysqli_fetch_assoc($rga);
echo $row['cGenitive'];
?>

Answers

let genitive = response.value;

Your response is a plain string which does not have a value property.

You can just use the plain string response directly

success: function(genitive) {
  alert("GENITIVE = " + genitive);
  document.getElementById("frm_StarName").value = `${gid} ${genitive}`;
}

I would also recommend using some modern practices for your server-side code. Namely using prepared statements and responding with appropriate status codes in case of errors

<?php
$id = filter_input(INPUT_POST, 'c', FILTER_VALIDATE_INT);
// use `INPUT_GET` if passing parameters in the query string

if (!$id) {
    http_response_code(400);
    exit('Invalid "c" value');
}

// throw exceptions
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

require __DIR__ . '/../db_connect.php';
include __DIR__ . '/../inc/tvms_inc.php'; // what does this one do?

$stmt = $conn->prepare('SELECT `cGenitive` FROM `ast_cons` WHERE `id` = ?');
$stmt->bind_param('i', $id);
$stmt->execute();
$stmt->bind_result($cGenitive);
if (!$stmt->fetch()) {
    http_response_code(404);
    exit("ID $id not found");
}

header('Content-Type: text/plain');
echo $cGenetive;

function updateSN(ev) {
  ev.preventDefault();
  var e = document.getElementById("frm_GreekID");
  var gid = e.value;
  var text = e.options[e.selectedIndex].text;
  var cons = document.getElementById("frm_Constellation");
  var ctxt = cons.value;
  alert("CVAL = " + ctxt);
  $.ajax({
    url: "ggenitive.php",
    type: "POST",
    data: {
      c: ctxt,
    },
    success: function (response) {
      // show response for success
      let genitive = response; // Remove .value
      alert("GENITIVE = " + genitive);
      document.getElementById("frm_StarName").value = gid + " " + genitive;
    },
  });
}

Try this change and see if it addresses the problem. The response variable should directly hold the server’s response data. If you continue to have issues, consider logging the server’s real answer to the console:

success: function (response) {
  console.log(response); // Log the response to the console
  let genitive = response;
  alert("GENITIVE = " + genitive);
  document.getElementById("frm_StarName").value = gid + " " + genitive;
},

Please signup or login to give your own answer.

Click here to cancel reply.