redips.drag get row id when row is dropped and send to server

Question

I am building a django site and have implemented the redips.drag library in one of my pages to allow dragging of table rows. I want a very simple functionality in my code- add a listener, so when the row is dropped, it send the row data to the server. jQuery-speaking, something like this:

$(function() {
    $(someDomElement).on('DropEvent', function() {
           // send data to server
    };

});

The problem though, is that redips.drag is not a jQuery plugin but a javascript one, so my knowledge is a little (more than a little) lacking. I can probably find some other library, but it's performing really well and I prefer understanding how to work with it than look for a different one.

I can probably handle the "sending the data to the server" part by myself, what I can't understand at all is how to "catch" the drop event, what part of the dom do I listen to? I tried adding monitorEvents to different selectors but failed completely.

I also tried to manipulate the script.js file (the one that initializes the row handling), but also failed. here's the one I'm using (example 20 in the redips package):

"use strict";

// define redips object container
var redips = {};

redips.init = function () {
    // reference to the REDIPS.drag library and message line
    var rd = REDIPS.drag,
        msg = document.getElementById('msg');
    // initialization
    rd.init();
    // 
    // ... more irrelevent code ...
    // 
    // row event handlers
    //
    // row clicked (display message and set hover color for "row" mode)
    rd.event.rowClicked = function () {
        msg.innerHTML = 'Clicked';
    };
    // row row_dropped
    rd.event.rowDropped = function () {
        msg.innerHTML = 'Dropped';
    };

    // and so on...
};


// function sets drop_option parameter defined at the top
redips.setRowMode = function (radioButton) {
    REDIPS.drag.rowDropMode = radioButton.value;
};


// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redips.init, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redips.init);
}

Now I tried adding a console.log('hello') to the rd.event.rowDropped function (right above the msg.innerHTML line), but that doesn't work, I drop the row and nothing shows in the log. Doing a console.log outside the init function works so I know the script can pass stuff to the console.

Please, can anyone help me? I'm at a complete loss...

score 2 · Answer 1 · answered Aug 11 '14 at 19:43

I know this may be a little lateto answer your question but I found the answer. You need to use the event dropped and the attribute rd.obj (REDIPS.drag.obj) to get the id use it with simple javascript like getAttribute('id')

redips.init = function () {
// reference to the REDIPS.drag library and message line
var rd = REDIPS.drag,
    msg = document.getElementById('msg');
// initialization
rd.init();

// row clicked (display message and set hover color for "row" mode)
rd.event.clicked = function () {
    msg.innerHTML = 'Clicked' + rd.obj.getAttribute('id');
};
// row row_dropped
rd.event.dropped = function () {
    msg.innerHTML = 'Dropped' + rd.obj.getAttribute('id');
};

};

There's no such thing as a late answer in StackOverflow. Even though I'm not using that library anymore and moved to a different company - unless we're speaking of an obsolete technology, an answer can help anyone using the library in the future who will face a similar problem. So thanks for taking the time to answer it. I will go over the solution when I'll find some spare time and award you the correct answer if I'll see that it's working (you can also provide a jsfiddle demo and make that process faster) — yuvi, Aug 12 '14 at 09:29

redips.drag get row id when row is dropped and send to server

1 Answers1