Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wagner M.M

Excluir com ajax não funciona

Por , em Javascript

Recommended Posts

Wagner M.M    0

Wagner M.M
Postado

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>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner M.M    0

Wagner M.M
Postado


 

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

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>

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner M.M    0

Wagner M.M
Postado
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

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

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 ...');    
            });
         });
  
});

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

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. 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner M.M    0

Wagner M.M
Postado

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...');    
            });
         });


 


       

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner M.M    0

Wagner M.M
Postado
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...');    
            });
         });


 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner M.M    0

Wagner M.M
Postado
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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

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){

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner M.M    0

Wagner M.M
Postado
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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • ILR master
      Cronômetro regressivo php
      Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Danilo - Jesus voltará!
      Pegar class e id gerado dinamicamente em requisição ajax (javascript) e php
      Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
    • joeythai
      combobox repetindo registros
      Por joeythai
      Boa tarde pessoal,
       
      eu criei uma página da qual tenho diversos checkbox para marcar, se tiver alguma caixinha marcada eu habilito um botão para fazer o envio ao servidor, porém, está acontecendo um problema que não consegui identificar, o que está acontecendo é o seguinte:
       
      Quando eu marco um checkbox apenas, o botão é liberado, eu clico nele e aparece um modal para preencher os dados, e nesse modal tem um combobox com opções criadas em javascript, como tem somente uma caixinha marcada as informações no combobox aparecem perfeitamente, porém, se eu marco 2 checkbox ou mais as opções do combobox se repetem, como se eu tivesse fazendo isso dentro de um looping, o que não é verdade, eis o codigo abaixo:
       
      <code>
        <!DOCTYPE html>    <html lang="en">  
         <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   </head>  
        <body>   <input id="check-belongings" class="custom-control-input check-belongings" name="" type="checkbox" value="">   <label for="" class="custom-control-label"></label>   <div class="col-12">   <div class="md-form mt-0 mb-0 pt-0 pb-0">   <label for="reason">Motivo</label><br><br>  
        <select class="form-control md-select2" style="width: 100%; text-transform: uppercase"   id="reason_all_belongings" name="reason_all_belongings" required>   </select>   </div>   </div>
       
        <script>  
         $('.check-belongings').click(function () {    let belongingsIds = [];    let listaMarcados;  
         let optionsReason = [];   let option = null;  
        let movementsSelect = document.getElementById("reason_all_belongings");  
        optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];  
        optionsReason.forEach((reason) => {   option = new Option(reason, reason.toLowerCase());   movementsSelect.options[movementsSelect.options.length] = option;   });  
        listaMarcados = document.getElementsByClassName("check-belongings");   for (let loop = 0; loop < listaMarcados.length; loop++) {   var item = listaMarcados[loop];  
         if (item.type == "checkbox" && item.checked) {    $('.drop-all-belongings').removeAttr('disabled');    belongingsIds.push(item.value);    } else { // $('.drop-all-belongings').attr('disabled', 'disabled');   }   }   });   </script>   </body>  
        </html> </code>
    • Carcleo
      [Resolvido] Alterar rota php com JQuey ou javaScript
      Por Carcleo
      Pessoal,  tenho uma janela popup que vai cobrar toda a tela.
      <div id="personal" class="personal">     <label>Quantas pedras deseja adquirir?</label>          <input type="number" name="rocks" id="rocks" required placeholder="1" max="200">     <a href="<?php echo route('client.buy.raffle',[1]); ?> "><h3>RESERVAR</h3></a> </div> onde tem [1] , no <a href
       
      preciso alterar via JavaScript para o valor colocado no input no momento do clique
       
      Será que tem jeito?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito