Publicado em 3 de abr.

Excluir com ajax não funciona

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>

Discussão (20)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Eziquiel· 3 de abr.

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· 3 de abr.

retornou um alert

Ajax Submit Failed ...

Eziquiel· 3 de abr.

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

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

Wagner M.M· 3 de abr.

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· 3 de abr.

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· 3 de abr.

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· 3 de abr.

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

Eziquiel· 3 de abr.

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

Eziquiel· 3 de abr.

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· 3 de abr.

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

Mais está exlcuindo do banco já

Wagner M.M· 3 de abr.

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

Eziquiel· 3 de abr.

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· 6 de abr.

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· 6 de abr.

Chame a função assim:

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

Wagner M.M· 6 de abr.

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· 6 de abr.

Ah sim. Faltou passar um parâmetro:

Use assim:

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

Wagner M.M· 6 de abr.

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· 6 de abr.

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· 6 de abr.

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

Eziquiel· 6 de abr.

De nada.