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

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

ricksricks Posts: 6Questions: 1Answers: 0

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.

Answers

  • ricksricks Posts: 6Questions: 1Answers: 0

    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.

  • ricksricks Posts: 6Questions: 1Answers: 0
    edited September 2018

    need to delete this comment

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • ricksricks Posts: 6Questions: 1Answers: 0

    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

  • ricksricks Posts: 6Questions: 1Answers: 0

    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?

  • ricksricks Posts: 6Questions: 1Answers: 0

    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) {
    
This discussion has been closed.