Hello everyone, I am trying to write a simple web application where I have a mySQL table. I am using drop down menus to select options on how to filer the table.... i.e. select the subject, filter the table for just that subject and continue on. Anyways I'm trying to use AJAX. I went to w3schools and literally copied and pasted the code... it seems to be working for them but my xmlhttp.onreadystatechange=function() does not want to get called or go through. I was wondering if someone could help me because I've been at it for a couple hours with no luck.

$script = "<script language='Javascript' type='text/javascript'>
function loadTopics()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById('Topics').innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open('GET','loadTopics.php',true);

xmlhttp.send();


}
</script>";

echo $script;

I posted a number of different alert messages and know that it is where the onstatereadychange=function the error must be occurring. Or at least, as far as I have deduced...

The HTML code looks something like this (so far).

<div id='Topics'> <select> </select> </div>

Thanks in advance.

Dani AI

Generated

As discovered while debugging, an onreadystatechange handler that never fires usually means the browser never ran the original script or the HTTP request never completed — common causes are HTML-escaping/sanitization of inline JS, a wrong/relative endpoint path, or a server response error (404/500) or CORS issue. AJAX/XHR is a client-side mechanism (runs in the browser); the server operating system (Linux vs Windows) does not “disable” Ajax — problems come from the HTTP response or server configuration. (developer.mozilla.org)

Practical diagnostic checklist: developer tools (Console + Network) will show syntax errors and whether an XHR/Fetch request was sent and what status it returned; view the page source (not the DOM inspector) to confirm inline script contents were not HTML-escaped (e.g. && -> &amp;&amp;) which breaks handlers; request the endpoint directly in a browser or with curl to reveal PHP warnings or 500s; if the request never appears, the script is probably being filtered before output. Character/entity behavior is documented here. (devdoc.net)

WordPress notes specific to this thread: inline PHP-in-post plugins often sanitize or mangle scripts. The recommended approach is to ship JavaScript as an enqueued file (wp_enqueue_script) and use a proper AJAX endpoint (admin-ajax.php or the REST API) with wp_ajax_ / wp_ajax_nopriv_ callbacks for front-end requests. That avoids encoding/sanitization and path confusion. (developer.wordpress.org)

A concise, modern replacement for manual XHR is the Fetch API; a minimal pattern that replaces the typical XHR flow is shown below (use an absolute or correctly resolved path to the PHP endpoint and inspect the network response if it fails):

fetch('/absolute/path/to/loadTopics.php')
  .then(response => { if (!response.ok) throw new Error(response.status); return response.text(); })
  .then(html => document.getElementById('Topics').innerHTML = html)
  .catch(err => console.error('AJAX error:', err));

See Fetch/XHR docs for details. Final checks: test the PHP file directly, scan server error logs, and move scripts out of content filters by enqueuing them. (developer.mozilla.org)

OK. I got it figured out. To give a little bit more of a background I am writing a little application for my wordpress blog. I am using a php-plugin so I can write php into a page... which in this case is just a <?php include....?>. That was issue #1.

When I looked at the source code the && was actually being outputted as some funky html code for ampersands like &0#02; or something. Fix #1 was replaced the if-statement to two nested if-statements.

Next, I realized I was running on a Linux Server which does not support Ajax. That was issue #2.

Issue #3 was the 'loadTopics.php' requires a '/'.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.