Bubble Editor events - submit on radio button click?

weedenb

Trying to simplify form entry a little by auto submitting a simple radio button bubble form once a selection is made. All the documented events (onBlur, OnReturn, onEsc) work fine but require several actions to submit and close the form. Fiddled around with the normal DOM events like mouseup but they won't fire. Editor documentation states "Please note that unlike DataTables, Editor does not emit DOM events" so I'm assuming that's a dead end? Any ideas or am I missing something?

Thanks!

        $("#inspections2").on("click", "tbody td", function (e) {
            //console.log( table.row( this ));
            editor2.bubble(this,["inspect"], {
                buttons: false,
                onBlur: "submit",
                title: table2.cell( this ).data()
            });
        });

        $(".DTE_Field_Name_inspect").mouseup(function(){
            alert("Button Up");
        });

allan

Please note that unlike DataTables, Editor does not emit DOM events

That's specifically for this list of events. All the standard DOM events will still happen.

What I suspect the issue with the above is that the $(".DTE_Field_Name_inspect") selector is running before the element has been added to the document, so it can't find anything. Using console.log( $(".DTE_Field_Name_inspect").length ); will confirm if that is the case - I expect it to be 0 if you run it in line 9 in the above code.

What I would suggest is that you add your event listener using field().input(). That will give the input element(s) in question for that field, regardless of if it has been added to the document or not, and you can add the listener to that.

Allan

weedenb

Thanks Allen!

That gets me most of the way there. When I start with a null value record and select a radio box the bubble form updates, submits and closes just as desired. When I do the same on a record with a pre-existing value the change event fires immediately on opening the form (and submits and closes before I can edit). Looks like I need to narrow down my event handler a bit. I'm speculating this is due to the way a form initializes on opening??

        $("#inspections2").on("click", "tbody td", function (e) {
            //console.log( table.row( this ));
            editor2.bubble(this,["inspect"], {
                buttons: false,
                onBlur: "submit",
                title: table2.cell( this ).data()
            });
        });

        editor2.field( "inspect" ).input().on( "change", function () {
            console.log("change fired");
            editor2.submit();
        } );

allan

What is happening is that Editor needs to set the form's value when editing data - hence it triggers a change event, which is then triggering your submit.

To know if Editor is triggering the change, or the user is, there is a second parameter passed into the change event handler which you can check:

editor2.field( "inspect" ).input().on( "change", function (e, d) {
    if ( d && d.editor ) {
      console.log("user change fired");
      editor2.submit();
    }
} );

Allan

weedenb

Work great Allan!
Changed the conditional to ( !d ) as I am seeing d returning { editorSet: true} when editor sets an existing value and undefined when the user sets it.

Thank You very much!

        editor2.field( "inspect" ).input().on( "change", function (e, d) {
            console.log("on change fired");
            if (!d) {
                console.log("user change fired");
                editor2.submit();
            }
        } );