PHP OO Realizar llamada a controlador mediante AJAX

[detective_jd]

Buenas a todos, ando con una consulta para hacerles, resulta que estoy haciendo una llamada ajax a un controlador php para evitar que se abran 2 páginas para hacer un alta y la verdad nunca usé ajax hasta ahora, pero intento y no consigo nada, le hago click en el botón "Aceptar" y no se inmuta para nada.
Pongo el código

DepartamentosController.php

Código PHP:

public function add(){
        if(isset($_POST["btnaceptar"])){ 
            try {
                $entity = $this->createEntity();
                $entity->create();
                Session::set("msg",Session::msgSuccess("Departamento Creado"));
                header("Location:index.php?c=departamentos&a=index");
                exit();                    
            } catch (\Exception $ex) {
                Session::set("msg",Session::msgDanger($ex->getMessage()));                   
            }
        }
        
        $this->redirect("add.php");
    }
 

Departamentos/index.php

Código PHP:

<h3><i class="fa fa-angle-right"></i>&nbsp;Mantenimiento de Departamentos</h3>
......
    <!-- Modal -->
<div class="modal fade" id="AMModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="AMDocumento" method="post">
                <div class="modal-header">
                    <h3 class="modal-title">
                        <i class="fa fa-angle-right"></i>&nbsp;Crear Departamento
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">        
                    <div class="form-group">
                        <label class="col-form-label">Nombre (*):</label>                      
                        <input type="text" name="txtnombre" id="nombre" class="form-control" autofocus="autofocus" required="required" />                        
                    </div>                
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="hid" id="id" value="0" />
                    <button 
                        type="submit" 
                        name="btnaceptar" 
                        value="Aceptar"
                        id="aceptar"
                        class="btn btn-success"
                    >
                        <i class="fa fa-check"></i>&nbsp;Aceptar
                    </button>
                    <button 
                        type="button" 
                        name="btncancelar" 
                        value="Cancelar" 
                        class="btn btn-danger" 
                        data-bs-dismiss="modal"
                    >
                        <i class="fa fa-times"></i>&nbsp;Cancelar
                    </button>
                </div>
            </form>            
        </div>        
    </div>
  </div>
</div>
<script src="Public/js/crud/departamento.js"></script>
 

departamento.js

Código PHP:

$(function() {
    $('#AMDocumento').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            type:'POST',
            url:'index.php?c=departamentos&a=add',
            data: $('#AMDocumento').serialize(),
            dataType: 'json',
            success: function(dataResult){
                var result = JSON.parse(dataResult);
                if(result.statusCode===200){
                    $('#AMDocumento').hide();
                }
            }
        });
    });
});
 

Necesito su ayuda para ver cómo hacer andar los ajax.
Espero sus respuestas y saludos.

[vb2005]

Por lo que leo de tu código, el problema es que el listener de .submit() está en la funcion de jquery que no se llama.

Tiene que ser asi:

Código PHP:

Posted in: Using jQuery Core
$( document ).ready(function(){
... tu código
})
 

[detective_jd]

Primero que todo gracias por responderme, funcionó lo que me dijiste pero también necesitaba poner el botón en el data:

departamento.js:

Código Javascript:

$(document).ready(function(){
    $('#AMDocumento').submit(function(e) {
        e.preventDefault();
        
        var myData = {
            btnaceptar: $("#aceptar").val(),
            hid: $("#id").val() !== null ? $("#id").val() : 0,
            txtnombre: $("#nombre").val()
        };
        
        $.ajax({
            type:'POST',
            url:'index.php?c=departamentos&a=add',
            data: myData,            
            success: function(){                
                $('#AMDocumento').hide();                
            }
        });
    });
});
 

Y me inserta bien pero ahora como problema estoy teniendo que la pantalla se pone gris después de que el modal se oculta al lograr la inserción, pareciendo que esta bloqueada hasta que hago un click.

Por otro lado:

¿cómo puedo hacer para que el mensaje que coloco aparezca luego de que la inserción funcione?

layout.php (vista generica que las otras heredan):

Código PHP:

<body>
        <?php echo $menu; ?>
        <section>
            <div id="main">
                <?php
                    if (\App\Session::get('msg') != null) {  ?>
                        <div class="alert alert-<?php echo \App\Session::get('msg')[0]; ?> alert-dismissible fade show">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            <i class="fa fa-<?php echo \App\Session::get('msg')[1]; ?>" style="font-size: 24px;"></i>&nbsp;
                            <?php echo \App\Session::get('msg')[2]; ?>
                        </div>                        
                <?php    
                        \App\Session::set('msg', "");                     
                    } 
                    echo $content;        
                ?>
            </div>
        </section>       
    </body>
 

¿cómo puedo hacer que la grilla de datos que es independiente de si tiene filtro o no cargue la fila insertada desde el ajax?

