0

Tengo el siguiente problema con JQUERY, AJAX. Tengo mi web que se va mostrando u ocultando de acuerdo a lo que vayas a utilizar. Al clickear NOTICIAS nos muestra todas las noticias en la BD Dentro de noticias hay otro boton llamado NUEVA NOTICIA donde oculta el listado de noticias, y me muestra un formulario para cargar una nueva noticia.

Hasta ahí todo OK, completo la noticia, se sube todo PERFECTAMENTE y sin errores a la BD. El problema esta al querer volver a la sección NOTICIAS, el DIV NO SE ACTUALIZA. O sea si toco F5 y actualizo el navegador se ve la nueva noticia, pero si despues de completar el formulario, intento volver, no se ve esa nueva noticia subida.

Estuve mirando la funcion load, y muchas más respuestas, pero ninguna me solucionó el problema. Será porque mi div esta oculto? Espero que puedan ayudarme. Dejo el codigo.

            <div class="col-sm-12 mx-auto text-center mb-3">
                <a id="verNoticias" class="btn btn-outline-primary">
                <i class="fa fa-newspaper-o fa-lg"></i> NOTICIAS</a>
                <a id="verGaleria" class="btn btn-outline-primary">
                <i class="fa fa-camera fa-lg"></i> GALERÍA</a>
            </div>
            <!--SECCIONES NOTICIAS -->
            <div id="seccionNoticias" class="col-sm-12 col-md-5 mx-auto text-center mt-3">
                <h2 class="text-center">NOTICIAS</h2>
                <a id="verNuevaNoticia"><span class="badge badge-success"><i class="fa fa-plus fa-lg"></i> AGREGAR NUEVA NOTICIA</span></a>
                <hr>
                <?php foreach ($noticias as $noticia) :?>
                    <div id="noticia<?php echo $noticia['idNoticia']?>" data="<?php echo $noticia['idNoticia']?>">
                        <a href="editarNoticia.php?id=<?php echo $noticia['idNoticia'] ?>"><span class="badge badge-warning mr-2"><i class="fa fa-edit fa-lg"></i> EDITAR</span></a>
                        <a class="borrarNoticia" id="borrarNoticia<?php echo $noticia['idNoticia']?>"><span class="badge badge-danger"><i class="fa fa-trash fa-lg"></i> BORRAR</span></a>
                        <h4><?php echo $noticia['idNoticia'] .' .- '. $noticia['tituloNoticia'] ?> </h4>
                        <hr>
                    </div>
                <?php endforeach; ?>
            </div>

            <!-- SECCION NUEVA NOTICIA -->

            <div id="seccionNuevaNoticia" class="col-sm-12 col-md-4 col-lg-6 mx-auto mt-3">
                <h1 class="text-center">Subir noticias a la Web SB.</h1>
                <form id="formSubirNoticia" class="text-center" method="post" enctype="multipart/form-data">
                    <div class="form">
                        <div class="form-group">
                            <input type="file" class="form-control-file mx-auto" id="imagenNoticia" name="imagenNoticia" placeholder="" aria-describedby="fileHelpId">
                            <small id="fileHelpId" class="form-text text-muted text-center">Seleccione la imagen que quiere subir...</small>
                        </div>

                        <div class="col mx-auto mb-3">
                            <input id="tituloNoticia" name="tituloNoticia" type="text" class="form-control" placeholder="Titulo de la noticia">
                        </div>
                        <div class="col mx-auto mb-3">
                            <input id="noticiaCorta" name="noticiaCorta" type="text" class="form-control" placeholder="Descripción corta de la noticia">
                        </div>
                        <div class="col mb-3">
                            <textarea id="noticiaCompleta" name="noticiaCompleta"  rows="20" cols="50" type="text" class="form-control" placeholder="Noticia Completa..."></textarea>
                        </div>
                    </div>
                    <div class="d-inline-block">
                        <button class="subirNoticia btn btn-success">SUBIR NOTICIA</button>
                        <a href="index.php"><button type="button" class="btn btn-warning">VOLVER</button></a>
                    </div>
                </form>
            </div>

