Clicking on a cell to edit fires every change event without changing any value

ricks

I am using the editor plugin.

When i click a cell to edit

It fires the .input().on( 'change', function () { for every single field that i have

This is how i have my table set up.

editor = new $.fn.dataTable.Editor( {
          data: data,
          table: "#adSets",
          fields: [ {
                  name: "interest_id"
              },{
                  name: "interest_fb_id"
              },{
                  name: "adset_name"
              }, {
                  name: "budget"
              }, {
                  name: "duration",
                  type:  "select",
                  options: [
                    { label: 'Daily', value: 'Daily' },
                    { label: 'Lifetime', value: 'Lifetime' }
                  ]    
              }, {
                  type: "datetime",
                  name: "from_date",
                  readonly: true,
                  format: 'MM-DD-YYYY hh:mm A'
              }, {
                  type: "datetime",
                  name: "to_date",
                  readonly: true,
                  format: 'MM-DD-YYYY hh:mm A'
              }
          ]
      } );

      editor.field('from_date').disable();
      editor.field('to_date').disable();

      // Activate an inline edit on click of a table cell
      $('#adSets').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        });

      });

Have i set something up wrong, or is this the intended functionality?

It also causes my date picker to automatically submit the date that it opens up on.

ricks

Seems like every time i click a cell to edit it submits it instantly. I tried removing the onBlur: 'submit' but it still submits every time i click a cell.

ricks

need to delete this comment

colin

Hi @ricks ,

That is odd - if you look at the example here, and check the network in the browser's developers tools you can see that's it's not being submitted until the user leaves that cell.

When you say the cell submits instantly, does it also lose the edit mode? Or does it submit and also stay editing? It would be worth checking if you have other event handlers that are affecting it any way.

We're happy to take a look if you can link to the page or create a test case.

Cheers,

Colin

ricks

Hey @colin,

Thanks for the reply.

When i click on a cell It triggers all my change events that i am handling like so:

      editor.field('from_date').input().on( 'change', function (e,d) {
         // code to execute
      });

The cell does lose the edit mode since i am calling .rows().invalidate().draw();

      editor.field('duration').input().on( 'change', function () {

        duration = this.value;

        if (duration == "Daily") {

          editor.field('from_date').set("Immediately").disable();
          editor.field('to_date').set("Run Indefinitely").disable();
        } else {

          start = moment().set({h: 8, m: 0});
          end = moment().add(7, 'days').set({h: 8, m: 0});

          editor.field('from_date').val(start.format('MM-DD-YYYY hh:mm A')).enable();
          editor.field('to_date').val(end.format('MM-DD-YYYY hh:mm A')).enable();
        }

        adSetsTable.rows().invalidate().draw();
      });

I don't need it to actually submit any requests when editing the values, the table is part of a form.

I will be getting all the data from the table once the entire form is submitted, could this have something to do with my issue? Am i creating the table wrong for my intended use?

Here is a video depicting my issue https://streamable.com/s9fzm

ricks

It looks like this is a similar question to this ->

https://datatables.net/forums/discussion/46864/update-field-value-based-on-another-field-changed-inline

The only difference is that i can just use a keydown event because i also have a dropdown and datetime fields.

Any suggestions?

ricks

Just solved it.

Changed the event i'm listening to the blur event since my issue was an intended functionality.

changed:

editor.field('to_date').input().on( 'change', function (e,d) {

to:

editor.field('to_date').input().on( 'blur', function (e,d) {