Jump to content
Matheus B. Siqueira

Forma de inserção no accordion em múltiplos itens com AJAX [Problema atualizado]

Recommended Posts

 

Olá, tento fazer uma requisição para atualização de item do accordion no mysql, porém apenas um item é atualizado.

O código funciona da seguinte forma: É buscado perguntas referente ao vídeo selecionado no carousel, logo após, o código da Amostra de Código 1, cria os cards dentro do modal. Cada card é referente a uma pergunta diferente registrada no Banco de Dados.

Porém, ao tentar atualizar um item do MYSQL, dentro do card, no textarea, o primeiro item (1º pergunta) desse accordion é atualizado, o segundo item (2º pergunta) não é atualizado.

Cada pergunta possui um id no MYSQL, bem como, um assunto, uma resposta, uma pergunta... de acordo com a Figura 01.

Vale ressaltar que, de acordo com a Amostra de Código 2, é buscado juntamente com o AJAX, todas as perguntas referente ao vídeo selecionado no carousel.

Amostra de Código 1:

 $(document).ready(function() {
    
      $(function()
            {
                $('#responder_duvidas').click(function() {
                        var codigoVideo2 = $('.carousel-item.active').attr('data-link_video');
                    var accordion2 = "";
     
                    $.post("buscar_duvida_monitor_resp.php", {
                        codigo_video_monitor: codigoVideo2,
                    },
    
                    function(data2, status) {
                        if (data2 !== "Fail") {
    
                            $("#dynamic_accordion #accordion").html(accordion2); // Adiciona essa linha
     
                            $.each(JSON.parse(data2), function (index2, duvida3)
                            {
                                accordion2 += '<div class="card" style="margin: 5px">';
                                accordion2 += '<div class="card-header" id="heading'+index2+'">';
                                accordion2 += '<h5 class="mb-0">';
                                accordion2 += '<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'+index2+'" aria-expanded="true" aria-controls="collapse'+index2+'">';
                                accordion2 += duvida3.assunto;
                                accordion2 += '</button>';
                                accordion2 += '</h5>';
                                accordion2 += '</div>';
             
                                accordion2 += '<div id="collapse'+index2+'" class="collapse" aria-labelledby="heading'+index2+'" data-parent="#accordion">';
                                accordion2 += '<div class="card-body">';
                                accordion2 += '<div style="background: #ddd; color #fff; padding: 10px 20px; border-radius: 5px">';
                                accordion2 += duvida3.pergunta;
                                accordion2 += '</div>';
             
                                accordion2 += '<hr>';
             
                                accordion2 += '<div style="background: #fff; color #fff; padding: 10px 20px; border-radius: 5px">';
                                accordion2 += '<form method="post" enctype="multipart/form-data">';
                                accordion2 += '<textarea class="form-control" name="resposta" id="resposta" required>'+duvida3.resposta+'</textarea>';
                                accordion2 += '<input type="hidden" id="id_duvidas" value="'+duvida3.idduvidas+'" />';
                                accordion2 += '<br><button type="button" id="enviar_resposta" class="btn btn-success btn-sm">Enviar resposta</button>';
                                accordion2 += '</form>';
                                accordion2 += '</div>';
                                accordion2 += '</div>';
                                accordion2 += '</div>';
                                accordion2 += '</div>';
             
                                $("#dynamic_accordion #accordion").html(accordion2);
                            });
                        }
                    });
                });
    
                $(document).on("click", "#enviar_resposta",function(){
                    $.ajax({
                        url: "atualizar_resposta.php",
                        method: "POST",
                        data: {
                            resposta: $('#resposta').val(),
                            idduvidas: $('#id_duvidas').val()
                        },
                        success: function(res) {
                            var data = JSON.parse(res);
                            alert((data.success == true) ? "Pergunta atualizada" : "Pergunta não atualizada");
                  $('.modal-backdrop').remove();
                            return;
                        }
                    });
    
                    // fecha modal
                    $("#modalDuvidas").modal("hide");
                });
            });
});
       

