Using Alert in preClose event

Using Alert in preClose event

LapointeLapointe Posts: 430Questions: 81Answers: 4

Hi Team
To replace std modal confirm when exiting editor with data changed, I use Alert.fnCustom with 3 opts... Save, Cancel or Return (to editor)
as you can see I use a bDone flag with timeout at opt 'Retour', else alert box will be shown again and again due to preClose react.

            editor.on( 'preClose', function ( e ) { 
            if ((openVals !== JSON.stringify( editor.get() ) ) ) {
                if (!bDone) { 
                    bDone = true; 
                    confirmSaveRecord(editor); 
                };
                return false;    // do not close editor
            }"
                } )

in JS

function confirmSaveRecord( e=editor, msg='Des données ont été modifiées...', pos='abcd', titre='Données modifiées' ){
    var aoButtons = [
    {
        'sLabel': 'Annuler',                // cancel changes
        'sClass': 'selected',
    'fnSelect': function(){
        e.off('preClose');
        e.close();
        bDone = false;              // reset flag else at next preClose event alert will not be shown
    },
        'cPosition': 'c'
    },{
        'sLabel': "Enregistrer",            // savechanges
    'fnSelect': function(){
        e.off('preClose');
        e.submit();
        bDone = false;              // reset flag else at next preClose event alert will not be shown       
        },
        'cPosition': 'd'
    },{
        'sLabel': "Retour",             // return to editor
        'fnSelect': function(){
        GoToFirstField(e);          // set focus to first editor field
        setTimeout(function(){
            bDone = false;          // reset flag delayed else alert will be shown  
        }, 500);
    },
        'cPosition': 'b'
    }];
    Alert.fnCustom( {
        'sTitle': titre,
        'sMessage': msg,
        'sDisplay': pos,
        'bAnimate': false,
        'fBackgroundOpacity': 0,
        'aoButtons': aoButtons
    } );
};

function GoToFirstField(e=editor){
    var fields = e.order();
    for (var i=0, ien=fields.length ; i<ien ; i++) {
        if (e.field(fields[++i]).displayed()){
            e.field(fields[i]).focus();     // set focus to editor field
            break;
        }
    }
}

For inline edit, everything run (hope better way exist for code - if somebody know B) ).

When in plain Editor, preClose Alert is shown.... **under editor window..**.
Is there a way to solve this ?

Thank for help and happy 'return to work period'
:)

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Wow - I'd forgotten about my "Alert" software. That's a blast from the past :). Apparently I didn't put a date on the post for it, but it must have been around 2008!

    It sounds like you've run into a z-index issue. Alert uses a z-index of 2 for the #alert_wrapper element, while Editor's default lightbox has a z-index of 11.

    So:

    #alert_wrapper {
      z-index: 12;
    }
    

    should fix the issue you are seeing.

    Allan

Sign In or Register to comment.