jQuery.Timer Ajax envía varios valores de formulario a la página secundaria

Estoy usando este temporizador de jQuery para recostackr el tiempo dedicado mientras se está ejecutando.

https://github.com/walmik/timer.jquery http://jquerytimer.com/

En una publicación anterior de desbordamiento de stack pudimos publicar en otra página el tiempo acumulado actual utilizando jQuery Ajax ( jQuery.timer ¿cómo obtener el valor actual en php? ). Muchos piensan en @Dakis.

Parece que nuestra solución actual está intentando ahorrar en cualquier detención y reinicio del temporizador. Solo necesita hacer una rutina de Guardar en la base de datos si el botón “Guardar tiempo y notas” está seleccionado.

He estado investigando jQuery Ajax y entiendo que se necesita un par clave / valor para enviar al servidor / página de recepción. Entiendo que el primer valor identifica el objective del cual obtener la “clave”, pero no pude entender con claridad el formato adecuado para el segundo “valor”. ‘task’: $ (‘. ta_tasks’). data (‘task’) no parece pasar el valor como se esperaba.

Agregué un TextArea con un ID de “ta_tasks” y adjunté el AJAX actual con:

data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'task': $('.ta_tasks').data('task') 

En la página de recepción, agregué una alerta simple para ver si el valor se está recibiendo pero no lo está. Si puedo averiguar cómo enviar correctamente el contenido de TextArea, también podría averiguar cómo enviar un valor desde el botón “Guardar tiempo y notas” para que la pausa y el reinicio no se envíen también a la base de datos.

Página de trabajo: http://sgdesign.com/timer2.php

Guión de la página principal:

    $(document).ready(function () { var hasTimer = false; /** * Save the current timer value. * * Performs an ajax request to the server, which will * save the timer value in a database table and return * a corresponding message. */ function saveTime() { $.ajax({ method: 'post', dataType: 'html', url: 'saveTime.php', data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'task': $('.ta_tasks').data('task') }, success: function (response, textStatus, jqXHR) { displayAlert('success', response); }, error: function (jqXHR, textStatus, errorThrown) { /* * If the status code of the response is the custom one * defined by me, the developer, in saveTime.php, then I * can display the corresponding error message. Otherwise, * the displayed message will be a general user-friendly * one - so, that no system-related infos will be shown. */ var message = (jqXHR.status === 420) ? jqXHR.statusText : 'An error occurred during your request. Please try again.'; displayAlert('danger', message); }, complete: function (jqXHR, textStatus) { //... } }); } /** * Display a bootstrap alert. * * @param type string success|info|warning|danger. * @param message string Alert message. * @return void */ function displayAlert(type, message) { var alert = ''; $('.messages').html(alert); } // Init timer start $('.save-timer-btn').on('click', function () { saveTime(); }); // Init timer start $('.start-timer-btn').on('click', function () { hasTimer = true; $('.timer').timer({ editable: true }); $(this).addClass('d-none'); $('.pause-timer-btn').removeClass('d-none'); }); // Init timer resume $('.resume-timer-btn').on('click', function () { $('.timer').timer('resume'); $(this).addClass('d-none'); $('.pause-timer-btn').removeClass('d-none'); }); // Init timer pause $('.pause-timer-btn').on('click', function () { $('.timer').timer('pause'); $(this).addClass('d-none'); $('.resume-timer-btn').removeClass('d-none'); saveTime(); }); // Remove timer. Leaves the display intact. $('.remove-timer-btn').on('click', function () { hasTimer = false; $('.timer').timer('remove'); $(this).addClass('d-none'); $('.start-timer-btn').removeClass('d-none'); $('.pause-timer-btn, .resume-timer-btn').addClass('d-none'); }); // Additional focus event for this demo $('.timer').on('focus', function () { if (hasTimer) { $('.pause-timer-btn').addClass('d-none'); $('.resume-timer-btn').removeClass('hidden'); } }); // Additional blur event for this demo $('.timer').on('blur', function () { if (hasTimer) { $('.pause-timer-btn').removeClass('d-none'); $('.resume-timer-btn').addClass('d-none'); } }); });  

Contenidos de la página de destino:

 prepare($sql); $statement->execute([ ':time' => $time, ]); // Print success message. echo 'Time (' . $time . ' seconds) successfully saved when timer was ' . $state . '.'; exit(); */ ?>     Untitled Document  var a = ""; alert ('task: ' + a);    diff($dtT)->format('%h hours, %i minutes and %s seconds'); // return $dtF->diff($dtT)->format('%a days, %h hours, %i minutes and %s seconds'); } ?> <?php echo secondsToTime($time); echo '
'; echo 'Tasks: '.$task .'
'; echo 'Cost: $'. $rate; ?>

Resumen del objective Formateo apropiado de los datos en: ‘tarea’: $ (‘. Ta_tasks’). Datos (‘tarea’) Comprensión de por qué para aprender a transferir también cuando el botón ‘Guardar tiempo y notas “invoca el costo de ahorro y notas a DB

Imagen genérica del resultado de la página.

No defina funciones dentro de $(document).ready . Tráelos fuera.

Las funciones en PHP deben residir solo en páginas destinadas a este propósito. Ver los efectos secundarios de PSR-1 . En principio, definitivamente debes leer: PSR-1 y PSR-2. Opcional, especialmente PSR-4.

Cuando intenta leer un valor enviado a través de ajax, debe leer el valor, no el selector CSS. Entonces: Incorrecto: $task = $_POST['ta_tasks']; , correcto: $task = $_POST['task']; .

Antes de validar los valores publicados (en la parte superior de la página saveTime.php ) no debe declarar ninguna variable o hacer otras cosas, por así decirlo. Así que no $cost = 50; Antes de validaciones, pero después de ellas. Aún así, si desea definir constantes para saveTime.php , entonces mejor incluyalas en otro archivo, que puede incluir.

En este caso, el método data() es un método propietario de http://jquerytimer.com . Puede usarlo para obtener algunos valores (valor del temporizador, estado del temporizador, etc.). Pero, para obtener el valor de un control html, debe usar val() o text() o innerHtml , etc. En una palabra: js nativos o métodos / funciones jquery. Por lo tanto, utilizar de esta manera:

 data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'task': $('#ta_tasks').val() } 

¿Ves el selector ( '#ta_tasks' )? Hace referencia a una identificación (debido a # ). .ta_tasks , por lo tanto, referenciaste un nombre de clase. Lo que no definiste.

Mejor: use la convención de nomenclatura de camelCase para los identificadores y nombres de html, y la forma “separada por guiones” para las clases de css:

 data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'task': $('#ta_tasks').val() } //...  

Evite tanto como sea posible hacer referencia al código php de javascript o css. Si necesita un valor php dentro de un código javascript, luego páselo a través de una función javascript – como argumento, o guarde el valor php dentro de un atributo de un control html y léalo haciendo referencia al atributo mediante las funciones / métodos js / jquery. Como ejemplo, vea el código en saveTime.php , que guarda el valor de la tarea en una entrada oculta y lo alerta desde el código js.


index.php

        Demo - Timer         

Timer Demo 2

Notes to accompany task:

saveTime.php

    '; echo 'Tasks: ' . $task . '
'; echo 'Cost: $' . $rate; ?>

funciones.php

 diff($dtT)->format('%h hours, %i minutes and %s seconds'); // return $dtF->diff($dtT)->format('%a days, %h hours, %i minutes and %s seconds'); } 

Edición 1: En index.php , traje las funciones js fuera de $(document).ready . Me olvidé de hacerlo antes.

Edición 2: Cambiado hidden a d-none en

 $('.resume-timer-btn').removeClass('hidden'); 

Edit 3: He encontrado el problema sobre el que he comentado. Estaba en mi código saveTime.php : cargué la biblioteca jquery, pero ya estaba cargada en index.php . Más: ya que está cargando el contenido de saveTime.php en una página html ( index.php ) que ya tiene todos los recursos cargados, no necesita estructurar el saveTime.php como un html estructurado completo (con doctype, cabeza, cuerpo, etc). Es suficiente definir el contenido y las tags de script que necesita. Entonces, reedité saveTime.php correspondientemente.

área de texto no tiene clase ta_tasks , u usa id y no tiene data object html5, correcto para $("#ta_tasks").val() .

verifique los datos de solicitud de ajax que está enviando y el que está recibiendo en su saveTime.php, está enviando ‘tarea’ y recibiendo ‘ta_task’ en saveTime.php

 $.ajax({ method: 'post', dataType: 'html', url: 'saveTime.php', data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'ta_task': $('.ta_tasks').data('task') }, //other codes here 
 //saveTime.php //now get the value with 'ta_task' $task = $_POST['ta_task'];