Using Bubble Editor - entire row is passed to server instead of single field

ksoldink

First question, loving DataTables and Editor!

Not sure if I'm just missing an option or not, but when I'm using the bubble editor and inspecting the ajax data passed, it's passing the entire row instead of just the field I have clicked on. Is there an option to parse down or limit the data passed back and forth with bubble?

You can replicate this on https://editor.datatables.net/examples/bubble-editing/simple.html by watching the data passed into staff.php when you click update on a bubble.

Thanks!
_K

allan

Hi,

This is correct and expected behaviour from the code at the moment. I'm going to introduce a new option into the next major version that will stop this from happening.

Regards,
Allan

ksoldink

Thanks for the response, allan. Really looking forward to this feature! As a workaround for now, how would you suggest limiting the data passed to the server to JUST the field being edited?

Thanks, _K

ksoldink

So after some trial and error, I've come up with a decent method of doing this!

First of all, my DataTable is being populated from the DOM. Each cell has an HTML5 data attribute:

<td id="ID586-email" name="ID586-email" data-dtype="email">email@email.com</td>

So that has an attribute data-dtype with the value email. A different cell will have a different value, say name or phone, etc.

Here's my jQuery that handles a cell click on my table:

$('#table').on( 'click', 'tbody td', function (e) {
    var dtype = this.getAttribute('data-dtype');
    editor
        .title( 'Edit')
        .buttons ({
            label: "Update",
            fn: function() {
                this.submit(null, null, function(data) {
                    data.dtype = dtype;
                    data.etype = 'bubble';
                })
            }
        })
        .bubble(this, {
            buttons: true
        });
});

Line 2 I'm simply grabbing my data-dtype value from the clicked cell.

Line 5 I'm using https://editor.datatables.net/reference/type/form-options#buttons to define a button.

Line 8 tells it to run a custom function on submit. This is the good stuff :)

Line 9: Reading http://editor.datatables.net/reference/api/submit() (the "Add an extra field to the data" section) I can add in my extra collected data-dtype value, stored in dtype, to the data!

Line 10 isn't needed, but I like to know how the edit is coming in: bubble, inline, or full.

Line 14 tells the bubble function that I'm supplying it with buttons instead of just the default, and voila!

So that's getting the extra data into the editor call. Now that it's in there, I only want to send the server the data from the cell that I clicked on, and not the entire row of data.

// get the editor form before it submits to weed out data
editor.on('preSubmit', function (e, o, action) {
    // if it's a bubble edit (a single field)
    if(o.etype == 'bubble') {
        // loop through our data array and remove all properties except dtype
        for(var key in o) {
            var obj = o[key];
            for(var prop in obj) {
                if(prop != o.dtype) {
                    // remove the unwanted data property
                    delete o[key][prop];
                }
            }
        }
    }
});

I wont bother to explain that line by line, but before submitting the data (which contains the full row's data) to the server, I'm looping through that data object, and remove every unwanted property - anything that doesn't match my passed in dtype. This allows me to submit JUST the column's data :)

Hopefully this helps you develop something built-in to Editor, Allan, and helps anyone else experiencing this.

Cheers!, _K

allan

Nice solution - thanks for sharing this with us!

Looking forward to implementing this in Editor core myself :-)

Allan