custom button not ALWAYS working

montoyam · December 2021

http://live.datatables.net/keziroho/2/edit

In the above linked test case, I am doing some manipulating of the Editor button when ActionID = 2.

If you are creating a new record where the ActionID = 2 (Delete), you see the button will then say 'Submit Request' and will send data to the controller
If you select and existing record where the ActionID=2, it should do the same.

However, when the page FIRST loads, if you select and existing record, without having added a new record, the button text does not change. It only changes the button if you first add a record and change ActionID =2

Summary of how to re-create issue:
Step 1 (when page first loads). Select a record where ActionID=2 and click the 'View' button.
Note that button says default 'next'
Step 2 Close the editor
Step 3 Click 'Submit New Request' button
Step 4 Change ActionID = 2 and hit tab
Note that button says 'Submit Request'
Step 4. Return to step 1 and note that the button now correctly shows 'Submit Request'

kthorngren · December 2021

Use the buttons() API. See these form-options examples. Something like this:

http://live.datatables.net/keziroho/3/edit

Kevin

montoyam · December 2021

a problem I am seeing when switching to that API is that the following code is not being executed. It seems to be wanting to use the default action of the editor button

                , formButtons: [
                    {
                        text: '',
                        action: function () {
                            isNewRequest = 1;
                            switch (RequestHeaderEditor.get('RequestHeader.ActionID')) {
                                
                                case '2': //delete
                                    console.log('saving')
                                    var result = addHeader();
                                    if (result.substring(0, 1) !== "*") {
                                        RequestHeaderEditor.close();
                                        RequestHeaderTable.ajax.reload();
                                    }
                                    break;
                                case '1': //add
                                    loadDetail(0, 0);
                                    break;
                                case '3': //update
                                    loadDetail(0, RequestHeaderEditor.get('RequestHeader.UserID'));
                                    break;
                            };
                        }
                    }
                ]

kthorngren · December 2021

Its unclear to me what you are trying to do but I assume by the above code snippet you are asking about the Create new request button. When clicking the button the

  RequestHeaderEditor.field('ActionID').input().on('change', function (e, d) {
        if (d === undefined) {
            // The change was triggered by the end user on update rather than an auto set
            loadResponsibilityEditor();
        }
    });

event is executed. When you enter data into the actionID field theloadResponsibilityEditor()function is called from this event handler. Maybe you will want to usee-event preOpento turn on the event listener whendata === "edit"and turn if off whendata === "create"`.

I updated the test case with some console.log statements so you can see the code flow.

Kevin

montoyam · December 2021

the piece of code i posted above is from the dataTables button definition section in the test case I had posted. sorry, there are no line numbers in live.datatables.net

I am not seeing the modified version you made. but I am already using the preOpen unless you are talking about something else.

kthorngren · December 2021

Here is the link:
http://live.datatables.net/keziroho/4/edit

Yes you are using preOpen. My suggestion is to update it to turn on and off the event handler.

Kevin

montoyam · December 2021

besides the console logs, I am not able to see any difference in the code between test case edit #4 and edit #3...

the problem with the code is that it does not trigger the custom action i have for the editor button.

kthorngren · December 2021

I didn't say I fixed the problem The test case is to highlight for you what is happening. The problem is that the RequestHeaderEditor.field('ActionID').input().on('change' event is firing anytime (whether creating or editing) the actionId field.

My suggestion is that you use jQuery off() to turn off the event handler preOpen when creating a new record and turning it on when editing a record. Maybe something like RequestHeaderEditor.field('ActionID').input().on('change'); to turn it off.

I think you will find that if you remove, as a test, the event handler

RequestHeaderEditor.field('ActionID').input().on('change', function (e, d) {
      if (d === undefined) {
          // The change was triggered by the end user on update rather than an auto set
          loadResponsibilityEditor();
      }
  });

That the create button will function as you want which is why I'm making the above suggestion so you can see if it results in the behavior you want.

Kevin

montoyam · December 2021

no, commenting out that block of code still caused the default editor action to happen. The custom actions for the editor button stopped working when I changed to this

            case '2': //delete
                RequestHeaderEditor.show(['RequestHeader.ActionID', 'RequestHeader.EffectiveDate', 'RequestHeader.Comment', 'RequestHeader.UserID'], false);
                RequestHeaderEditor.buttons('Submit Request');
                //$('.DTE_Form_Buttons button:eq(0)')
                //    .text('Submit Request')
                //    .show();
                break;

montoyam · December 2021

I have gone back and forth with different versions of my code and I am not able to get it back to the original issue I was having. Let me re-post some code when I am able to figure out what is going on.

kthorngren · December 2021

I guess I'm confused. I comment out that code and it looks like the Create button's default action is executed:
http://live.datatables.net/keziroho/6/edit

There is an error but that is because your addHeader function is returning a number not a string.

Maybe the create button isn't the issue you are trying to resolve. Please provide more details of what you are trying to do along with the new test case.

Kevin

montoyam · December 2021

ok, I cleaned up the code as much as I could.
http://live.datatables.net/keziroho/5/edit

when defining RequetHeaderTable dataTable, I am defining custom actions for the Editor form. Perhaps there is another way to do it, but that is the only way I know of

Depending on the value of ActionID, I need to do different things when the editor button is pressed. I am also changing the text to sometimes say 'Next' and sometimes say 'Submit Request'

In the 'loadResponsiblityEditor' function, when I have the code

            $('.DTE_Form_Buttons button:eq(0)')
                    .text('Submit Request')
                    .show();

the editor button, when clicked will run the custom actions. However, I have the issue where it won't work when you first update an existing record, it only works when you first add a record, then you can update an existing record after that

When I change to the code you suggested:

RequestHeaderEditor .buttons( 'Submit Request' )

the button text changes correctly, even if you first try to update an existing without having to add a new record. However, the custom editor button code (which in this test case i changed to alert boxes) do not run. it wants to runt he default editor edit and create functionality, which I can not do in this project. I must run the custom actions.

I hope this helps.

allan · December 2021

Hi,

When using buttons() with a single string, it is the same as if you used:

.buttons([{
  text: "Submit Request",
  action: function () {
    this.submit();
  }
}]);

It is just a short hand for a submit button with custom text. If you want a custom submit function you must provide an object for the button with the text and action properties.

I wonder if in this case you might be best to use dependent() to watch for an ActionID being set (make it a select) and then use buttons() to set the required button handler based on the value selected.

Allan

montoyam · December 2021

ah, yes. I tried putting the action in the first spot where I defined the editor.buttons(), but I didn't think about also needing to add it when I change the text later with the .buttons()

let me play some more with that

montoyam · December 2021

so that seemed to work, re-defining the action when I changed the text of the button.

http://live.datatables.net/keziroho/5/edit

But there is no way just to change the button text without having to redefine the action?

montoyam · December 2021

oh, i am just looking at my code again and I see I didn't need to define the action the first time in my code. I just need to define the action once in the loadResponsibilityEditor function but I need to move the nested swich statement out. a bit of code reworking, but it seems to make sense now

custom button not ALWAYS working

custom button not ALWAYS working

Answers

Howdy, Stranger!

Categories

DataTables

custom button not ALWAYS working

custom button not ALWAYS working

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables