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>