Cascading dropdowns in CakePHP 4

Need Help
16

when accessing the http://localhost/countries/stateslist/?id=1 it shows Object not found!

555
555868×227 20.5 KB

and the apache access log shows:

::1 - - [22/Jun/2020:07:18:06 +0800] “GET /countries/stateslist/?id=1 HTTP/1.1” 404 1223 “http://localhost/cake4/countries/select” “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36”

in the stateslist, is redirect to the index which will lead to http://localhost/cake4/countries/select

public function stateslist() {  
if ($this->request->is('ajax') && null !== $this->request->getQuery('id')) {
        $states = $this->Countries->States->find('list', array('conditions' => array('country_id' => $this->request->getQuery('id'))));
        $this->set(compact('states'));
} else {
    return $this->redirect(['action' => 'index']);
}

}

then if I changed the js in stateslist.php to /cake4/… it still errors.

    <script type="text/JavaScript">
    $(document).ready(function(){
        $("#states").attr("disabled","disabled");
        $("#countries").change(function(){
            $("#states").attr("disabled","disabled");
            $("#states").html("<option>Please wait...</option>");
            var id = $("#countries option:selected").attr('value');
            $.get("/cake4/countries/stateslist/", {id:id}, function(data){
                $("#states").removeAttr("disabled");
                $("#states").html(data);
            });
        });
    });
</script>

my db table:

countries (id,name)
states (id,name)