0

Tenho a seguinte página de receitas, que traz a lista de ingredientes:

<?php
$db->setQuery("Select * from #__ingredientes");
$tmpingredientes = $db->loadObjectList();
?>

E dai por diante mostro a lista de ingredientes.

Eu queria colocar um input e botão que ao enviar, ele insere um novo valor e já atualiza essa lista que está aparecendo, sem atualizar a página, acredito que com ajax, certo? Algo assim:

echo '
<input type="text" id="ingrediente" value="'.$ingrediente.'">
';
$db->setQuery("INSERT INTO #__ingredientes
(id, ingrediente, ordering, published)
VALUES (NULL,$ingrediente,'0','1')
");

A linha de raciocinio ta certa ou to viajando?

3
  • Você acertou na ideia, mas errou longe na prática, você ja fez algo em JS ou Ajax que faça uma consulta ? Commented 23/10/2017 às 19:15
  • com ajax não.. :/ Commented 23/10/2017 às 19:24
  • Coloquei uma resposta bem detalhada, acredito que vais conseguir com base nela. Commented 23/10/2017 às 19:56

2 Respostas 2

1

Isso é bem simples de fazer, vamos supor que seu codigo para inserir está em um arquivo unico, chamado inserir.php.

$db->setQuery("INSERT INTO #__ingredientes
(id, ingrediente, ordering, published)
VALUES (NULL,$ingrediente,'0','1')
")

Agora bastá fazer o ajax

$.ajax({
   type: 'POST',
   url: 'inserir.php',
   data: {
      ingrediente: 'ALGUMA COISA'
   },
   success: function(data){
      $('#Lista').append('<li>'+ingrediente+'</li>')
   }
})

Dessa maneira ele sempre irá inserir um novo item a sua lista sem atualizar a pagina, como você não postou todo seu codigo, ficou dificil fazer um exemplo mais completo, mas a base é essa.

1
  • é que o codigo ta meio complexo, decidi testar primeiro num arquivo em branco pra aprender, montei um addingrediente.php que tem um form com input e button, queria no submit dele, ele fazer esse processo todo Commented 23/10/2017 às 19:31
0

Vamos por partes:

1 - Esse processo engloba 4 coisas, HTML, Javascript, PHP e Ajax.

  • HTML Vai construir os elementos
  • Javascript vai fazer a interação entre o HTML, Ajax e o PHP.
  • O ajax vai interagir com o PHP e dizer para o Javascript o que fazer.
  • O PHP vai pensar, salvar no banco o valor, e devolver algo via Ajax para o Javascript trabalhar.

Primeiro, você precisa de um input e de um button:

<input type='text' name='ingrediente' class='input'>
<button class='add-ingrediente'>Adicionar</button>

Segundo, você precisa pegar o valor do input, ao clicar no button, isso nós faremos com jQuery(javascript facilitado):

$(document).on('click','.add-ingrediente',function(){
 //Repare que aqui nós vamos atribuir o valor do elemento `'.ingrediente'` (que é o input, a variavel JS `'ingrediente'`
 var ingrediente = $('.ingrediente').val();
 //AQUI VAI A CHAMADA AJAX
});

Terceiro, pra solicitar uma arquivo PHP que salve no BD e devolva o valor, nós vamos usar um método $.ajax, que funciona da seguinte forma: OBS: Essa chamada ajax deve ir dentro do evento que foi passado a cima.

$.ajax({
   //Define o método que 'ingrediente' será passado para o servidor
   type: "POST",
   //Aqui deve-se apontar o arquivo da chamada
   url: "insere.php",
   //Aqui é o modo de se passar um váriavel JS para o php, 
   data: {ingrediente: ingrediente},
   //Aqui é o formato que o arquivo PHP irá responder
   dataType: 'html',
   //Caso tudo ocorra bem, aqui nós vamos preencher a lista
   //Repare que este 'data' é o que o arquivo insere.php vai devolver
   success: function (data)
      {
          //Selecionamos o elemento '.lista', e com o método jQuery append() colocamos a resposta do arquivo PHP dentro da lista.
          $('.lista').append(data);
      }
  });

Quarto, vamos ver o arquivo insere.php:

<?php
//Recebendo o valor passado via POST
$ingrediente = $_POST['ingrediente'];
//Aqui você fez correto, 
$db->setQuery("INSERT INTO #__ingredientes
(id, ingrediente, ordering, published)
VALUES (NULL,$ingrediente,'0','1')
");
//E aqui você devolve um elemento 'li' para a requisição:
//Isso é o que será posto no final da lista
echo '<li>'.$ingrediente.'</li>';

IMPORTANTE: Não esqueça de incluir a bibliote do jQuery dentro do <head></head> de sua página

<script
              src="https://code.jquery.com/jquery-3.2.1.js"
              integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
              crossorigin="anonymous"></script>

Esse fiddle a seguir demonstra como o arquivo que possui a lista deve ser de modo básico.

$(document).on('click','.add-ingrediente',function(){
 var ingrediente = $('.ingrediente').val();
 $.ajax({
  type: "POST",
  url: "insere.php",
  data: {function: 'geral_controllers', target: 'render_edit_user_form', collaborator: $collaborator},
  dataType: 'json',
  success: function (data)
    {
       $('.lista').append(data);
    }
  });
});
.div-form {
width:100%;
border:1px solid #ccc;
}

.div-lista {
border:1px solid #999;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='div-form'>
<input type='text' name='ingrediente' class='input'>
<button class='add-ingrediente'>Adicionar</button>
</div>

<div class='div-lista'>
<ul class='lista'>
  <li>
     Ing 1
  </li>
  <li>
    Ing 2
  </li>
  <li>
    Ing 3
  </li>
  <li>
    Ing 4
  </li>
</ul>
</div>

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 .