PHP Ajax na estrutura MVC

[Eder Cuer]

Eae galera.

 

Recentemente terminei um curso de MVC e para praticar resolvi pegar um projeto antigo e estruturar com MVC. Porém surgiu um problema.

Na página de registro eu faço o seguinte, assim que o usuário seleciona um estado as cidades são carregadas via Ajax, nessa estrutura de MVC eu não estou conseguindo fazer as cidades serem carregadas.

 

Meu código js:

 

$(document).ready(function() { 
    $('#estado').on('change',function() { 
        $.ajax({ 
            type: 'POST', 
            //url: 'list/lista_cidades.php', modelo antigo 
            url: 'CityController/cityLoad',
            dataType: 'html', 
            data: {'estado': $('#estado').val()}, 
            // Antes de carregar os registros, mostra para o usuário que está 
            // sendo carregado. 
            beforeSend: function(xhr) { 
                $('#cidade').attr('disabled', 'disabled'); 
                $('#cidade').html('<option value="">Carregando...</option>'); 
            }, 
            // Após carregar, coloca a lista dentro do select de cidades. 
            success: function(data) { 
                if ($('#estado').val() !== '') { 
                    // Adiciona o retorno no campo, habilita e da foco 
                    $('#cidade').html('<option value="">Selecione</option>'); 
                    $('#cidade').append(data); 
                    $('#cidade').removeAttr('disabled').focus(); 
                } else { 
                    $('#cidade').html('<option value="">Selecione</option>'); 
                    $('#cidade').attr('disabled', 'disabled'); 
                } 
            }, 
            error: function (e) { 
                //called when there is an error 
                console.log(e.message); 
            } 
        }); 
    }); 
});

 

 

Bom, basicamente o Ajax chama meu método cityLoad do controller CityController e eu acredito que é ai que não estou conseguido tratar os dados.

CityController.php

 

 

namespace App\Controllers; 
use DM\Controller\Action; 
use DM\DI\Container; 
class CityController extends Action 
{ 
    public function cityLoad($id)
    { 
        $id = filter_input(INPUT_POST, 'estado', FILTER_VALIDATE_INT); 
        $cidade = Container::getModel("Cidade"); 
        $this->views->cidades = $cidade->findCities($id); 
    } 
}

 

 

Com eu fui seguindo um curso que fiz (School of Net) foi desenvolvido um mini framework, e o arquivo que chama o método findCities é esse:

 

<?php 
namespace DM\Model; 
abstract class Table 
{ 
    protected $db; 
    protected $table; 
    public function __construct(\PDO $db) 
    { 
        $this->db = $db; 
    } 
    public function fetchAll()
    { 
        $query = "SELECT * FROM {$this->table} ORDER BY nome ASC"; 
        return $this->db->query($query); 
    } 
    public function findCities($id) 
    { 
        $sqlCidade = 'SELECT * FROM tb_cidades WHERE estado_id = :codestado ORDER BY nome ASC'; 
        $resCidade = $con->prepare($sqlCidade); 
        $resCidade->execute(array( ':codestado' => $codEstado )); 
        $cidades = $resCidade->fetchAll(); 
    } 
}

 

 

Pelo que pude perceber não estou conseguindo encaixar a requisição Ajax com a estrutura, enviar esse id e apresentar os dados.

Deve ser algum problema no entendimento do conceito de MVC.

 

Minha view é essa:

<div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="estado" class="col-form-label">Estado</label>
                        <select id="estado" class="form-control" name="estado" >
                            <option value="">Selecione</option>
                            <?php foreach ($this->views->estados as $estado): ?>
                                <option value="<?php echo $estado['id'] ?>"><?php echo utf8_encode($estado['nome']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="cidade" class="col-form-label">Cidade</label>
                        <select id="cidade" class="form-control" name="cidade">
                            <option value="">Selecione</option>
                        </select>
                    </div>
                </div>

 

[Eder Cuer]

Com a ajuda de um colega de trabalho consegui resolver.

 

Eu não me atentei a um detalhe aqui. No modo procedural eu populava os "<option>" com um foreach e quando fui passar para MVC isso não existia mais, sem falar na configuração de rotas, então ficou assim:

 

arquivo js que faz a requisição Ajax:

 

$(document).ready(function() {
    $('#estado').on('change',function() {
        $.ajax({
            type: 'POST',
            //url: 'list/lista_cidades.php',
            url: 'CityController',
            dataType: 'json',
            data: {'estado': $('#estado').val()},

            // Antes de carregar os registros, mostra para o usuário que está
            // sendo carregado.
            beforeSend: function(xhr) {
                $('#cidade').attr('disabled', 'disabled');
                $('#cidade').html('<option value="">Carregando...</option>');

            },
            // Após carregar, coloca a lista dentro do select de cidades.
            success: function(data) {
                if ($('#estado').val() !== '') {
                    var content = '';
                    $('#cidade').html('<option value="">Selecione</option>');
                    $.each(data,function(key,value){
                        content += '<option value="'+value['id']+'">'+value['nome']+'</option>';
                    });
                    $('#cidade').append(content);
                    $('#cidade').removeAttr('disabled').focus();
                } else {
                    $('#cidade').html('<option value="">Selecione</option>');
                    $('#cidade').attr('disabled', 'disabled');

                }
            },
            error: function (e) {
                //called when there is an error
                console.log(e.message);
            }
        });
    });
});

 

 

CityController

 

<?php

<?php

namespace App\Controllers;

use DM\Controller\Action;
use DM\DI\Container;

class CityController extends Action
{
	public function cityLoad(){
		$codEstado = filter_input(INPUT_POST, 'estado', FILTER_VALIDATE_INT);

		$cidade = Container::getModel("Cidade");
		echo json_encode($cidade->findCities($codEstado));
	}
}

 

 

Acabei mudando um pouco o select

 

<?php

namespace DM\Model;

abstract class Table
{
	protected $db;
	protected $table;

	public function __construct(\PDO $db)
	{
		$this->db = $db;
	}

	public function fetchAll()
	{
		$query = "SELECT * FROM {$this->table} ORDER BY nome ASC";
		return $this->db->query($query);
	}

	public function findCities($id)
	{
		$sqlCidade = 'SELECT * FROM tb_cidades WHERE estado_id = :codestado ORDER BY nome ASC';

		$resCidade = $this->db->prepare($sqlCidade);
		$resCidade->execute(array(':codestado'=>$id));

		return $resCidade->fetchAll();

	}
}

 

 

E aqui a configuração da rota que eu não estava fazendo antes

 

<?php

namespace App;

use DM\Init\Bootstrap;

class Route extends Bootstrap
{
	protected function initRoutes()
	{
		$routes['home'] = array('route'=>'/','controller'=>'indexController','action'=>'index');
		$routes['contact'] = array('route'=>'/contact','controller'=>'indexController','action'=>'contact');
		$routes['add_case'] = array('route'=>'/add_case','controller'=>'indexController','action'=>'addCase');
		$routes['register'] = array('route'=>'/register','controller'=>'indexController','action'=>'register');
		$routes['CityController'] = array('route'=>'/CityController','controller'=>'CityController','action'=>'cityLoad');
		$this->setRoutes($routes);
	}
}