Passing data using jQuery AJAX to PHP script - php

Question

HTML, AJAX and PHP included below. Before introducing AJAX, everything functions (form tags and PHP processing values removed from HTML below).
The drop-down (categories) is populated from a MySQL query. When the user selects an option, I want to pass the ID via ajax to a PHP script (index.php) to run a MySQL query to populate another drop-down (sub-categories).
The Chrome console log indicates that ajax is passing the ID correctly.
Firebug also shows it passing and that the URL is correct (index.php?business_category_id=ajax-passed value). If the GET variable is being passed, and my PHP script is looking for it, why is the script not responding? Why is it not receiving the value? I cannot echo it, so I know it's not being received.
The ajax script is in js/script.js, index.php (my controller) is in the root, and the page with the html (buy-a-biz.php) is in the root and included in the php script (see below).
If anyone can help, I'd appreciate it very much. I am new to using jQuery ajax.
HTML.
<select name="category" id="business-category">
<option value="all_categories">Select category</option>
<?php foreach ($categories as $category): ?>
<option value="<?php htmlout($category['id']); ?>"><?php htmlout($category['name']); ?></option>
<?php endforeach; ?>
</select>
AJAX. I experimented using $.get and $.post also.
$(document).ready(function(){
$("#business-category").change(function(){
var category_id = $(this).val();
console.log(category_id);
$.ajax({
type: 'GET',
url: 'index.php',
data: { business_category_id: category_id },
success: function(category_id){
$("#result").html(category_id + ' submitted successfully!');
}
});
});
});
PHP.
if(isset($_GET['business_category_id'])){
$category_id = htmlspecialchars($_GET['business_category_id']);
include 'includes/dbconnect.php';
try {
$sql = "SELECT * FROM sub_category
WHERE category_id = :category_id";
$s = $db->prepare($sql);
$s->bindValue(":category_id", $category_id);
$s->execute();
while($row = $s->fetch(PDO::FETCH_ASSOC)){
$sub_categories[] = array(
'id' => $row['id'],
'category_id' => $row['category_id'],
'name' => $row['name']
);
}
$sql2 = "SELECT * FROM category";
$s2 = $db->prepare($sql2);
$s2->execute();
while($row = $s2->fetch(PDO::FETCH_ASSOC)){
$categories[] = array(
'id' => $row['id'],
'name' => $row['name'],
);
}
}
catch (PDOException $e) {
$errMsg = "Error fetching data" . $e->getMessage();
include 'error.html.php';
exit();
}
include 'buy-a-biz.php';
exit();
}

Answer 1

You are passing a done callback to $.ajax. You should either name this callback success
$.ajax({
type: 'GET',
url: 'index.php',
data: { business_category_id: category_id },
success: function(category_id){
$("#result").html(category_id + ' submitted successfully!');
}
});
or invoke done on the promise returned by $.ajax:
$.ajax({
type: 'GET',
url: 'index.php',
data: { business_category_id: category_id },
}).done(function(category_id) {
$("#result").html(category_id + ' submitted successfully!');
});