Espero sus respuestas y saludos.

[detective_jd]

Pude hacer que el modal se cierre sin problema con esto:

Código Javascript:

$('#AMModal').modal('hide');
 

Intenté poner datatable de jquery, pero por alguna razón no carga el datatable ni llega el ajax a consumir la función del controlador:

DepartamentosController.php:

Código PHP:

public function obtenerTodos(){
        //luego agrego los filtros
        $tabla = (new Departamento())->find();
        //return $tabla;
        echo json_encode($tabla);
    }
 

departamento.js

Código Javascript:

$("#tablaDep").DataTable({
            processing: true,
            serverSide: true,
            serverMethod: "post",
            pageLength: 10,
            ajax: {
                url: 'index.php?c=departamentos&a=obtenerTodos'
                
            },
            columns: [
                {
                    data: "id"
                },
                { data: "nombre" },
                { data: "estado" }
            ]
        });
 

index.php:

Código HTML:

....
<table class="table table-bordered table-striped table-condensed" id="#tablaDep">
        <thead>
            <th></th>
            <th>Nombre</th>
            <th>Estado</th>
        </thead>
    </table>
 

Necesito tener esto listo, pero no sé que hacer si el ajax no reacciona.
Espero sus respuestas y saludos.

[detective_jd]

Buenas a todos, al final pude generar el listado desde ajax y hacer click en los botones de paginación realizando los siguientes cambios:

DepartamentoController.php

Código PHP:

public function obtenerTodos(){
        $json = [];
        
        Session::set('pDep', isset($_GET['p']) ? $_GET['p'] : 1);
        
        if(isset($_POST['stEstado'])){
            Session::set('eDep', $this->clean($_POST['stEstado']));
        } else {
            Session::set('eDep', Session::get('eDep'));
        }
        
        if(isset($_POST['txtbuscador'])){
            Session::set('bDep', $this->clean($_POST['txtbuscador']));
        } else {
            Session::set('bDep', Session::get('bDep'));
        }
        
        $params = [
            "criterio"=> "%".Session::get('bDep')."%",
            "estado" => Session::get('eDep')
        ];
        
        $tabla = (new Departamento())->find($params);
        
        $departamentos = $this->getPaginator()->paginar($tabla, Session::get('pDep'));
        $paginador = $this->getPaginator()->getPages();
        
        foreach($departamentos as $dep){
            array_push($json, [
                "id" => $dep->getId(), 
                "nombre" => $dep->getNombre(),
                "activo" => $dep->isActivo()
            ]);
        }
        
        header("Content-Type: application/json");
        echo json_encode([
            "tabla" => $json,
            "paginador" => $paginador
        ]);
    }
 

departamento.js

Código Javascript:

