Buenas, estoy comenzando con algo de esto por lo que puede que vean muchos errores, si gustan comentar agradecería, comencemos...
- LA IDEA:
Crear, mostrar, marcar como hechas o eliminar algo que llamaremos de tareas en una "base de datos" sin recargar la página y mostrando notificaciones.
Cuando creamos una tarea se tiene que recargar el div que muestra las tareas existentes para incluir esta nueva.
Cuando marcamos como hecha o eliminamos una tarea se tiene que ocultar el div de la misma.
- EL PROBLEMA:
Todo funciona correctamente menos cuando creamos una nueva tarea lo que hace que ajax.js recargue el div $('#resultnotas2').load('mistareas.php');
si luego de esto intento marcar como hecha o eliminar una tarea (esto se hace desde el div que fue recargado por ajax.js) me lleva al archivo accion.php, es como si ajax.js no consiguiera interceptar el evento submit.
Si marcamos como hecha o eliminamos una tarea mientras se cargó con <?php include"mistareas.php";?>
ajax.js funciona correctamente.
LOS ARCHIVOS:
index.php
El contenido de este archivo debería ser el único a ser mostrado siempre.
Desde él podemos crear una nueva tarea.
Mostrar <?php include"mistareas.php";?>
las tareas previamente creadas, nos da opción de marcarlas como hechas o eliminarlas.
En head:
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
En body:
<div id="resulttareas">
<div id="titulotareas"><span>Mis Tareas</span></div>
<div id="resulttareas1">
<form id="nota" method="post" action="accion.php" name="nota" onsubmit="return validacionfecha()">
<textarea id="minota" name="minota" placeholder="Crear nueva tarea..." required></textarea>
<input type="image" src="images/save-32.png">
<input id="fechanota" type="text" name="hacernota" size="7" maxlength="8" placeholder="DD/MM/AA" autocomplete="off">
</form>
<div id="resulttareas2"> <!-- Div que se recarga -->
<?php include"mistareas.php";?>
</div>
</div>
</div>
<div id="resultnotify" style="display:none"></div> <!-- Div que muestra notificación -->
- mistareas.php
Este archivo consulta la "base de datos" y devuelve las tareas guardadas allí.
Aquí está la opción de marcarlas como hechas o eliminarlas.
echo '
<div id="item'.$datos[0].'">
<p>'.$datos[1].'</p>
<hr/>
<p>Tarea creada el: '.$fechayhoranota.'
<form id="oknote" method="post" action="accion.php" name="oknote">
<input type="hidden" value="'.$datos[0].'" name="oknote">
<input type="image" width="16px" src="images/like.png" onclick="javascript:oculta(\'item'.$datos[0].'\')">
</form>
<form id="delnote" method="post" action="accion.php" name="delnote">
<input type="hidden" value="'.$datos[0].'" name="delnote">
<input type="image" width="16px" src="images/delete.png" onclick="javascript:oculta(\'item'.$datos[0].'\')">
</form>
</p>
</div>
';
- ajax.js
Envía los datos de las solicitudes a accion.php
// CREAR NUEVA TAREA
$(document).ready(function() {
// Interceptamos el evento submit
$('#form, #fat, #nota').submit(function() {
$('#resultnotify').fadeOut('fast'); // Ocultamos div notificación
// Enviamos el formulario usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#resultnotify').slideDown('fast'); // Mostramos div notificación
$('#resultnotify').html(data); // Mostramos respuesta notificación
$('#nota')[0].reset(); // Limpiamos el formulario
$('#resultnotas2').load('mistareas.php'); // Recargamos div con tareas
setTimeout(function() {
$('#resultnotify').fadeOut(1500);
}, 5000); // Ocultamos div notificación
}
})
return false;
});
})
// MARCAR COMO HECHA O ELIMINAR TAREA
$(document).ready(function() {
// Interceptamos el evento submit
$('#form, #fat, #oknote, #delnote').submit(function() {
$('#resultnotify').fadeOut('fast'); // Ocultamos div notificación
// Enviamos el formulario usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#resultnotify').slideDown('fast'); // Mostramos div notificación
$('#resultnotify').html(data); // Mostramos respuesta notificación
setTimeout(function() {
$('#resultnotify').fadeOut(1500);
}, 5000); // Ocultamos div notificación
}
})
return false;
});
})
// OCULTAR DIV DE TAREA HECHA O ELIMINADA
function oculta(elemento) {
item=$("#"+elemento);
$(item).removeClass('visible');
$(item).addClass('invisible');
$(item).slideUp('fast');
}
- accion.php
Procesa los datos y devuelve un resultado.
Aquí se crean, marcan como hechas o eliminan las tareas.
echo '
<div class="resultnotifyimg">
<img src="images/like.png" width="80px">
</div>
<div id="resultnotifytxt" class="resultnotifytxt">'.$result.'</div>
';