0

Tenho uma lista de nomes que vem do banco de dados e preciso atualizar estes nomes quando necessário. Trago todos já dentro do formulário e atualizo com um Javascript.

Com um registro funciona perfeitamente. O problema é quando trago mais de um nome do banco, daí ele só funciona no primeiro formulário.

<?php
$consulta = mysql_query("
SELECT * FROM categoria limit 2");
while ($dados = mysql_fetch_array($consulta)) {
?>
<form method="POST" action="" id="ajax_form">
    <div class="row">
        <div class="col-md-6 form-group">
            <input type="text" id="id_categoria" name="id" class="form-control" value="<?echo$dados['id_categoria']?>" readonly>
            <input type="text" id="nome" name="nome" class="form-control" maxlength="100" placeholder="Seguimento" value="<?echo$dados['nome']?>" required autofocus>
            <button class="btn btn-primary" type="submit">Atualiza</button>
        </div>
    </div>
</form> 
<?}?>

JS

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#ajax_form').submit(function(){
    var data = { 
       id_categoria: $('#id_categoria').val(),
       nome: $('#nome').val()
      };
    $(this).text("Atualizando"); // Aqui voce muda o texto do botao caso queira
    $.ajax({
        type: "POST",
        url: "seguimento_lista_sql_update.php",
        data: data,
        cache: true
    })
});
}); 
</script>   
1
  • 1
    Cade o código que atualiza, ou seja a página seguimento_lista_sql_update.php ?
    – denis
    23/03/2016 às 21:07

1 Resposta 1

0

Tente dessa forma mais simplificada, fiz umas atualizações no formulário para o botão ter um id (o mesmo da categoria) e o campo do texto ter um id também (s+id_categoria), mudei o submit para button e adicionei uma classe atualiza a ele, removi também o campo id_categoria pois não era necessário, caso deseja exibir, basta adaptar no modelo:

Formulário com as alterações:

<form method="POST">
    <div class="row">
        <div class="col-md-6 form-group">
            <input type="text" class="form-control" id="s<?=@$dados['id_categoria']?>" maxlength="100" placeholder="Seguimento" value="<?=@$dados['nome']?>" required autofocus>
            <button id="<?=@$dados['id_categoria']?>" class="btn btn-primary atualiza" type="button">Atualiza</button>
        </div>
    </div>
</form>

JQuery:

<script type="text/javascript">
    jQuery(document).ready(function(){
        $('button.atualiza').click(function() {
            botao = $(this);
            botao.text("Atualizando");
            $.ajax({
                type: "POST",
                url: "seguimento_lista_sql_update.php",
                data: { id_categoria: botao.attr('id'), nome: $('input#s'+botao.attr('id')).val() },
                cache: true
            }).done(function(data) {
                botao.text("Atualiza");
            });
        });
    }); 
</script>  

Espero que ajude, abraços

3
  • funcionou perfeitamente!Aproveitando existe alguma função que eu possa colocar junto com o botao.text para ele mudar a classe em quanto a atualização está sendo feita?
    – Silva
    24/03/2016 às 16:06
  • Existem 3 funções, pesquise mais sobre: .removeClass() , .addClass() e .toggleClass()
    – Mastria
    24/03/2016 às 16:09
  • Obrigado! @Mastria
    – Silva
    24/03/2016 às 16:10

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 .