0

Tengo una pagina de registro de archivos, este es mi código javaScript :

      $('#crearArchivo').click(function(){
    var parametros = 
        'nombreElemento='+$("#nombreElemento").val()+"&"+
        'tipoElemento='+$("#fileType").val()+"&"+
        'fechaModificacion='+$("#fechaModificacion").val()+"&"+
        'fechaCreacion='+$("#fechaCreacion").val()+"&"+
        'usuario='+$("#usuario").val()+"&"+
        'tamanio='+$("#tamanio").val();
     console.log("Esto se enviará al servidor: "+parametros);

    $.ajax({
        url:"ajax/guardar.php",
        method:"POST",
        data:parametros, //La información en formato URLEncoded
        dataType: 'json', //tipo de dato de retorno, por defecto es html
        success:function(respuesta){
            //Se ejecutara cuando sea exitoso
            //console.log("Respuesta del servidor: " + JSON.stringify(respuesta));
            console.log(respuesta);
            $("#respuesta").html("Se guardo el registro");
        },
        error:function(error){
            //Se ejecutara cuando sea erroneo
            console.error(error);
        }
    });
});

Me crea el archivo, pero tengo que darle a recargar la pagina para que me aparezca el archivo porque en el codigo donde agrego los archivos me hace una validación antes de ponerme en pantalla los archivos existentes ,les muestro el codigo:

    $(document).ready(function(){
    console.log("El DOM ha sido cargado");
    console.log("Carpeta actual: " + $("#txt-carpeta-actual").val());

    $.ajax({
        url:"ajax/obtener.php",
        dataType:"json",
        success:function(respuesta){
            console.log("La respuesta del servidor es: ");
            console.log(respuesta);
            for(var i=0;i<respuesta.length;i++){
                if (respuesta[i].tipoElemento==='folder') {
                    $("#contenido").append(`<tr>
                    <td><a href="index.php?carpeta=${respuesta[i].nombreElemento}"><i class="fas fa-folder-open"></i>${respuesta[i].nombreElemento}</a></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='file') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-file"></i>${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='imagen') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-image"></i>${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='pdf') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-file-pdf"></i> ${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='word') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-file-word"></i> ${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                }

            }
        },
        error:function(error){
            console.log(error);
        }
    });
});

Quiero que cuando el archivo se cree, me aparezca sin darle a recargar.

2 respuestas 2

1

en el success del AJAX, justo detrás de :

$("#respuesta").html("Se guardo el registro");

Añade

location.reload();
0

en este caso la 2da petición que pusiste (a ajax/obtener.php) la transformaria en una función, es decir tendria que quedarte algo asi :

function obtenerDatos() {
            console.log("La respuesta del servidor es: ");
            console.log(respuesta);
            for(var i=0;i<respuesta.length;i++){
                if (respuesta[i].tipoElemento==='folder') {
                    $("#contenido").append(`<tr>
                    <td><a href="index.php?carpeta=${respuesta[i].nombreElemento}"><i class="fas fa-folder-open"></i>${respuesta[i].nombreElemento}</a></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='file') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-file"></i>${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='imagen') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-image"></i>${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='pdf') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-file-pdf"></i> ${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                } else if (respuesta[i].tipoElemento==='word') {
                    $("#contenido").append(`<tr>
                    <td><button class="btn btn-link" onclick="detalleRegistro('${respuesta[i].nombreElemento}');"><i class="far fa-file-word"></i> ${respuesta[i].nombreElemento}</button></td>
                    <td>${respuesta[i].fechaCreacion}</td>
                    <td>${respuesta[i].usuario}</td>
                    <td>${respuesta[i].tamanio}</td>
                    </tr>`);
                }

            }
 }

y esta función la llamas desde el success del guardado :

$.ajax({
        url:"ajax/guardar.php",
        method:"POST",
        data:parametros, //La información en formato URLEncoded
        dataType: 'json', //tipo de dato de retorno, por defecto es html
        success:function(respuesta){
            //Se ejecutara cuando sea exitoso
            //console.log("Respuesta del servidor: " + JSON.stringify(respuesta));
            console.log(respuesta);
            $("#respuesta").html("Se guardo el registro");
            obtenerDatos();
        },
        error:function(error){
            //Se ejecutara cuando sea erroneo
            console.error(error);
        }
    });

es mucho mas comodo tener una función para efectuar estas operaciónes, ya que la puedes utilizar en cualquier momento.

vos la estas llamando solo cuando la pagina se recarga y de ahí deriva tu problema, osea que si o si tenes que recargar la pagina para actualizar los datos. Convirtiendo la llamada en función basta solo que llames esta función en el success del guardado y en el $(document).ready

espero que te sea de ayuda, exitos!

1
  • Excelente , gracias amigo Commented el 16 abr. 2019 a las 17:22

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.