Ajax/JSON Call to PHP Script is Failing To Populate on the Client Side (DB Call is Working)

Your SQL is

$sSQL = "SELECT * FROM tb_Design WHERE Year_ID = " . $iYearID;

(ensuring that $iYearID is integer would prevent SQL injection which you currently allow and which is extremely unsecure, I strongly advise you to look into parameterized queries)

This is a table about tbDesign and you load all fields where the year id matches the parameter. You are converting it into JSON via

$jsonData = json_encode($DRDesignArray);

so it is reasonable to think that it should work, but you may end up having an error on server-side (check the server logs for that) or you are reaching out to the wrong page, or parsing the response failed for some reason. In the browser's Dev Tools you have a Network tab where you can study the response. You can copy it into your favorite editor and see the full error, search for the error message and stack trace inside. You will thusly identify what the error is and at what line it occurred.

Possible PHP issues - like outputting content before the JSON

<?php
// Start output buffering to prevent accidental output
ob_start();

require_once $_SERVER['DOCUMENT_ROOT'] . '/DR/lib_includes/config.php';

$iYearID = $_POST['YearID']; // mybe sanitize?

$sSQL = "SELECT * FROM tb_Design WHERE Year_ID = " . $iYearID;
$DRDesignArray = [];

$oDB = new cDatabase();
$oRst = $oDB->mOpenRecordset($sSQL);

if ($oRst) {
  while ($row = odbc_fetch_array($oRst)) {
    $DRDesignArray[] = $row;
  }
} else {
  // DB query failed or no results
  header('Content-Type: application/json', true, 500);
  echo json_encode(['error' => 'Database query issue.']);
  exit;
}

$jsonData = json_encode($DRDesignArray);

if (json_last_error() !== JSON_ERROR_NONE) {
    // JSON encoding failed
    header('Content-Type: application/json', true, 500);
    echo json_encode(['error' => 'JSON encoding failed.']);
    exit;
}

// Clear buffer before output
ob_clean();

// Set JSON header and output data
header('Content-Type: application/json');
echo $jsonData; // here we have the only valid output

// No closing ?> tag is often best practice for pure PHP files

@mplungjan what is the advantage of jquery vs fetch? Not familiar with template literals, can you expand on that? I have seen fetch examples.

Well the biggest advantage is not loading an unnecessary library

window.addEventListener('load', () => { // when the elements are available
  const cboYear = document.getElementById('cboYear');
  const designResultsContainer = document.getElementById('designResults'); // or whatever you have called it

  cboYear.addEventListener('change', () => {
    const iYear = cboYear.value;

    // Clear previous results in case we get an error in the fetch
    designResultsContainer.innerHTML = '';

    if (iYear !== "") {
      fetch(`<?php echo($_SESSION['Web_Application_Root_Directory'] . 'db_includes/get_DR_Design.php'); ?>`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            YearID: iYear
          })
        })
        .then(response => {
          if (!response.ok) { // some error
            // Attempt to read the error message from the server if available
            return response.json().then(err => {
              throw new Error(`HTTP error! Status: ${response.status} - ${err.error || response.statusText}`);
            }).catch(() => {
              // If response.json() fails (e.g., non-JSON error from server), fall back
              throw new Error(`HTTP error! Status: ${response.status} - ${response.statusText}`);
            });
          }
          return response.json(); // Parse the JSON response - which is now available as "data" in the next .then
        })
        .then(data => { // this is an object now
          // console.log('Success:', data); // Log the parsed data

          if (data.length === 0) {
            designResultsContainer.innerHTML = '<p>No designs found for this year.</p>';
            return;
          }

          // Use map() and template literals (`) to transform each design object into an HTML string 
          // Then use join('') to concatenate all the HTML strings into one big string
          const designHtml = data.map(design => `   
            <div class="design-item" style="border: 1px solid #ccc; margin-bottom: 10px; padding: 10px;">
              <h3>${design.DesignName || 'N/A'}</h3>
              <p><strong>ID:</strong> ${design.ID || 'N/A'}</p>
              <p><strong>Year:</strong> ${design.Year_ID || 'N/A'}</p>
              <p><strong>Description:</strong> ${design.Description || 'No description provided.'}</p>
            </div>`).join('');
          // Insert the generated HTML into the container
          designResultsContainer.innerHTML = designHtml;
        })
        .catch(error => {
          console.error('Error fetching designs:', error);
          designResultsContainer.innerHTML = `<p style="color: red;">Failed to load designs: ${error.message || 'Unknown error'}</p>`;
        });
    }
  });
});

(retro-answering from the comments)

The error message Unexpected token '<', ..."<table sty"... is not valid JSON gives us a hint at what is passed to response = JSON.parse(response);:
there's a bit of HTML that could be the start of <table style="…"><tr><td>…</td>….

But having a longer extract of this HTML could help us understand what's in there.

So first we have to get the full HTML body, or at least a longer start:

• either by looking in the web browser's network tab, that, if open before running the AJAX call, will save the entire payload
• or by including a JS alert(response); just before the JSON.parse(response); that crashes
• or by calling by hand the URL called by the AJAX (pasting the URL into the address bar of the browser) but this will require changing _POST into _GET for the duration of the test, to be able to pass YearID in the URL instead of by POST

Then we probably have a better idea of what outputs this HTML, instead of the expected JSON:

• either it's one of your pages:
  <table style="…"><tr><td>Here is the generic header for my site</td>… (possibly ending with the expected JSON data),
  then it may be sign that your PHP includes another PHP, responsible of the HTML layout of your site, before running the json_encode()
• or the page looks like the one of the framework or PHP:
  <table style="…"><tr><td>Framework speaking: an uncaught exception was thrown on yourscript.php at line 123: illegal this and that</td>…
• or the URL has been mistyped and it's the webserver replying:
  <table style="…"><tr><td>Error 404: you are now allowed to access yourscriptwithatypo.php</td>…