0

Buenas tardes a todos, quisiera saber como separar el código php y js de mi codigo.

todo el código esta en el archivo llamado "areas.php" y quiero separar el archivo JS en

"script.js" , soy un novato y he intentado sepáralo pero no me ejecuta.

me podrían asesorar en este punto es que ya de ahí no avanzo.

El codigo muestra una tabla en la cual se muestran datos desde mi base de datos y agregue un

modal con un form el cual tiene para agregar grado y nombre

para que desde ahí se puedan agregar a mas usuarios. ahí todo funciona al 100% solo quiero

separar los codigo php y js.

<body>    
    <!-- Modal Agregar Elemento -->
    <div class="modal fade" id="modalElemento" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Agregar Elemento</h5>
                    <button type="button" class="btn-close btn-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <!-------FORMULARIO-------->
                <form id="agregarElemento">
                    <div class="modal-body">

                        <div id="errorMessage" class="alert alert-warning d-none"></div>
                            <div class="mb-3">
                            <label for="">Grado</label>
                            <input type="text" name="grado" class="input form-control" />
                        </div>    
                        <div class="mb-3">
                            <label for="">Nombre</label>
                            <input type="text" name="nombre" class="input form-control" />
                        </div>    
                    </div>    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
                                class="fa-solid fa-xmark"></i></button>
                        <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
                    </div>

                </form>

            </div>
        </div>
    </div>   

    <!-------tabla-------->
    <div class="container-flex-column container-fluid fd-flex">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Areas Blancas
                            <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
                                data-bs-toggle="modal" data-bs-target="#modalElemento">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                        </h4>
                    </div>
                    <div class="card-body table-responsive">
                        <table id="tableAreaBlanca"
                            class="table table-bordered table-striped table-hover table-disable-selection">
                            <thead>
                                <tr>
                                    <th>N/P</th>
                                    <th>Grado</th>
                                    <th>Nombre</th>
                                    <th>A. Penales</th>
                                    <th>E. Socioeconomicos</th>
                                    <th>A. Divulgación</th>
                                    <th>Evalucación</th>
                                    <th>D. Personales</th>
                                    <th>E. Psicologica</th>
                                    <th>N. Acceso</th>
                                    <th>Opciones</th>
                                </tr>
                            </thead>

                            <tbody>    
                                <?php
                                $pdo = mysqli_connect('localhost', 'root', '', 'sistema');
                                $query = "SELECT * FROM certseg";
                                $query_run = mysqli_query($pdo, $query);

                                if (mysqli_num_rows($query_run) > 0) {
                                    foreach ($query_run as $elemento) {
                                ?>
                                <tr>
                                    <td> <?= $elemento['id'] ?> </td>
                                    <td> <?= $elemento['grado'] ?> </td>
                                    <td> <?= $elemento['nombre'] ?> </td>
                                    <td> <?= $elemento['antPenales'] ?> </td>
                                    <td> <?= $elemento['estudiosSoc'] ?> </td>
                                    <td> <?= $elemento['actaNoRe'] ?> </td>
                                    <td> <?= $elemento['evaluacion'] ?> </td>
                                    <td> <?= $elemento['fichaDtPers'] ?> </td>
                                    <td> <?= $elemento['evaluacioSpic'] ?> </td>
                                    <td> <?= $elemento['nivelAcceso'] ?> </td>
                                    <td>
                                        <button type="button" value="<?= $elemento['id']; ?>"
                                            class="verElemento btn btn-info"><i class="fa-regular fa-eye"></i></button>

                                        <button type="button" value="<?= $elemento['id']; ?>"
                                            class="editarElemento btn btn-success"><i
                                                class="fa-regular fa-pen-to-square"></i></button>

                                        <button type="button" value="<?= $elemento['id']; ?>"
                                            class="eliminarElemento btn btn-danger"><i
                                                class="fa-solid fa-trash-can"></i></button>
                                    </td>
                                </tr>

                                <?php
                                    }
                                }

                                ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> 

    <?php
    include_once '../includes/footer.php';
    ?>
            <script>
    //agregar elemento por modal
    $(document).on('submit', '#agregarElemento', function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        formData.append("agregar_Elemento", true);
        $.ajax({
            type: "POST",
            url: "funciones.php",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {

                var res = jQuery.parseJSON(response);
                if (res.status == 422) {
                    Swal.fire({
                        title: 'Error',
                        text: res.message,
                        icon: 'error',
                        showConfirmButton: false, // Oculta el botón de aceptar
                        timer: 1000, // Tiempo en milisegundos antes de cerrar el mensaje (1000 ms = 1 segundos)
                    });
                } else if (res.status == 200) {
                    $('#errorMessage').addClass('d-none');
                    $('#modalElemento').modal('hide').on('hidden.bs.modal', function() {
                        $('.modal-backdrop').remove();
                    });
                    $('#agregarElemento')[0].reset();

                    Swal.fire({
                        title: 'Éxito',
                        text: 'Elemento agregado correctamente.',
                        icon: 'success',
                        timer: 1000, // Tiempo en milisegundos antes de que se cierre automáticamente
                        showConfirmButton: false
                    })



                    $('#tableAreaBlanca').load(location.href + " #tableAreaBlanca");
                }

            }
        });

    });

    
    </script>
1
  • 2
    pues pasa tu código js al archivo script.js, y en tu archivo areas.php lo cargas usando el tag <script> así: <script type="text/javascript" src="script.js"></script>, y eso es todo Commented el 23 ago. a las 13:42

1 respuesta 1

2

Lo haces con el tag de <script> y respetando la estructura del proyecto.

-project

---index.php

---script.js

index.php

<script type="text/javascript" src="script.js"></script>

  • Recuerda respetar la ubicación del archivo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.