Figura 1:

inserir a descrição da imagem aqui

 

 

Amostra de Código 2:

  <?php

if (isset($_POST['idduvidas']) && isset($_POST['resposta'])) {
    $id_resposta = $_POST['idduvidas'];
    $resposta = $_POST['resposta'];
 
    $servidor = 'localhost';
    $usuario = 'root';
    $senha = 'root';
    $banco = 'onteach';
 
    $conexao = mysqli_connect($servidor,$usuario,$senha,$banco);
    $consulta2 = "UPDATE duvidas SET duvidas.resposta = '$resposta' WHERE duvidas.idduvidas = '$id_resposta'";
 
    die(json_encode(['success'=>(mysqli_query($conexao, $consulta2))]));
}
 

Figura 2 (FIGURA COMPLEMENTAR APRESENTANDO O ACCORDION NO WEBSITE)

inserir a descrição da imagem aqui

 

Por fim, este tópico auxilia em um tema que é específico, porém, pode ser utilizado para outros fins de programação, bem como, a utilização de definição de váriantes em accordion com maiores itens.

Desde já, agradeço.

 

Share this post


Link to post
Share on other sites

DESCOBRI O PROBLEMA, PORÉM NÃO SEI COMO RESOLVER!

 

Cada card do accordion, possui um index, o primeiro é 0, o segundo é 1, assim sucessivamente.

No botão que criei para alterar o comentário está assim:

 

'<br><button type="button" id="enviar_resposta" class="btn btn-success btn-sm">Enviar resposta</button>';

 

Porém deve estar assim:

 

'<br><button type="button" id="enviar_resposta'+index2+'" class="btn btn-success btn-sm">Enviar resposta</button>';

 

O único problema é no JQUERY.

 

Não faço ideia de como fazer com que o: 

$(document).on("click", "#enviar_resposta",function(){

Consiga identificar qual botão do card que estou selecionando..

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By k9studio
      Olá Amigos,
      se alguem puder dar um help fico muito grato
      seguinte:
      estou criando um sistema de login com cookie
      todas as paginas fica no patch
      www/htdocs/script/
      quando logar no dominio.com.br liberar o acesso no  cliente.dominio.com.br tambem
      acesso:dominio.com.br
      ou
      quando logar no cliente.dominio.com.br liberar o acesso no dominio.com.br tambem
      acesso:cliente.dominio.com.br
      e guando deslogar quebrar conxao com os dois
      existe uma maneira de fazer isso?
       
    • By ferreiradealmeida
      Prezados(as), boa tarde.
       
      Já trabalhei com webdesign e desenvolvimento frontend, mas faziam anos que não mexia com isso. Hoje sou advogado.
       
      Elaborei uma assinatura para e-mail em HTML, que quando aberta no navegador é exibida corretamente:
       

       
      Ocorre que quando a assinatura é inserida na mensagem (Microsoft Outlook 2016) a disposição dos elementos se mostra desconfigurada, assim permanecendo se a mensagem for enviada:
       

       
      Devem ter notado que a imagem que fica acima das informações é uma imagem de fundo. Já tentei também "background" na <table>, mas neste caso, apesar de aparecer no navegador a imagem sequer aparece na assinatura:
       
      <div style="max-width:716px; max-height:200px; position:relative;"> <img src="http://www.fafadv.com.br/images/assinatura.jpg" alt="imagem-assinatura" /> <div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;"> <table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;"> <tr> <td rowspan="3" style="width:242px;"></td> <td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;"> <p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br> <span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p> <p style="margin-top:-7px;">(16) 9 9373-2552<br> (16) 3421-7783</p> <p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br> <a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p> <p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br> Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p> </td> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.facebook.com/adv.faf/"> <img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:66px; text-align:center;"> <a href="https://www.instagram.com/faf.adv/"> <img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.linkedin.com/company/faf-adv"> <img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;"> </a> </td> </tr> </table> </div> </div> Serei grato se alguém souber o que ocorre e puder colaborar.
       
      Obrigado.
    • By Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • By Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.