custom button not ALWAYS working

custom button not ALWAYS working

montoyammontoyam Posts: 568Questions: 136Answers: 5
edited December 2021 in Buttons

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'

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

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

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

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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;
                                };
                            }
                        }
                    ]
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5
    edited 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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited December 2021

    I didn't say I fixed the problem :smile: 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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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;
    
  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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?

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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

Sign In or Register to comment.