Disable() button in the button action himself not work

Disable() button in the button action himself not work

LapointeLapointe Posts: 430Questions: 81Answers: 4

Hi @all
I use button to perform action... what a nice way to do it.
But after this action is performed, depending the action result I want to set button enable state.
For example, I enable a button on condition empty field, and open a editor instance where user can fill this field or not.
If field is filled, I want (like) to disable button, else do nothing.
If I set button disable on postSubmit (for example), after the form close action is performed, the button come back to enable status.
If I set button disable on close event, button stay diasabled, but close event does not allow me to know if action was performed successfully or not.

Is there a way to set button state in the button action itself ?

    ,{
        extend: 'selected',
        text:   '->URSSAF',
        action: function() {
            editor
                .one('open', function () {
                    editor.hide()
                    editor.show('recettes.MoisUrssaf')
                })
                .one('opened', function ( e, data, action ) {
                    openVals=null
                })
                .one('close', function ( e, data, action ) {
** HERE I DISABLE BUTTON BUT NOT THE GOOD PLACE BECAUSE 
IF EDITOR CANCEL BUTTON IS CLICKED I DO NOT WANT TO CHANGE BUTTON STATE **
                    table.buttons( 1, " . $btnUrssafPos . " ).disable()
                })
                .edit(table.rows( { selected: true } ).indexes(), {
                    title: 'Déclaration URSSAF',
                    buttons: [{
                        label: 'Enregistrer',
                        className: 'btn-primary',
                        fn: function () {
                            this.submit()
** HERE I'D LIKE TO DISABLE BUTTON **
                        }
                    },
                    {
                        label: 'Annuler',
                        className: 'btn-primary',
                        fn: function () {
                            editor.off('preClose');
                            this.close()
                        }
                    }]
                })
                .set( 'recettes.MoisUrssaf', '" . GetCurUrssafPer() . "' );
        }
    }

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    I'm not quite following, but couldn't you check to see if the field is empty when you're deciding whether to enable/disable the button - that way whether it's a cancel or close wouldn't matter.

    Colin

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @colin
    The field is not empty when submitting.
    I want to disable button that start opening this form on submit, not on close if form was cancelled
    Bob
    PS Beer make me eruptive....

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin
    Answer ✓

    extend: 'selected',

    You are basing your button on the selected type, which will set its enabled state based on rows being enabled in the DataTable. Here is the code for how that works.

    If you want to control the enable / disable state of the button yourself, then don't extend off the selected button. That will give you full control.

    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan

    Thanks
    So if I unselect rows before disabling button it should work...

    A more complex question...
    I use depend event and now when trying to submit a form initSubmit event occurs after what nothing more...
    I don't know how to trace where code ptr is gone....

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin
    Answer ✓

    Can you give me a link to your page? Or show me the code you are using? My guess is that you aren't returning anything from dependent() (or calling the callback function, either would work) which results in the field thinking it is still "processing" and the from submission to cancel.

    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan
    Sorry for time consumption.
    At first I was using an ajax call, with onsuccess callback and do not return explicitly something (I added later)

            .dependent( 'recettes_lignes.ID_Prestation', function ( val ) {
                if (SecEditor.mode()=='create'){
                    $.ajax ({
                        url: 'getdata.php',
                        method: 'POST',
                        data: {
                            U:val,
                            W:'Montant',    // dans la table prestations
                            DefVal:0,
                            Opt:'prestations'
                        },
                        success: function ( retVal ) {
                            retVal = parseFloat(retVal).toFixed(2);
                            if (! (isNaN(retVal) || (retVal==0.00))) SecEditor.field('recettes_lignes.PU_HT').set( retVal );
                        }
                    });
                };
    /// added to allow form submit
                return true;
            })
    
    

    If no return value is set, we can close the form (with preclose, close and other events fired), but cannot reopen editor again.

    Thanks
    Best regards
    Bob

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin
    Answer ✓

    Hi Bob,

    Ideally what you would do is make use of the callback function here

    .dependent( 'recettes_lignes.ID_Prestation', function ( val, data, cb ) {
      if (SecEditor.mode()=='create'){
        // Ajax stuff
        // onSuccess:
        cb({
          values: {
            'recettes_lignes.PU_HT': retVal
          }
        });
      }
      else {
        cb({});
      }
    });
    

    That will ensure that the form doesn't get stuck in a processing mode, and will also visually show to your user that something is happening when the Ajax calculation is happening.

    Regards,
    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4
    edited January 2021

    hi @allan
    It was a small extract from more complex code, with lot of action (ajax call or other) in the same depend field...
    I understant each depend block have to return something.... It was not completed for me and now corrected, using return at last instruction on depend group.

    Please just tell me if using direct "return true" is compliant or a function is needed as shown in your previous answer

    Best regards
    Bob

  • allanallan Posts: 63,692Questions: 1Answers: 10,500 Site admin
    Answer ✓

    It looks like it probably is enough - but returning {} would be preferable.

    I think I'll need to be able to see a page demonstrating the issue to be able to understand what is going wrong and debug it.

    Regards,
    Allan

  • LapointeLapointe Posts: 430Questions: 81Answers: 4

    Hi @allan

    Thanks

    Actuallly the only thing that goes wrong is my head...

    Setting depend on ajax success launched in a depend, and so on make complex logic...

    Working on

    Thanks

This discussion has been closed.