How to send a table via ajax?

Question

How to send a table via ajax?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

How do I get the position of a reordered drag and drop td and send it back in 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 how do you fix 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'm trying to get the new position of the dragged td and send via ajax, already 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 not get the drop event to know where the td was dragged on the table, I tried drop, dropend, dropover, dropactive, but only the event click is printed on the terminal when debugging.

javascript ajax

asked by anonymous 14.06.2017 / 14:22

2 answers

Remove input box from canvas Creating the "persistence.xml" JPA / Hibernate file

score 0 · Answer 1

You will use 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!");
});

Test on when each event will be triggered (I'm not sure). Touch html for your desired selector. Make your ajax within Events.

Source: link

score 0 · Answer 2

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