jQuery, JavaScript - Network Error?
<p>I am working on building a Javascript/jQuery and AJAX website. However, while testing I am encountering the following error:</p>

<pre><code>Timestamp: 6/11/2016 10:13:45 AM
Error: NetworkError: A network error occurred.
</code></pre>

<p>To me, the most obvious culprit would be the AJAX call made in my script; however, I tried commenting it out and still received the same error. When the website is first loaded it displays three alert boxes (selection=category&amp;detail=test, and so on), but then the error appears and changing the selection does not trigger the alert.</p>

<p>Here is my main page:</p>

<pre><code>&lt;?php
include('header.php');
?&gt;

&lt;div id='mainContent'&gt;

&lt;?php /* if(!$_SESSION['admin']) {
echo "&lt;p&gt;You do not have permission to view this page!&lt;/p&gt;";
} else { */
echo "&lt;form method='post' action='addItem.php'&gt; 

&lt;div class='form-group'&gt;
&lt;label&gt;Category&lt;/label&gt;
&lt;select id='categorySelection' name='categorySelection'&gt;
&lt;option value=1&gt;Playstation&lt;/option&gt;
&lt;option value=2&gt;Wii&lt;/option&gt;
&lt;option value=3&gt;Gamecube&lt;/option&gt;
&lt;option value=4&gt;N64&lt;/option&gt;
&lt;option value=5&gt;Other Console&lt;/option&gt;
&lt;option value=6&gt;DS&lt;/option&gt;
&lt;option value=7&gt;Game Boy&lt;/option&gt;
&lt;option value=8&gt;Other Handheld&lt;/option&gt;
&lt;option value=9&gt;DVD&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;

&lt;div class='form-group'&gt;
&lt;label&gt;Item&lt;/label&gt;
&lt;select id='itemSelection' name='itemSelection'&gt;
&lt;/select&gt;
&lt;/div&gt;

&lt;div class='form-group'&gt;
&lt;label&gt;Condition:&lt;/label&gt;
&lt;select id='conditionSelection' name='conditionSelection'&gt;
&lt;option value=1&gt;Acceptable&lt;/option&gt;
&lt;option value=2&gt;Good&lt;/option&gt;
&lt;option value=3&gt;Very Good&lt;/option&gt;
&lt;option value=4&gt;New&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;

&lt;div class='form-group'&gt;
&lt;label&gt;Price: &lt;/label&gt;
&lt;input id='itemPrice' type='text' name='itemPrice' /&gt;
&lt;/div&gt;

&lt;div class='form-group'&gt;
&lt;label&gt;Description: &lt;/label&gt;
&lt;textarea id='itemDescription' name='itemDescription'&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;/form&gt;";
 // }
?&gt;

&lt;/div&gt;
&lt;script&gt;

function selectionHandler(selectedAction, selectedValue) {
var gameData = "selection=" + selectedAction + "&amp;detail=" + selectedValue;

alert(gameData);


 $.ajax({
type: 'POST',
url: 'filter.php',
data: gameData,
success: function(returnData) {

if(selectedAction == 'category') {
$('#itemSelection').html(returnData);
} if(selectedAction == 'game') {
$('#itemPrice').val(returnData)
} else {
$('itemDescription').val(returnData);
} 

} // end return
});   // end ajax 
} // end handler

$(document).ready(function() {
$("#categorySelection").on("change", selectionHandler('category', "test" ) ) ;
$("#itemSelection").on('change', selectionHandler('game',  "test" ) );
$("#conditionSelection").on('change', selectionHandler('condition',  "test" ) );

}); // end ready
&lt;/script&gt;
&lt;?php

include('footer.php');
?&gt;
</code></pre>

<p>and my PHP</p>

<pre><code>&lt;?php
include("header.php");
$db = new pdoAccess("localhost","root","");

$selection = $_POST['selection']; // either game, category, or condition

$detail = $_POST['detail'] // either categoryID or ISBN/Item ID
if($selection == 'category') {
$products = $db-&gt;filterByCategory($detail);
$html = "";
foreach($products as $product) {
$html += "&lt;option value={$product-&gt;upc)}&gt;$product-&gt;title&lt;/option&gt;";
}
return $html;
} elseif ($selection = 'game') {
return $db-&gt;getProductPrice($detail);
} else {
return $db-&gt;getCategoryDescription($detail);
}

?&gt;
</code></pre>

<p>Thanks!</p>

<p>EDIT: It should be noted that I also tried other events such as focusout and select. Same issue.</p>