1

Estou tentando criar uma linha editável, para que, quando eu clicar nela, o Js me traga os inputs, me permitindo fazer as alterações naquela linha e realizar o Update no banco.

Como nesta imagem, que printei do Trello.

Observe que é uma linha, mas quando clico sobre ela, a aplicação me traz um campo para editar e salvar.

inserir a descrição da imagem aqui Eu fiz o seguinte código:

function editarPedido() {
  var alterar = document.getElementById("editar");
  alterar.innerHTML =
  "<input type='text' name='alt-nome'>"+
  "<input type='text' name='alt-causa'>"+
  "<input type='submit' name='salvar' value='Salvar'>"+
  "</form>";
}


<ul>
  <?php if(!empty($campos)):
          foreach($campos as $campo): ?>

    <li class='lista-pedidos'>Nome: <?=$campo->nome?> - Causa: <?=$campo->causa?>

      <a href="#" onclick="editarPedido()"> Editar</a>

      <form action='action.php' method='post'>
        <input type='hidden' name='id' value='<?=$campo->id?>'>
        <div id="editar"></div>
      </form>

    </li>

          <?php endforeach;
  endif; ?>
</ul>

Isso até funciona, mas quando clico em editar, os inputs sempre aparecem na primeira linha. Não consigo fazer com que, ao clicar em qualquer linha, os inputs apareçam na linha que o click foi dado e permita a alteração dela.

Então tive a ideia de mandar de alguma maneira, o ID para essa função no Javascript, ou melhor, mandar para o getElementById. Mas nada que tentei até agora funcionou, na missão de tentar resgatar o ID numa função em JS.

Neste caso, a minha metodologia está correta pra fazer esse tipo de coisa? Ou isso apresenta falhas na segurança? Existem formas melhores para fazer isso?

1 Resposta 1

1

Não consegui entender muito bem, a pergunta parece ampla.

Mas pelo que entendi, você tem uma linha, ao clicar nela parece um input para alterar ou salvar o item no banco de dados. A dúvido seria em fazer tala efeito e em questão da segurança.

Tal efeito pode ser feito aqui:

$(function(){
  $('#i-msg').hide();
  $('#b-msg').hide();
  
  $('#t-msg').click(function(){
      $('#t-msg').toggle('fast');
      $('#i-msg').val($('#t-msg').text());
      $('#i-msg').toggle('fast');
      $('#b-msg').toggle('fast');
  });
  
  $('#b-msg').click(function(){
      $('#t-msg').text($('#i-msg').val());
    
      $.post("save.php",
           "msg="+ $('#t-msg').text(),
        function (retorno) {
          if (retorno != "success") {
            // Quando der erro
          } else {
            // Quando salvar
          }
      });
    
      $('#i-msg').toggle('fast');
      $('#b-msg').toggle('fast');
      $('#t-msg').toggle('fast');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="t-msg">Sua mensagem<p>

<input type="text" name="msg" id="i-msg"/>
<button id="b-msg">Ok</button>

No Javascript tenho um Ajax, responsável por requisitar um arquivo no PHP que irá salver ou editar o item no banco. Caso tenha de enviar mais de um campo no ajax sugiro criar um formulário e usar o .submit do jquery.

O arquivo save.php:

<?php
if(isset($_POST['msg'])) {
    //salva no banco de dados
    echo 'success'; // sucesso
} else {
    echo 'fail'; // falhou
}

Agora na questão de segurança, você pode dar uma olhada nessa pergunta:

Como proteger uma requisição Ajax

Onde o principal sistema de segurança é um token criado na hora da geração da página e depois verificado antes de manipular o banco de dados.

Também posso sugerir algo mais avançado, como o Silex Framework, um microframework simples, usado muito em APIs, no caso seria pra receber suas requisições ajax.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .