I'm trying to get this fixed for hours now. The thing is that I don't get any errors. So here is the problematic code:
error_reporting(E_ALL);
ini_set('display_errors', 1);
//Include database configuration file
include('includes/config.php');
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
    //Get all state data
    $query = $dbh->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");
    //Count total number of rows
    $rowCount = $query->rowCount();
    //Display states list
    if($rowCount > 0){
        echo '<option value="">Select state</option>';
        while($row = $query->fetch(PDO::FETCH_ASSOC)){ 
            echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
        }
    }else{
        echo '<option value="">State not available</option>';
    }
}
Here is the working one:
    <script type="text/javascript">
$(document).ready(function(){
    $('#country').on('change',function(){
        var countryID = $(this).val();
        if(countryID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'country_id='+countryID,
                success:function(html){
                    $('#state').html(html);
                }
            }); 
        }else{
            $('#state').html('<option value="">Select country first</option>');
        }
    });
});
    </script>
    <?php
    //Get all country data
    $query = $dbh->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");
    //Count total number of rows
    $rowCount = $query->rowCount();
    ?>
<div class="form-group">
<label class="col-sm-2 control-label">Country<span style="color:red">*</span></label>
<div class="col-sm-4">
    <select name="country" id="country" class="form-control" required>
        <option value="">Select Country</option>
        <?php
        if($rowCount > 0){
            while($row = $query->fetch(PDO::FETCH_ASSOC)){ 
                echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
            }
        }else{
            echo '<option value="">Country Not Found</option>';
        }
        ?>
    </select>
</div>
<label class="col-sm-2 control-label">State<span style="color:red">*</span></label>
<div class="col-sm-4">
    <select name="state" id="state" class="form-control" required>
        <option value="">Select a State</option>
    </select>
</div>
</div>
So any help would be appreciate, I can't understand why in the first file it is not working and in the second it is. Thanks in advance. I search and checked a lot of questions here on stackoverflow but I didn't got my answer yet...
