I have this form with a category select tag and a subcategory select tag. I then have the following jQuery file which populates the subcategory select depending on which category has been selected. All the information comes from a database:
<script>
$(document).ready(function() {
$('#category').change(function() {
var val = $(this).val();
if (val == '') {
$('#subcategory').html("<option value=''>Any</option>");
<?php foreach ($categories as $category) :
$id = $category['cat_id'];
?>
} else if (val == <?php htmlout($id); ?>) {
$('#subcategory').html("<option value=''>Any</option><?php $sql = "SELECT subcat_id, subcat_name FROM subcategory WHERE cat_id = $id ORDER BY cat_id";
$result = mysqli_query($link, $sql);
if (!$result)
{
$error = 'Error fetching subcategory details.';
include $_SERVER['DOCUMENT_ROOT'] . '/includes/error.html.php';
exit();
}
while ($row = mysqli_fetch_array($result))
{
$subcategories[] = array('subcat_id' => $row['subcat_id'], 'subcat_name' => $row['subcat_name']);
}
foreach ($subcategories as $subcat) : ?><option value=<?php htmlout($subcat['subcat_id']); ?>><?php htmlout($subcat['subcat_name']); ?></option><?php endforeach; ?>");<?php $subcategories = array();
endforeach;
?>
}
});
});
</script>
There are nine categories, and all but one of them work perfectly. Just one doesn’t. I am sure that it doesn’t matter, but its row id is 5. What happens is that it puts all of the subcategory items into its option values. But if I change the jQuery to:
<script>
$(document).ready(function() {
$('#category').change(function() {
var val = $(this).val();
if (val == '' || or val== '5') {
$('#subcategory').html("<option value=''>Any</option>");
<?php foreach ($categories as $category) :
$id = $category['cat_id'];
?>
} else if (val == <?php htmlout($id); ?>) {
$('#subcategory').html("<option value=''>Any</option><?php $sql = "SELECT subcat_id, subcat_name FROM subcategory WHERE cat_id = $id ORDER BY cat_id";
$result = mysqli_query($link, $sql);
if (!$result)
{
$error = 'Error fetching subcategory details.';
include $_SERVER['DOCUMENT_ROOT'] . '/includes/error.html.php';
exit();
}
while ($row = mysqli_fetch_array($result))
{
$subcategories[] = array('subcat_id' => $row['subcat_id'], 'subcat_name' => $row['subcat_name']);
}
foreach ($subcategories as $subcat) : ?><option value=<?php htmlout($subcat['subcat_id']); ?>><?php htmlout($subcat['subcat_name']); ?></option><?php endforeach; ?>");<?php $subcategories = array();
endforeach;
?>
}
});
});
</script>
The change is in the fifth line of the jQuery, counting <script> as line 1. With that change, it then leaves the subcategory select dropdown as “Any” and when the user submits the form, they get all the items in that category, which is preferable to selecting the wrong subcategory and having it return an error message.
I have checked the database, it is OK. Also, I have used this same piece of jQuery in another website, and the only thing I had to do was change one of the id selectors.
Any help would be appreciated, as this is driving me nuts.
We cannot determine much in the way of issues with the jQuery code since much of it is built in the server.
The only significant issue that I see is that the option values aren’t delimited by quotes (preferably double quotes for HTML attributes).
Can you link us to a test page that exhibits the problem?
If you select any category except the top one (Combine Crop Lifters) you will see the php working correctly. I think the most subcategories that come up are eight. When you select the top category, all the subcategories appear. To say the least it is very frustrating, and at worst, quite confusing, because if you select the wrong subcategory, the request will return no results.
It seems that all of the options (including Combine Crop Lifters) work for me in both Chrome and IE.
Combine Crop Lifters contains options that contain, Aerator Points, Bale Fork Tine Parts, and so on.
Is it possible that what you’re noticing is just that the width of the dropdown box doesn’t change between Combine Crop Lifters and Cultivation Parts? That would be due to both dropdowns contain the same options at the widest width, Slipdown Point Clamp Assemblies.
I checked again and I still have the same troubles. What I should have mentioned is that when you select Combine Crop Lifters, there should only be four subcategories: Palmer Bolt-on, Floating, Clipon and Spring-clip lifter spool. Are you saying that is what you see. If there is someway that I could show you my Mysql tables you would see that is the case.
If all of those options are not supposed to appear, then it’s not the JavaScript causing the problem, but something to do with the PHP code that created it, or the contents of the database instead.
I’ll move this thread over to the PHP forum to see if they can help you any further.
Problem RESOLVED! Thanks to Paul, for getting me to consider that the problem may have been a php one (I thought it was my jQuery) I really searched all my code that was involved with this part of the site. I found that just prior to going to the page where the jQuery was called, I had already read all the subcategories from the database. Somehow this obviously conflicted with the first category’s subcategory list. After that first check of which subcategories went with what categories, everything worked as it should. Getting rid of the redundant SELECT getting all the subcategories fixed the problem.