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'>×</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.
subirNoticia.ph
?