Ajax not populating multiple dropdowns

Question

So I am trying to populate a category, sub category and vendor dropdown menu for a backend and im trying to use ajax. When I select a category the subcategories do not populate and there is no console errors.

dropdown.js

$(document).ready(function() {

$(document).on('change','#catid', function() {
var catid = $(this).val();
if(catid != "") {
  $.ajax({
    url:"get_data.php",
    type:'POST',
    data:{catid:catid},
    success:function(response) {
      //var resp = $.trim(response);
      if(response != '') {
        $("#subcatid").removeAttr('disabled','disabled').html(response);
        $("#vendorid").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
      }
      else $("#subcatid, #vendorid").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
    }
  });
} else {
  $("#subcatid, #vendorid").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
}


});

  $(document).on('change','#subcatid', function() {
      var subcatid = $(this).val();
      if (subcatid != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data: { subcatid: subcatid},
        success:function(response) {
        if (response != '') 

$("#vendorid").removeAttr('disabled','disabled').html(response);
        else $("#vendorid").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
        }
      });
    } else {
        $("#vendorid").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
    }
  });
});

I am not sure that this code is completely correct as I tried to convert my code from sqli to PDO which may be what broke the code but I am not sure if that is what it is because the js still doesn't seem to make anything change. get_data.php:

<?php 
include_once "../header.php";

if (isset($_POST['catid'])){
$sql = "select * from subcategories where catid =" . $_POST['catid'];    

$stmt = $pdo->prepare($sql);
$stmt->execute();
$data = $stmt->fetch();
$stmtCount = $stmt->rowCount();
$result = $stmt->fetch(PDO::FETCH_ASSOC);

if ($stmtCount >= 1) {
    echo 'option value="">------- Select -------</option>';


    foreach ($result as $row) {
        echo "<option value='" . $row['subcatid'] . "'>" . 
$row['subcatname'] . "</option>";
    }

} else {
    echo '<option value="">No Record</option>';
}

} else if (isset($_POST['subcatid'])) {
$sql = "select * from vendors where subcatid =" . $_POST['subcatid'];

$stmt = $pdo->prepare($sql);
$stmt->execute();
$data = $stmt->fetch();
$stmtCount = $stmt->rowCount();

if ($stmtCount >= 1) {
    echo 'option value="">------- Select -------</option>';
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

    foreach ($result as $row) {
        echo "<option value='" . $row['vendorid'] . "'>" . $row['vendorid'] 
. "</option>";
    }

} else {
    echo '<option value="">No Record</option>';
}
}

?>

*"I am not sure that this code is completely correct as I tried to convert my code from sqli to PDO which may be what broke the code"* - Try a test file with only php and see if you get back an "Connected" message in a conditional statement. If that works then test for errors on the query and for the php. If you get back something, then it's your ajax and I'm not the guy for that. — Funk Forty Niner, Mar 26 '18 at 00:05
Stop playing in the dark and [turn on PHP error reporting](https://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display). — Mikey, Mar 26 '18 at 02:04

score 1 · Answer 1 · answered Mar 26 '18 at 00:00

1

It might have something to do with the response, make sure your PHP script is not throwing any errors, for they'll become part of the response, you should first test your PHP file by console.log()-ing the response so you can see what's going on.

success: function(response)
         {
           console.log(response);
         }

Also, I see you're expecting a text response, if so you should specify that on the ajax parameters:

dataType: 'text'

What Andrew Chart said is worth trying as well.

Hope it helped.

answered Mar 26 '18 at 00:00

MarksASP

494
6
15

When I try to use this nothing is outputted into the console. so this could possibly be the issue? – Sean Mar 26 '18 at 00:17
You sould also check if the success callback function is even running. `console.log("Hello")` just to test it. – MarksASP Mar 26 '18 at 00:30
The success is not working you are correct on that. @MarksASP – Sean Mar 28 '18 at 16:53

score 0 · Answer 2 · answered Mar 25 '18 at 23:57

0

Try quoting the key in your AJAX data:

data: { "subcatid" : subcatid },

answered Mar 25 '18 at 23:57

Andrew Chart

623
6
10

Actually having quickly tried it, I don't think this is necessary. It is submitted as `$_POST['subcatid']` even when unquoted. – Andrew Chart Mar 26 '18 at 00:07

score 0 · Answer 3 · answered Mar 26 '18 at 01:57

Try using the "network" tab in the chrome devtools to check if the ajax is sending the data to the php file, and check the php file response. First check the request is being done, then check with an print_r($_POST) that the data you want to send is the one that the php file is receiving and finally check if the php is printing what you want.

Ajax not populating multiple dropdowns

3 Answers3