Excluir com ajax não funciona

[Wagner M.M 0]

Preciso fazer o cadastro e possibilidade de excluir com ajax (afim de não dar refresh na página)

Estou fazendo assim, o primeiro que seria o $('#reg-form_2').submit(function(e){ para cadastrar funciona, mais os $('#reg-form_3').submit(function(e){ não funciona, os dois aparacem na mesma página:

$(document).ready(function() {  

        // submit form using $.ajax() method

        $('#reg-form_2').submit(function(e){

            e.preventDefault(); // Prevent Default Submission

            $.ajax({
                url: 'cadastra_convidado.php',
                type: 'POST',
                data: $(this).serialize() // it will serialize the form data
            })
            .done(function(data){
                $('#form-content_2').fadeOut('slow', function(){
                    $('#form-content_2').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
        });


    });
    $(document).ready(function() {  

        // submit form using $.ajax() method

        $('#reg-form_3').submit(function(e){

            e.preventDefault(); // Prevent Default Submission

            $.ajax({
                url: 'deletar_convidado.php',
                type: 'POST',
                data: $(this).serialize() // it will serialize the form data
            })
            .done(function(data){
                $('#form-content_2').fadeOut('slow', function(){
                    $('#form-content_2').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
        });


    });

 

<form method="post" id="reg-form_2" autocomplete="off" style="border:none;">
    <input type="text" name="nome" id="nome" value="" placeholder="Digite o Nome do Convidado"><br>
    <input type="text" name="email" id="email" value="" placeholder="Digite o email do Convidado">
    <button class="btn btn-primary">Adicionar convidado</button>    
    </form>
    <form method="post" id="reg-form_3" autocomplete="off" style="border:none;">           <input type="hidden" name="deletar_convidado" id="deletar_convidado" value="<?php echo $row_convidados['id']; ?>">
    <button class="btn btn-primary" style="margin-bottom:20px;width: 100%;" type="submit">Exlcluir</button> 
    </form>            
<div id="form-content_2"></div>

 

[Eziquiel 96]

Já que as duas funções se repetem, tente simplificar desta maneira:

 

Novo código HTML: (repare que eu criei o atributo "link" no seu <form>, onde você informa o seu arquivo php)

<form url="cadastra.php" method="post" id="reg-form_2" autocomplete="off" style="border:none;">
    <input type="text" name="nome" id="nome" value="" placeholder="Digite o Nome do Convidado"><br>
    <input type="text" name="email" id="email" value="" placeholder="Digite o email do Convidado">
    <button class="btn btn-primary">Adicionar convidado</button>    
</form>

<form url="deletar_convidado.php" method="post" id="reg-form_3" autocomplete="off" style="border:none;">           
    <input type="hidden" name="deletar_convidado" id="deletar_convidado" value="<?php echo $row_convidados['id']; ?>">
    <button class="btn btn-primary" style="margin-bottom:20px;width: 100%;" type="submit">Exlcluir</button> 
</form>            

<div id="form-content_2"></div>

Depois seu script ficará assim: (não precisa repetir o código)

$(document).ready(function() {  

        $('#reg-form_2').add('#reg-form_3').submit(function(e){

            e.preventDefault(); 

            $.ajax({
                url: $(this).attr('url'),
                type: 'POST',
                data: $(this).serialize() 
            })
            .done(function(data){
                $('#form-content_2').fadeOut('slow', function(){
                    $('#form-content_2').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
        });
  
});

 

Se não funcionar, nos diga o que acontece e o tipo de falha.

[Wagner M.M 0]

retornou um alert

 

Ajax Submit Failed ...

[Eziquiel 96]

Você está usando o código HTML que te passei?

A função de cadastrar funcionou? Ou ambos retornaram erro?

[Wagner M.M 0]

 

Agora, Eziquiel disse:

Você está usando o código HTML que te passei?

A função de cadastrar funcionou? Ou ambos retornaram erro?

Ambas retornaram erro

 

Assim tipo a li puxa do bando de dados o Nome e Status do usuario, quando clico nos outros botões além do primeiro do loop, não funciona ele da refresh na página.

[Eziquiel 96]

Desculpe, escrevi algo errado.

substitua o seu HTML por esse. Veja se ao menos a função de cadastrar vai funcionar...

<form url="cadastra_convidado.php" method="post" id="reg-form_2" autocomplete="off" style="border:none;">
    <input type="text" name="nome" id="nome" value="" placeholder="Digite o Nome do Convidado"><br>
    <input type="text" name="email" id="email" value="" placeholder="Digite o email do Convidado">
    <button class="btn btn-primary">Adicionar convidado</button>    
</form>

<form url="deletar_convidado.php" method="post" id="reg-form_3" autocomplete="off" style="border:none;">           
    <input type="hidden" name="deletar_convidado" id="deletar_convidado" value="<?php echo $row_convidados['id']; ?>">
    <button class="btn btn-primary" style="margin-bottom:20px;width: 100%;" type="submit">Exlcluir</button> 
</form>            

<div id="form-content_2"></div>

 

 

 

[Wagner M.M 0]

4 minutos atrás, Eziquiel disse:

Desculpe, escrevi algo errado.

substitua o seu HTML por esse. Veja se ao menos a função de cadastrar vai funcionar...

<form url="cadastra_convidado.php" method="post" id="reg-form_2" autocomplete="off" style="border:none;">
    <input type="text" name="nome" id="nome" value="" placeholder="Digite o Nome do Convidado"><br>
    <input type="text" name="email" id="email" value="" placeholder="Digite o email do Convidado">
    <button class="btn btn-primary">Adicionar convidado</button>    
</form>

<form url="deletar_convidado.php" method="post" id="reg-form_3" autocomplete="off" style="border:none;">           
    <input type="hidden" name="deletar_convidado" id="deletar_convidado" value="<?php echo $row_convidados['id']; ?>">
    <button class="btn btn-primary" style="margin-bottom:20px;width: 100%;" type="submit">Exlcluir</button> 
</form>            

<div id="form-content_2"></div>

O primeiro agora funcionou,

 

Como falei ele se torna um loop com varios botões de exlcluir, quando clico apartir do segundo botão da refresh na pgaina, e quando clico no primeiro retorna isso Ajax Submit Failed ...

Veja na imagem como fica
http://ap.imagensbrasil.org/image/jt7rKu

 

 

 

[Wagner M.M 0]

quando clico para cadastrar ele retorna os registros ja com o registro criado como na imagem, depois de querer exlcuir, não funciona

[Eziquiel 96]

OK... vamos mudar isso então... só um minuto.

 

[Eziquiel 96]

OK... Tente este script aqui:

 

$(document).ready(function() {  

  $('#reg-form_2').submit(function(e){

            e.preventDefault(); 

            $.ajax({
                url: 'cadastra_convidado.php',
                type: 'POST',
                data: $(this).serialize() 
            })
            .done(function(data){
                $('#form-content_2').fadeOut('slow', function(){
                    $('#form-content_2').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
        });
  
  
        $(document).on('click', '#reg-form_3', function(e){

            e.preventDefault(); 

            $.ajax({
                url: 'deletar_convidado.php',
                type: 'POST',
                data: $(this).serialize() 
            })
            .done(function(data){
                $('#form-content_2').fadeOut('slow', function(){
                    $('#form-content_2').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
         });
  
});

 

[Wagner M.M 0]

está quase, agora em todos os botoes Excluir, fica retornando  Ajax Submit Failed ...

 

Mais está exlcuindo do banco já

[Wagner M.M 0]

o erro estava no php, desculpe, agora deu certinho obrigadoo

[Eziquiel 96]

Beleza. De nada.

Só pra você saber qual é o problema... quando você tem elementos que são criados dinamicamente, você precisa chamar a função deles de uma outra maneira, quando utilizando JQuery. Exemplo:

$(document).on('click', '#reg-form_3', function(e){

Esse código acima tem a mesma funcionalidade deste abaixo:

$('#reg-form_3').click(function(e){

Só que este segundo script será atribuído apenas aos elementos #reg-form_3 criados no carregamento da página.

Já o primeiro atribuirá o evento a todos os elementos #reg-form_3 do documento, inclusive os criados dinamicamente. 

[Wagner M.M 0]

Como eu faço quando o php fizer um loop tendo vários formulários tipo assim

 

<form url="deletar_convidado.php" method="post" id="reg-form_3<?php echo $i_content ?>" autocomplete="off" style="border:none;  float:left; width:50px">           
  <input type="hidden" name="i_content" id="i_content" value="<?php echo $i_content ?>">
  <input type="hidden" name="auxiliar_evento_usuarioss" id="auxiliar_evento_usuarioss" value="<?php echo $produto["auxiliar_evento_usuario"] ?>">
   <input type="hidden" name="deletar_convidado" id="deletar_convidado" value="<?php echo $row_convidado['id']; ?>">
    <button class="btn btn-info lista_convidado_1" type="submit"><i class="entypo-cancel-circled"></i></button> 
</form>            

<div id="form-content_2<?php $i_content++; echo $i_content; ?>" style="clear:both;"></div>

perceba que ali reg-form_3<?php echo $i_content ?>  e também form-content_2<?php $i_content++; echo $i_content; ?>"criei para que eu possa excluir os arquivos quando estiver em loop.

 

estou fazendo assim, funciona apenas no primeiro registro do Loop php, o restante nao funciona

 

        $(document).on('click', '#reg-form_3'+$("#i_content").val(), function(e){
            e.preventDefault(); 
            $.ajax({
                url: 'deletar_convidado.php',
                type: 'POST',
                data: $(this).serialize() 
            })
            .done(function(data){
               alert($("#i_content").val());
               
                $('#form-content_2'+$("#i_content").val()).fadeOut('slow', function(){
                    $('#form-content_2'+$("#i_content").val()).fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed deletar convidado...');    
            });
         });

 

       

[Eziquiel 96]

Chame a função assim:

$(document).on('submit', '#reg-form_3', function(){

 

[Wagner M.M 0]

40 minutos atrás, Eziquiel disse:

Chame a função assim:

$(document).on('submit', '#reg-form_3', function(){

 

Amigo ainda não funcionou, ele dá refresh na pagina quando clico botão excluir e nao exclui o registro

 

$(document).on('submit', '#reg-form_3', function(){
            e.preventDefault(); 
            $.ajax({
                url: 'deletar_convidado.php',
                type: 'POST',
                data: $(this).serialize() 
            })
            .done(function(data){
               alert($("#i_content").val());
               
                $('#form-content_2'+$("#i_content").val()).fadeOut('slow', function(){
                    $('#form-content_2'+$("#i_content").val()).fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed deletar convidado...');    
            });
         });

 

[Eziquiel 96]

Ah sim. Faltou passar um parâmetro:

Use assim:

 

$(document).on('submit', '#reg-form_3', function(e){

[Wagner M.M 0]

6 minutos atrás, Eziquiel disse:

Ah sim. Faltou passar um parâmetro:

Use assim:

 

$(document).on('submit', '#reg-form_3', function(e){

 

Eziquiel que coisa cara, ainda não deu certo, fica dando refresh na pagina ainda quando tem mais de uma formulario.

 

No html fica assim o id dos forms

#reg-form_31 

#reg-form_32

#reg-form_33

#reg-form_34

 

Equando tem um formulario só retorna Undefined

[Eziquiel 96]

Ah sim. Não havia reparada esse incremento no id.

Vamos fazer por classe então.

 

Ao criar seu <form> via php, inclui uma classe nele. Pode ser assim:

<form class="reg-formulario" url="deletar_convidado.php" method="post" id="reg-form_3<?php echo $i_content ?>" autocomplete="off" style="border:none;  float:left; width:50px">

Agora sua função será implementada assim:

 

$(document).on('submit', '.reg-formulario', function(e){

 

 

[Wagner M.M 0]

7 minutos atrás, Eziquiel disse:

Ah sim. Não havia reparada esse incremento no id.

Vamos fazer por classe então.

 

Ao criar seu <form> via php, inclui uma classe nele. Pode ser assim:

<form class="reg-formulario" url="deletar_convidado.php" method="post" id="reg-form_3<?php echo $i_content ?>" autocomplete="off" style="border:none;  float:left; width:50px">

Agora sua função será implementada assim:

 

$(document).on('submit', '.reg-formulario', function(e){

 

 

fechou amigo muito obrigado