function load_data(page_number = 1){
        $.ajax({
            url: "index.php?c=departamentos&a=obtenerTodos",
            type: "GET",
            dataType: "JSON",
            data: {
                txtbuscador: $("#buscador").val(),
                p: page_number
            },
            success: function(data) {
                var paginador = data.paginador;
                var tabla = data.tabla;
                var vTabla = '';
                var vPaginador = '';
                var i;
 
                for (i = 0; i < tabla.length; i++) {
                    vTabla += '<tr>' +
                    '<td></td>' +
                    '<td>' + tabla[i].nombre + '</td>' +
                    '<td>' + (tabla[i].activo ? "Activo" : "Inactivo") + '</td>' +
                    '</tr>';
                }
 
                if(paginador !== null){
                    vPaginador += "<div class='d-flex justify-content-center'>";
                    vPaginador +="<ul class='pagination' id='pagination'>";
 
                    if(paginador["primero"]){
                        vPaginador += "<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["primero"] +"' title='Primero'>";
                        vPaginador +="<i class='fas fa-angle-double-left'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class ='page-link'>";
                        vPaginador +="<i class='fas fa-angle-double-left'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    }
 
                    if(paginador["anterior"]){
                        vPaginador +="<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["anterior"] +"' title='Anterior'>";
                        vPaginador +="<i class='fas fa-angle-left'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class='page-link'>";
                        vPaginador +="<i class='fas fa-angle-left'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    }
 
                    for(i = 0; i < paginador["rango"].length; i++){
                        if(paginador["actual"] === paginador["rango"][i]){
                            vPaginador +="<li class='page-item active'>";
                            vPaginador +="<span class='page-link'>";
                            vPaginador += paginador["rango"][i];
                            vPaginador +="</span>";
                            vPaginador +="</li>";
                        } else {
                            vPaginador +="<li class='page-item'>";
                            vPaginador +="<a class='page-link' id='" + paginador["rango"][i]+"' class='page-link'>";
                            vPaginador += paginador['rango'][i];
                            vPaginador +="</a>";
                            vPaginador +="</li>";
                        }
                    }
 
                    if(paginador["siguiente"]){
                        vPaginador +="<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["siguiente"] +"' title='Siguiente'>";
                        vPaginador +="<i class='fas fa-angle-right'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class='page-link'>";
                        vPaginador +="<i class='fas fa-angle-right'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    } 
 
                    if(paginador["ultimo"]){
                        vPaginador +="<li class='page-item'>";
                        vPaginador +="<a class='page-link' id='" + paginador["ultimo"] +"' title='Último'>";
                        vPaginador +="<i class='fas fa-angle-double-right'>&nbsp;</i>";
                        vPaginador +="</a>";
                        vPaginador +="</li>";
                    } else {
                        vPaginador +="<li class='page-item disabled'>";
                        vPaginador +="<span class='page-link'>";
                        vPaginador +="<i class='fas fa-angle-double-right'>&nbsp;</i>";
                        vPaginador +="</span>";
                        vPaginador +="</li>";
                    }
 
                    vPaginador +="</ul>";                                
                    vPaginador += "</div>";
                }
 
                $('#DataResult').html(vTabla);
                $('#DataPages').html(vPaginador);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }
    
    $(window).on("load", function() {
        load_data();
    });
    
    $(document).on("click","#pagination a",function(e) {
        e.preventDefault();
        var page_id = $(this).attr("id");
        load_data(page_id);
    });
    
    [B]$("#buscador").keyup(function(e){
    e.preventDefault();
    load_data();
    });[/B]
    });
 

El único problema es que ahora, al realizar una búsqueda escribiendo en la caja de texto, el filtro no cambia para nada, antes de pasar a ajax, los filtros andaban bien y no sé que necesito para dejar funcional el buscador.

Espero sus respuestas y saludos

[detective_jd]

También pondré el index por las dudas si ven que me falta algo en el index:

Código HTML:

<h3><i class="fa fa-angle-right"></i>&nbsp;Mantenimiento de Departamentos</h3>
<div class="content-panel">
    <div class="d-flex justify-content-between">
        <div class="p-2 bd-highlight">
            <a href="index.php?c=main&a=index">
                <button class="btn btn-info" tabindex="1">
                    <i class="fa fa-arrow-left"></i>&nbsp;Volver
                </button>
            </a>
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#AMModal">
                <i class="fa fa-plus"></i>&nbsp;Crear
            </button>
        </div>
        <div>
            <div class="d-flex justify-content-end">            
                <div class="p-2 bd-highlight">
                    <div class="input-group mb-3">
                        <label class="d-flex align-items-center justify-content-center mx-2" style="display: inline-block;">Ver:</label>
                        <select name="stEstado" class="form-select" style="display: inline-block;">
                            <option value="">Todos</option>
                            <option value="1">Activo</option>
                            <option value="0">Inactivo</option>
                        </select>
                    </div>            
                </div>
                <div class="p-2 bd-highlight">                
                    <div class="input-group mb-3">
                        <input 
                            type="search"
                            id="buscador"
                            name="txtbuscador" 
                            placeholder="Buscar por nombre" 
                            class="form-control rounded" 
                            tabindex="3"
                            style="display: inline-block;"
                            />
                        <span 
                            class="input-group-text border-0" 
                            id="search-addon" 
                            style="background-color: white;"
                        >
                            <i class="fas fa-search"></i>
                        </span>
                    </div>                
                </div>             
            </div>
        </div>
    </div>
    <table class="table table-bordered table-striped table-condensed" id="#tablaDep">
        <thead>
            <th></th>
            <th>Nombre</th>
            <th>Estado</th>
        </thead>
        <tbody id="DataResult">            
        </tbody>
    </table>
    <div id="DataPages">        
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="AMModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="AMDocumento" method="post">
                <div class="modal-header">
                    <h3 class="modal-title">
                        <i class="fa fa-angle-right"></i>&nbsp;Crear Departamento
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">        
                    <div class="form-group">
                        <label class="col-form-label">Nombre (*):</label>                      
                        <input type="text" name="txtnombre" id="nombre" class="form-control" autofocus="autofocus" required="required" />                        
                    </div>                
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="hid" id="id" value="0" />
                    <button 
                        type="submit" 
                        name="btnaceptar" 
                        value="Aceptar"
                        id="aceptar"
                        class="btn btn-success"
                    >
                        <i class="fa fa-check"></i>&nbsp;Aceptar
                    </button>
                    <button 
                        type="button" 
                        name="btncancelar" 
                        value="Cancelar" 
                        class="btn btn-danger" 
                        data-bs-dismiss="modal"
                    >
                        <i class="fa fa-times"></i>&nbsp;Cancelar
                    </button>
                </div>
            </form>            
        </div>        
    </div>
  </div>
</div>
<script src="Public/js/crud/departamento.js" type="text/javascript"></script>
 

Espero sus respuestas y saludos