Skip to main content
formata bloco de código para facilitar leitura
Fonte Link
Pedro Sanção
  • 5,7mil
  • 17
  • 41
        $(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");
                });
            });
});
$(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");
    });
  });
});
   <?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))]));
}
<?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))]));
}
        $(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");
                });
            });
});
   <?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))]));
}
$(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");
    });
  });
});
<?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))]));
}
tags editadas
Link
Matheus
  • 165
  • 1
  • 19
Fonte Link
Matheus
  • 165
  • 1
  • 19

Forma de inserção no accordion em múltiplos itens com AJAX

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.