0

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>
    ';

1 respuesta 1

2

Cuando "escuchas" un evento con jQuery, en este caso el .submit, jQuery lo asocia con el elemento del DOM que está cargado en el momento de hacer el "enlace". Por lo tanto, la primera vez que cargas la página (el DOM), se asocia to función de evento a los formularios especificados ($('#form, #fat, #oknote, #delnote')), pero una vez que haces el load para cargar de nuevo el div, el DOM se carga con elementos nuevos que no tienen asociados los eventos iniciales.

Para esto, jQuery ofrece la función .on(): http://api.jquery.com/on/

Para resolver tu problema en particular, deberías asociar el evento capturado a un elemento del DOM que no vaya a ser eliminado/reemplazado con el tiempo, por ejemplo el div #resulttareas.

En el código, esto sería cambiar las líneas $('#form, #fat, #nota').submit(function() { por algo como:

$('#resulttareas').on('submit', '#form, #fat, #nota', function() {
1
  • ¡Muchas gracias por la explicación! Hice el cambio en las líneas y quedó funcionando perfectamente. Me queda mucho por aprender aún de jQuery.
    – Winston
    el 28 nov. 2016 a las 2:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.