submit only one cell on inline not the entire row

seth9009 · March 2018

So i'm trying to implement this example to allow inline checkboxes https://editor.datatables.net/examples/api/checkbox.html but on checkbox click it sends the entire row, while i want to send only the checkbox name and value, and i can't seem to make it work, this is my code

dtable.on('change', 'input.inline-checkbox', function(e, datatable, cell) {

var cell = $(this).closest('td');
var cellNode = dtable.cell(cell).node();

editor
.edit(cellNode, false)
.set($(this).attr('name'), $(this).prop('checked')?1:0)
.submit();

});

allan · March 2018

Use the submit option for the formOptions object to control what is sent. changed is probably what you want in this case:

``js
.edit(cellNode, false, {
submit: 'changed'
} )
```

Allan

seth9009 · March 2018

Thank you Allan, so this kind of worked, in the sense that it's not sending the entire row anymore, but it's sending the wrong info, it's sending two different columns and not the checkbox i'm clicking on, this is the updated code

    dtable.on('change', 'input.inline-checkbox', function() {

      var cell = $(this).closest('td');
      var cellNode = dtable.cell(cell).node();

      editor
      .edit(cellNode, false, {submit:'changed'})
      .set($(this).attr('name'), $(this).prop('checked')?1:0)
      .submit();

    });

and the post values are these

data[4081][list]:
data[4081][actionLinks]: view|edit|delete

but it should be just

data[4081][active]: 1 (or 0)

because the checkbox i'm clicking on is "activate" the ones that get posted are not even checkbox type, any idea ?

allan · March 2018

What version of Editor are you using? Can you give me a link to the page so I can check it out?

Allan

seth9009 · March 2018

I just upgrade to the latest one, but this update i'm trying to do (inline checkbox update) i did not have before i'm trying to add now.

unfortunately i don't have the project anywhere online ..

i'll try to setup a http://live.datatables.net/ example ... but not sure if is possible because of the ajax call, but maybe i can just add the code so u can see what i have ..

seth9009 · March 2018

ok please have a look at all my JS here http://live.datatables.net/yaletexo/1/watch?js

allan · March 2018

There isn't anything immediately obvious there. Are you able to publish it online so I can trace the code through?

Allan

seth9009 · March 2018

i've managed to setup the project on a test server, please have a look here http://nextdigital.biz/dtest/letsgo/admin.php?menu=demo

UN: allan
PW: allan1

allan · March 2018

Thanks.

At least part of the problem is coming from the rowCallback:

$('input.inline-checkbox', row).prop('checked', data.activate == 1);
$('input.inline-checkbox', row).prop('checked', data.is_admin == 1);

Split on to two lines like that, you can probably see the issue as well - it is selecting all input.inline-checkbox elements in the row twice. So they end up with the value from is_admin only!

The list parameter is being submitted because its data in the table is ", 336, 335, " (for example), but that doesn't match anything in the list of options due to the spaces (the leading and trailing commas should also be removed).

It looks like actionLinks is being submitted because it is being URL encoded which makes its values different.

Allan

seth9009 · March 2018

Thank you Allan! is there a way to explicitly tell what field to update in my code that handles the checkbox click

    dtable.on('change', 'input.inline-checkbox', function() {

      var cell = $(this).closest('td');
      var cellNode = dtable.cell(cell).node();

      editor
      .edit(cellNode, false, {submit:'changed'})
      .set($(this).attr('name'), $(this).prop('checked')?1:0)
      .submit();

    });

because the code above will only handle the checkbox click, it doesn't matter if other fields are changed (highly unlikely) so being able to actually define what field to update with the value from .set() would actually solve my problem, i think ..

seth9009 · March 2018

oh for example if i inline edit a textfield it will send only that, so no list or actionLinks, if i would replicate that behavior would be great ... so only the checkbox name and value

allan · March 2018

Typically I just use a different class name for each of the live checkboxes.

If you use Editor 1.7.3 (just released) you could also use the new scope option of the form-options object. There is an example showing how it can be used here.

Allan

seth9009 · March 2018

Hey Allan, unfortunately the scope thing did not work ... so what i've done is updated the datatables.editor.js file and added a new option to form-options {submit:'programmaticallySet'} so it will submit only the fields + values that are set using the .set() function and works great, if u think is useful or it's on your roadmap with updates/improvements I can share the code with you.

one last thing I'm having trouble with is, after the update to 1.7.3 if i inline edit a text field for example and press enter it will submit and reload the page, while this did not happen before the update to 1.7.3

allan · March 2018

I'd be interested to see the changes you've made. Thanks!

Regarding the reload issue, that isn't happening in the examples. I'm travelling at the moment, but I'll take a look at your link above when I get back.

Regards,
Allan

seth9009 · March 2018

yes on your example it does not happen but that's because it's not wrapped into a <form> tag, on the CMS i've implemented this it is wrapped into a form and on enter key press it will submit, but this did not happen before the 1.7.3 update, so that's why i was wondering what happened

for the moment i'm catching the input with jquery and prevented the submit but it feels hacky i was hoping there is a new option to be added to editor options or something ..

seth9009 · March 2018

p.s. i've send the file on pm

allan · March 2018

Ah! That form issue is being caused by this change for 1.7.1:

Changing Editor's key event listener (for return, esc, etc) to be keyup rather than keydown. The end user should notice basically no difference, but it allows external event handlers such as keypress and dependent() to listen for events before Editor attempts to modify the form (e.g. submit or close)

To fix, in the formOptions object just before the keyup event listener we'll need to add:

    // Prevent submit by a host `<form>`
    $(document).on( 'keydown'+namespace, function ( e ) {
        if ( e.keyCode === 13 && that.s.displayed ) { // return
            e.preventDefault();
        }
    } );

And at the end of the function add that new keydown to the list of events to be removed.

Allan

submit only one cell on inline not the entire row

submit only one cell on inline not the entire row

Answers

Howdy, Stranger!

Categories

DataTables

submit only one cell on inline not the entire row

submit only one cell on inline not the entire row

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables