PHP data sync with Javascript

Question

When the page is loaded through the URL index.php?num=58 initially the page autosalvar.php does not recognise the value of the input name="num-edit" (which contains the number 58), however when passing through the 2 second time interval the value 58 is captured.

Note: I need to set the value (by clicking on link corresponding to the ID) and remain in the index.php, because it is in it that the autosave is performed.

header.php

$(function () {

  /* Captura o 1º parâmetro passado pela URL */
  var valor_num = /num=([^&]+)/.exec(window.location.href)[1];
  $("[name='num-edit']").attr('value', valor_num);

  /* Autopreencher os campos do formulário com dados do BD */
  $.post("actions/autosalvar.php", function (data) {
    $("[name='id-cliente']").attr('value', data.id_cliente);
    $("[name='cliente']").attr('value', data.cliente);
  }, "json");

  /* Passar dados do formulário a cada 2 segundos para página PHP */
  setInterval(function () {           
    var dados = $('#meu_form').serializeObject();

    $.post("actions/autosalvar.php", {'meus_dados': dados}).done(function(data) {
    });

  }, 2000);

});

index php.:

<form name="meu_form" id="meu_form" novalidate="novalidate">
  <!-- Campo oculto para pegar ID do cliente  -->
  <input type="number" hidden name="num-edit" />

  <?php
  foreach($resultado_query as $res){      
    $id = $res['id'];
  ?>
  <!-- Setar ID na URL -->
  <a href="index.php?num=<?php echo $id; ?>">
  <?php } ?>
</form>

autosave.php:

/* Pegar ID para realizar consulta no BD */
$num = &$_POST['meus_dados']['num-edit'];

Answer 1

In JS, only after the return of the first post you start checking every 2 seconds. Then you put an initializer called "loopcheck()" inside the return of the post, see how it was below:

$(function () {
  /* Captura o 1º parâmetro passado pela URL */
  var valor_num = /num=([^&]+)/.exec(window.location.href)[1];
  $("[name='num-edit']").attr('value', valor_num);

  /* Autopreencher os campos do formulário com dados do BD */
  $.post("actions/autosalvar.php", function (data) {
    $("[name='id-cliente']").attr('value', data.id_cliente);
    $("[name='cliente']").attr('value', data.cliente);
    loopcheck();
  }, "json");
});
function loopcheck(){/* Passar dados do formulário a cada 2 segundos para página PHP */
  setInterval(function () {
    var dados = $('#meu_form').serializeObject();
    $.post("actions/autosalvar.php", {'meus_dados':dados}).done(function(data) {

    });
  }, 2000);
}

I hope I’ve helped.

Good luck!

Answer 2

From what I understand of your code each time you click on the LINK runs a postback and reload the page ...

Try using javascript to do this.

Create an ID for your Link and use it in Javascript like this:

$("#link").on("click", function (event) {
event.preventDefault();
 var dados = $('#meu_form').serializeObject();

    $.post("actions/autosalvar.php", {'meus_dados': dados}).done(function(data) {
      //executado com sucesso
    });
});

This will prevent when clicking on the link it changes page...

Worked?

function atualizarDados() { 
var dados = $('#meu_form').serializeObject(); $.post("actions/autosalvar.php", {'meus_dados': dados})
.done(function(data) { //executado com sucesso }); 
}; 

setInterval(atualizarDados, 2000);