Tag: con

Quizás no esta bien planteada la pregunta, el asunto es que no se como preguntarla correctamente, igual les tratare de explicar.

Estoy usando fetch method:'post' para guardar los datos desde un modal y sin recargar la pagina.

entonces lo que necesito ahora es como mostrar esos datos que guarde sin necesidad de refrescar la pagina y justo cuando hago el POST.

Modal (form)

<form role="form" class="form-horizontal" enctype="multipart/form-data"> <!-- con js-->
{{ csrf_field() }}
<div class="modal fade" id="AddNotas" tabindex="-1" role="dialog" aria-labelledby="AddNotasLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddNotasLabel">Agregar una nota</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="titulo" class="col-form-label">Titulo:</label>
                    <input type="text" class="form-control-custom" id="titulo" name="titulo" required>
                </div>
                <div class="form-group">
                    <label for="concepto" class="col-form-label">Descripción:</label>
                    <textarea class="form-control-custom" id="concepto" name="concepto" required></textarea>
                </div>

                <div class="alert alert-success alert-message text-center"  role="alert">
                    <span id="mensaje_alerta"></span>
                </div>

            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Cerrar</button>
                <button type="button" class="btn btn-success" id="enviar"><i class="fas fa-check"></i> Guardar</button> 
            </div>
        </div>
    </div>
</div>

JS POST

let boton = document.getElementById("enviar");
let csrf  = document.querySelector("input(name='_token')");

let titulo = document.getElementById("titulo");
let concepto = document.getElementById("concepto");
boton.addEventListener("click", function(e){

    let datos = new FormData();
    datos.append('titulo', titulo.value);
    datos.append('concepto', concepto.value);

    e.preventDefault();

    fetch('{{route("add_notas")}}',{
    method: 'post',
    headers: {'X-CSRF-TOKEN': csrf.value, 'Content-Type': 'application/json', Accept: 'application/json'},
    body: datos
    })
    .then(response => response.json())
    .then(data => {
        console.log(data.exito);
    }).catch(error => {
        console.log(error.message);
    })
});

Bueno y pues para mostrar los datos en la vista, con un foreach, pero para que se vean los cambios, tengo que refrescar la pagina y es lo que quiero evitar.

como podría hacer eso?