How to send a table via ajax?

Question

How do I get the position of a td reordered by drag and drop and send back to Java via ajax ?

<table th:if="${!---.isEmpty()}" id="id-table" class="table table-bordered mdl-data-table">
    <thead>
        <tr>
            <th>#</th>
            <th class="test">Pergunta</th>
            <th>Tipo</th>
            <th th:if="${----.descricao} != 'Finalizada'"></th>
        </tr>
    </thead>
    <tbody id="id-tab">

        <tr class="drag" th:each="pergunta, row : ${---.perguntas}" th:id="${pergunta.id}">
            <th th:text="${row.count}"></th>
            <td th:text="${pergunta.texto} ? ${pergunta.texto} : '-'"></td>
            <td th:text="${pergunta.tipo} ? ${pergunta.tipo.descricao} : '-'"></td>
            <td th:if="${-----.descricao} != 'Finalizada'"><a th:href="|@{/excluir-pergunta/}${---.id}/${pergunta.id}|" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Excluir"><i class="material-icons red-text">delete</i></a></td>
        </tr>
    </tbody>
</table>

Script as adpto this ajax for my case..?

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

$.ajax({
    url : "/ordenaPergunta",
    beforeSend : function(request) {
    request.setRequestHeader(header, token);
};
async : false,
type : 'post',
data : {
    query : valor
},
success : function(data) {

}
});         

dragdrop

 $(document).ready( function() {
           $( "#id-table" ).sortable();
             $( "#id-table" ).disableSelection();
             $( "#id-table" ).draggable();
          } ); 

I am trying to take the new position of the dragged td and send via ajax,ja tried the following:

 $('.drag').on('drop', function(evento ,data){
            //console.log('this.cellIndex: ' + this.cellIndex + '\n$(this),index(): ' + $(this).index());
              console.log(evento);
              console.log(data);
           // trid = $('td').attr('id');
          //console.log(trid);
        });

or

    var linhas = document.querySelectorAll('.drag');
    var gerador = function(id){
        return function(){
            console.log(id);
        }
    }
    var i = 0;
    for(var l of linhas){
        l.addEventListener('dropactivate', gerador(i), false);
        i++;
    } 

or

 $(function(){
     $(".drag").droppable({
          drop: function (event, ui) {
          //    alert('Arrastou ' + ui.attr('id') + ' ----- ' + event.target.id);       
          console.log( "arrastou" );
          console.log(event.target.id);
          console.log(event);
          console.log(ui);

          // console.log( ui.position );
          // console.log( ui.originalPosition); 

        }
    });
});

The problem that I can’t get Drop Vent to know where the td was dragged into the table, I’ve tried drop, dropend, dropover, dropactive, but only Click Vent is printed in the terminal when debugging.

Answer 1

I resolved as follows :

$(".drag").droppable({
    drop : function (event, ui) {
        console.log("DROP");
        var perguntaId = ui.draggable.attr("id");
        var index = 0;
        var id = $('body').attr("anamnese");
        setTimeout(function() {
            var table = document.getElementById("table-detalhes-anamnese");
            for (var i = 0, row; row = table.rows[i]; i++) {
                if (table.rows[i].id == perguntaId) {
                    index = i;
                }
            }
            $.ajax({
                url : _context + "/anamnese/altera-ordem-pergunta/" + id,
                beforeSend : function(request) {
                    request.setRequestHeader(header, token);
                },
                async : false,
                type : 'GET',
                data : {
                    pergunta : perguntaId,
                    index : index
                },
                success : function(result) {
                    window.location.reload();
                }
            });
        }, 10);
    }
}); 

Answer 2

You’ll wear something like this:

$("html").on("dragover", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).addClass('dragging');
});

$("html").on("dragleave", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

Do the tests on when each event will be fired (I’m not sure). Ringtone html by your desired selector. Make your ajax within Events.

Source: https://stackoverflow.com/questions/19223352/jquery-ondrop-not-firing