Bem-vindos à nossa comunidade!

Junte-se a nós e faça parte hoje mesmo!

Como pre-selecionar e listar registos para edição de um registo com mysql+php+jquery+Ajax <option> do <select>

ayrton_pereira

Novo Membro
Cadastro
19/1/21
Postagens
2
Curtidas
1
Pontuação
3
Cidade
Quelimane
Boas, pessoal! Estou com um problema já faz um dia e não vejo luz no fim do túnel. Estou usando neste projecto php 7, mysql, jquery com ajax. A situação é a seguinte:
Estou a desenvolver a funcionalidade de edição de registos, ao escolher o registo a editar abre um modal e os campos do formulário devem ser preenchido. Consegui sem problema com inputs:text e também nos campos de input:date. Mas estou com dificuldade em pegar os dados que vêm do back e preencher no <option> do <select>.

Formulario de edicao

HTML:
<div class="modal fade" id="modalEdicaoFuncionario" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalEdicaoFuncionario" aria-hidden="true">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <h2 class="modal-title">Edição de funcionário</h2>                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"> </button>            </div>            <div class="modal-body">                <form id="frmRegistoFuncionario" class="row" method="POST">                    <div class="alert alert-danger alert-dismissible fade show error-fields-registo-funcionario" role="alert"><i class="fas fa-exclamation-triangle"></i> Preencha os campos que são obrigatórios                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>                    </div>                    <div class="col-12">                        <label for="txtIdFuncionarioEdicao" class="form-label">Código</label>                        <input type="text" name="txtIdFuncionarioEdicao" id="txtIdFuncionarioEdicao" class="form-control" disabled>                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-12">                        <label for="txtNomeFuncionarioEdicao" class="form-label">Nome completo</label>                        <input type="text" name="txtNomeFuncionarioEdicao" id="txtNomeFuncionarioEdicao" class="form-control" placeholder="Nome completo do funcionário">                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtDataNascimentoEdicao" class="form-label">D. Nascimento</label>                        <input type="date" id="txtDateEdicao" name="txtDateEdicao" class="form-control">                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtBI" class="form-label">Nº BI</label>                        <input type="text" name="txtBIEdicao" id="txtBIEdicao" placeholder="Nº de BI" class="form-control" maxlength="13" minlength="13">                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtNUIT" class="form-label">Nº NUIT</label>                        <input type="text" name="txtNUITEdicao" id="txtNUITEdicao" placeholder="NUIT" class="form-control" maxlength="9" minlength="9">                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtDepartamento" class="form-label">Departamento</label>                        <select class="form-control" name="txtDepartamentoEdicao" id="txtDepartamentoEdicao">                            <option selected>Escolha o departamento</option>                            <?php                            $sqlPesquisaDepartamentosEdicao = "SELECT idDepartamento, nomeDepartamento from departamentos";                            $resultPesquisaDepartamentosEdicao = mysqli_query($conexao, $sqlPesquisaDepartamentosEdicao);                            while ($dadosEdicao = mysqli_fetch_row($resultPesquisaDepartamentosEdicao)) : ?>                                <option value="<?php echo $dadosEdicao[0]; ?>"> <?php echo $dadosEdicao[1]; ?> </option>                            <?php endwhile; ?>                        </select>                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtEscalao" class="form-label">Escalão</label>                        <select class="form-control" name="txtEscalaoEdicao" id="txtEscalaoEdicao">                            <option selected>Escolha o escalão</option>                            <option value="1">1</option>                            <option value="2">2</option>                            <option value="3">3</option>                            <option value="4">4</option>                        </select>                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtClasse" class="form-label">Classe</label>                        <select id="txtClasseEdicao" name="txtClasseEdicao" class="form-control">                            <option selected>Escolha a classe</option>                            <option value="A">A</option>                            <option value="B">B</option>                            <option value="C">C</option>                        </select>                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtCargo" class="form-label">Cargo</label>                        <input type="text" name="txtCargoEdicao" id="txtCargoEdicao" class="form-control" placeholder="Cargo do funcionário">                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <label for="txtDataInicioCarreira" class="form-label">Inicio carreira</label>                        <input type="date" name="txtDataInicioCarreiraEdicao" id="txtDataInicioCarreiraEdicao" class="form-control">                        <div class="campo-invalido-vazio">                            <i class="fas fa-times"></i>Campo obrigatório!                        </div>                    </div>                    <div class="col-4">                        <button type="submit" class="btn btn-success btn-form" id="btnRegistarFuncionario">Salvar funcionário</button>                    </div>                </form>            </div>        </div>    </div> </div>


Função JS para pegar os dados da base de dados do registo e preencher os campos de edição
JavaScript:
function recuperarDadosFuncionario(idFuncionario) {
            $.ajax({
                type: "POST",
                data: "idFuncionario=" + idFuncionario,
                url: "../procedimentos/funcionarios/recuperarDadosFuncionario.php",
                success: function(r) {

                    dados = jQuery.parseJSON(r);
                    console.log(dados);
                    $('#txtIdFuncionarioEdicao').val(dados['idFuncionario']);
                    $('#txtNomeFuncionarioEdicao').val(dados['nomeFuncionario']);
                    $('#txtDateEdicao').val(dados['dataNascimento']);
                    $('#txtBIEdicao').val(dados['numeroBI']);
                    $('#txtNUITEdicao').val(dados['numeroNUIT']);
                    $('#txtDepartamentoEdicao').val(['idDepartamento']);
                    $('#txtEscalaoEdicao option').val(dados['escalao']).prop('selected', true);
                    $('#txtClasseEdicao option').val(dados['classe']).prop('selected', true);
                    $('#txtCargoEdicao').val(dados['cargo']);
                    $('#txtDataInicioCarreiraEdicao').val(dados['dataInicioCarreira']);

                },
            })
        }


PHP:
public function recuperarDadosFuncionario($idFuncionario){     
   $con = new Conexao();    
   $conexao = $con->conectar();
   $sql = "SELECT f.idFuncionario, f.idDepartamento, f.nomeFuncionario, f.dataNascimento, f.numeroNUIT, f.numeroBI, f.escalaoFuncionario, f.classeFuncionario, f.cargo, f.dataInicioCarreira, f.dataRegisto, d.nomeDepartamento from funcionarios as f join departamentos as d on f.idDepartamento = d.idDepartamento";        $resultado =  mysqli_query($conexao, $sql);        $resultadoItem = mysqli_fetch_row($resultado);        $dados = array(            "idFuncionario" => $resultadoItem[0],            "idDepartamento" => $resultadoItem[1],            "nomeFuncionario" =>  $resultadoItem[2],            "dataNascimento" => $resultadoItem[3],            "numeroNUIT" => $resultadoItem[4],            "numeroBI" => $resultadoItem[5],            "escalao" => $resultadoItem[6],            "classe" => $resultadoItem[7],            "cargo" => $resultadoItem[8],            "dataInicioCarreira" => $resultadoItem[9],            "dataRegisto" => $resultadoItem[10],            "nomeDepartamento" => $resultadoItem[11]        );        return $dados;    }
 
Top