Delete PivotTable line via button in dialog box

Navigation
2

How do I delete a row from a PivotTable via a confirmation dialog (modal)?

So far I can delete just using the delete button directly from the row itself in the table, but I'd like to have a modal with a commit before deleting it.

In the table comes a remove button there I click on it and opens a dialog asking:

  

"Are you sure you want to delete?"

The problem is that I am not able to delete through this button Yes , it only works when I click the "remove" icon directly in the table. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<table id="lista-tarefas" class="table table-bordered table-striped">
   <thead class="bg-header-tb">
      <th class="text-center text-uppercase">Nome</th>
      <th class="text-center text-uppercase">Tipo</th>
      <th class="text-center text-uppercase">Ação</th>
   </thead>
   <tbody>
      <tr>
         <td>Tarefa 1</td>
         <td>Perguntas e Respostas</td>
         <td class="text-center">
            <p data-placement="top" data-toggle="tooltip" title="Editar" class="acoes-btn">
               <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >
               <span class="glyphicon glyphicon-pencil"></span>
               </button>
            </p>
            <p data-placement="top" data-toggle="tooltip" title="Excluir" class="acoes-btn">
               <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
               <span class="glyphicon glyphicon-trash"></span></button>
            </p>
         </td>
      </tr>
   </tbody>
</table>

<!--caixa de dialogo-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <h4 class="modal-title custom_align" id="Heading">Excluir tarefa</h4>
         </div>
         <div class="modal-body">
            <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Tem certeza que deseja excluir a tarefa?</div>
         </div>
         <div class="modal-footer ">
            <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-ok-sign"></span> Sim</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Não</button>
         </div>
      </div>
      <!-- /.modal-content --> 
   </div>
   <!-- /.modal-dialog --> 
</div>
    
asked by anonymous 19.06.2017 / 23:09

1 answer

2

To do this you have to add a trigger to the button SIM of the modal that will launch the function to eliminate what you want, which in this case will be the line (% ) of the table.

I would also recommend adding a container / wrapper throughout this code-excerpt to point more precisely to the desired element without affecting others that coincidentally might have the same class names or elements etc. ...

  

Issue:

     

Event td modified and prepared to deal with new elements added dynamically. Example online in jsFiddle: link

Here is an example below: 

var $thatRow;

// Quando ocorre um click em uma linha da tabela tr,
// salva essa linha como uma variável global para poder ser usada como ponto de referência onde o click ocorreu
$(document).on('click', '#lista-tarefas tbody tr', function(){
    $thatRow = $(this);
});

// Aponta para a nova class adicionada ao botão "SIM" do modal
$('#li-content-wrapper .excluir-trigger').on('click', function(){
    alert('Linha da tabela removida com sucesso!');
    // Aqui remove a linha referida
    $thatRow.hide(); // ou usando remove() do jQuery dependendo do que queira
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="li-content-wrapper">
    <table id="lista-tarefas" class="table table-bordered table-striped">
        <thead class="bg-header-tb">
            <th class="text-center text-uppercase">Nome</th>
            <th class="text-center text-uppercase">Tipo</th>
            <th class="text-center text-uppercase">Ação</th>
        </thead>
        <tbody>
            <tr>
                <td>Tarefa 1</td>
                <td>Perguntas e Respostas</td>
                <td class="text-center">
                    <p data-placement="top" data-toggle="tooltip" title="Editar" class="acoes-btn">
                        <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                    </p>
                    <p data-placement="top" data-toggle="tooltip" title="Excluir" class="acoes-btn">
                        <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </p>
                </td>
            </tr>
            <tr>
                <td>Tarefa 1</td>
                <td>Perguntas e Respostas</td>
                <td class="text-center">
                    <p data-placement="top" data-toggle="tooltip" title="Editar" class="acoes-btn">
                        <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                    </p>
                    <p data-placement="top" data-toggle="tooltip" title="Excluir" class="acoes-btn">
                        <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

    <!--caixa de dialogo-->
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                    <h4 class="modal-title custom_align" id="Heading">Excluir tarefa</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Tem certeza que deseja excluir a tarefa?</div>
                </div>
                <div class="modal-footer ">
                    <!-- AQUI ADICIONA A NOVA CLASS ".excluir-trigger" (Trigger) AO BOTÃO "SIM" -->
                    <button type="button" class="btn btn-primary excluir-trigger" data-dismiss="modal"><span class="glyphicon glyphicon-ok-sign"></span> Sim</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Não</button>
                </div>
            </div>
            <!-- /.modal-content --> 
        </div>
        <!-- /.modal-dialog --> 
    </div>
    ExecutarCopiar para uma nova respostaEsconder resultado
</div>
    
19.06.2017 / 23:30
Combobox of 5-minute intervals with PHP Api facebook does not return date of birth