Y acá la parte del JQUERY:

    $("#verNoticias").click(function(){
        $('#seccionNuevaNoticia, #seccionNuevaFoto').hide('fast');
        $('#seccionNoticias').fadeToggle(1000);
     });

     $("#verNuevaNoticia").click(function(){
        $('#seccionNoticias, #seccionGaleria').hide('fast');
        $('#seccionNuevaNoticia').fadeToggle(1000);
     });

     $('.subirNoticia').click(function(){
        var formulario = $('#formSubirNoticia').serialize();
        $.ajax({
            type: "POST",
            url: "subirNoticia.php?p=agregar",
            data: new FormData($('#formSubirNoticia')[0]),
            contentType: false,
            processData:false,
            success: function(datos) {
                $('#seccionNuevaNoticia').hide('slow');          
                $('#mensaje').empty();
                $('#mensaje').append("<div class='alert alert-success alert-dismissible fade show' role='alert'><strong>La noticia ha sido subida correctamente.</strong><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div>").hide().fadeIn(1500).fadeOut(6000);
            }
        });
        return false;
    }); 

subirNoticias.php

<?php
require 'funciones.php';

$accion = isset($_GET['p'])?$_GET['p']:'';

if ($accion == 'agregar') {
$imagenNoticia = $_FILES['imagenNoticia']['tmp_name'];
$tituloNoticia = $_POST['tituloNoticia'];
$noticiaCorta = $_POST['noticiaCorta'];
$noticiaCompleta = $_POST['noticiaCompleta'];

$check = @getimagesize($imagenNoticia);
if ($check !== false) {
    $carpeta_destino = '../img/noticias/';
    $archivo_subido = $carpeta_destino . $_FILES['imagenNoticia']['name'];
    move_uploaded_file($imagenNoticia, $archivo_subido);

    $statement = $conexion->prepare('INSERT INTO noticias (idNoticia, imagenNoticia, tituloNoticia, fecha, noticiaCorta, noticiaCompleta) VALUES (null, :imagenNoticia, :tituloNoticia, null, :noticiaCorta, :noticiaCompleta)');

    $statement->execute(array(
        ':imagenNoticia' => $_FILES['imagenNoticia']['name'],
        ':tituloNoticia' => $tituloNoticia,
        ':noticiaCorta' => $noticiaCorta,
        ':noticiaCompleta' => $noticiaCompleta
    ));

    echo "La noticia se ha subido correctamente";
} else {
    $error = "El archivo no es una imagen o el archivo es muy pesado";
    echo $error;
}
}

?>

Otra cosa que he probado es poniendo:

   $('#seccionNoticias').load('index2.php #seccionNoticias');

Pero aparece el cuadro VACIO y sin listar las noticias :S

He subido la web para que puedan visualizarlo más claro, que quizas aqui no lo he sido.

https://sbguardavidas.000webhostapp.com/admin/index2.php -Ir a noticias -Subir nueva noticia -Suben una nueva imagen con titulo, descripcion y descripcion larga -La noticia se sube, clickean el icono NOTICIAS para ver el listado. Y no aparece la ultima **PERO SI ACTUALIZAN EL NAVEGADOR MANUALMENTE, LUEGO SI CARGA LA NOTICIA.

