How to send a table via ajax?

Asked

Viewed 171 times

0

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.

  • What you’ve been trying to?

  • Hi Gardheam! Can you show what HTML you have? Using native Javascript?

  • opa,tried to detail the problem,vlw

2 answers

0

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

0

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.