13
  • ¿Podrías mostrar el contenido de este archivo: subirNoticia.ph?
    – A. Cedano
    Commented el 14 nov. 2017 a las 0:59
  • Buenos días @A.Cedano, he subido el archivo que me has indicado. Incluso aporte más info al post y un link para que puedas ver el problema online. Yo creo que el archivo .php no es el problema ya que todo se sube correctamente, yo creo que el problema esta en la funcion ajax a la hora de mostrar el campo oculto. Espero que podamos resolverlo, cualquier otra cosa que precises me indicas. Desde ya muchas gracias por tu tiempo!
    – ZeR0ByTe
    Commented el 14 nov. 2017 a las 9:06
  • Podrías realizar lo siguiente: al hacer click sobre "Ver noticias", podrías recoger mediante Ajax todas las noticias de tu BD, borrar primeramente el contenido del div correspondiente e introducirlas a continuación, como un "Actualizando noticias...". Así siempre tendrás la certeza de que se verán todas las noticias cuando hagas click sobre ese botón.
    – Zander
    Commented el 14 nov. 2017 a las 9:11
  • Gracias @Cheshire por tu respuesta, no se si lo comprendí bien, lo escribo por si no es así. Me dices que al hacer click en "Noticias", llame en ajax a un archivo actualizar.php (Select * from noticias), luego borre mi div actual y lo reemplace por esa consulta? Quizás me esté equivocando, pero bueno espero haberte comprendido bien, y si es así, intentaré hacerlo. Nuevamente muchas gracias!
    – ZeR0ByTe
    Commented el 14 nov. 2017 a las 9:23
  • Si, exactamente algo parecido a eso.
    – Zander
    Commented el 14 nov. 2017 a las 9:26

2 respuestas 2

0

Una solución sería realizar que el botón "Ver noticias" elimine el contenido del div que muestra las noticias y cargue todas las noticias que haya en la base de datos (como un Cargando noticias...). Así cuando guardes una nueva noticia, que el código de arriba como comentas funciona, y pulses sobre el botón "Ver noticias" esta cargará en el div todas, incluida la nueva.

1
  • Muchas gracias por toda la ayuda @Cheshire, ya voy implementando todo esto y sin problemas. Lo hice tambien en la seccion Galeria de la misma forma al subir una nueva foto. Estoy aprendiendo y muchas cosas que mejorar todavia. Saludos y ojala en proximos problemas estes para darme una mano. ;)
    – ZeR0ByTe
    Commented el 14 nov. 2017 a las 17:03
0

Buenas, cuando se realizan peticiones con AJAX el contenido de la página no se refresca por tanto tiene que influir en el comportamiento que deseas una vez realizada con exito la insercción de la noticia. Entonces dentro de la función success del AJAX a parte de realizar las tres acciones que se encuentran dentro debes añadir esta línea:

    success: function(datos) {
            $('#seccionNuevaNoticia').hide('slow');          
            $('#mensaje').empty();
            $('#mensaje').append("<div class='alert alert-success alert-dismissible fade show' role='alert'><strong>La noticia ha sido subida correctamente.</strong><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div>").hide().fadeIn(1500).fadeOut(6000);

    //Líneas nuevas
    $noticia = datos.noticia;
    $('#seccionNoticias').append('<div id=' + $noticia['idnoticia'] + 'data=' + $noticia['idnoticia'] + '>',
    '<a href="editarNoticia.php?id=' + $noticia['idnoticia'] + '"><span class="badge badge-warning mr-2"><i class="fa fa-edit fa-lg"></i> EDITAR</span></a>',
    '<a class="borrarNoticia" id="borrarNoticia' + $noticia['idnoticia'] + '"><span class="badge badge-danger"><i class="fa fa-trash fa-lg"></i> BORRAR</span></a>',
    '<h4>' + $noticia['idnoticia'] + '-' + $noticia['tituloNoticia'] + '</h4>',
    '<hr>',
    '</div>');
     $('#seccionNoticias').fadeToggle(1000);
        }

Esto lo que hace es adicionar la nueva noticia que debes retornar desde el servidor (variable $noticia) y darle visibilidad a la sección de noticias nuevamente.

Nota: La variable $noticia es la instancia de la noticia que llega en el parametro datos proveniente del servidor.

1
  • Muchas gracias por responder @Sr. Tejeda, he probado lo que me has dicho pero no me ha funcionado. Pense que era porque en mi BD los nombres de las tablas figuran con mayuscula la 2da palabra por ejemplo (idNoticia, tituloNoticia), pero no. Sigue sin actualizarse el campo. :( Nuevamente gracias por tu tiempo y espero que podamos resolverlo
    – ZeR0ByTe
    Commented el 13 nov. 2017 a las 19:35

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.