click event problem

Andreas S.

I a editor form i have a link (or button), if the link are clicked the editor form should be closed and another editor form should be open. But the browser did not recognizes the click on the Link or Button.

I insert the link with the template in the form like this:

    <div id="tplLogin">
        <div class="row mb-0">
            <div data-editor-template="usrname" class="col-lg-12"></div>
        </div>
        <div class="row mb-0">
            <div data-editor-template="usrpwd" class="col-lg-12"></div>
        </div>
        <div class="row mb-0 pl-30">
            <div id="recap2" class="col-mg-12"></div>
        </div>
        <div class="row mb-0 pl-30">
            <div class="col-mg-12"><button id="usr-forgotpw">' . $authInfo['forgot'] . '</button></div>
        </div>
    </div>

i write this click event, but this would not work

    $( '#usr-forgotpw' ).on( 'click', function() { console.log( ' click' );
        forgot
        .title( '<i class="fad fa-key txt-DarkCyan"></i> <span class="txt-DarkCyan bold">' + frmInfo.f_title + '</span>' )
        .buttons( [
            { label: frmInfo.send, action: function() { 
                this.submit( 
                    function() {
                        //window.location.href = 'index.php';
                    },
                    function( data ) {
                        this.close();
                        _PNotify( 'error', data['error']['errCode'] + ' ' + data['error']['errShort'], data['error']['icon'], data['error']['info'] );
                    }, function( data ) {
                        var cap = $( '#g-recaptcha-response' ).val();
                        if( 'undefined' === typeof cap ) { 
                            this.close();
                        } else {
                            data.response = cap;
                        }
                    }
                );
            }, className: 'btn-DarkCyan' },
            { label: frmInfo.cancel, action: function() { this.close(); } }
        ] )
        .edit();
        $( 'div.modal-dialog' ).removeClass( 'registration-dialog login-dialog' ).addClass( 'forgot-dialog' );
        $( 'div.modal-content' ).removeClass( 'registration-content login-content' ).addClass( 'forgot-content' );
        $( '<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">' +
            '</div><script src="https://www.google.com/recaptcha/api.js"></script>' ).insertAfter( '#recap3' );
    } );

Have anyone a idea, why the click event not work? I tryed to add an third button, but i have the same problem. The editor closed with the close() function but i can not open the new editor form

Andreas

colin

Hi @Andreas S. ,

I tried to reproduce here, and it's working as I'd expect. Would you be able to modify that link to show the problem,

Cheers,

Colin

Andreas S.

If i have a button/link in the Web page, that works. But if the button/Link is in a editor windows (create, edit) that did not work. The editor is a standalone. you can see it on my Testsystem: https://finsw-test.a-timing.wien/ by click sign in

Andreas

allan

You are using:

$( '#usr-forgotpw' )

to select the element. But it won't be in the document until the Editor modal is displayed. If you did console.log( $( '#usr-forgotpw' ).length ) where you are attempting to select the element it would show 0.

Use a delegate:

$('body').on('click', '#usr-forgotpw', function () {
   ...
} );

Allan

Andreas S.

With that change the click event work, but it would not open the new form:

This code i have written:

$( 'body' ).on( 'click', '#usr-forgotpw', function() { console.log( ' there' );
        auth.close();
        newpwd
        .title( '<i class="fad fa-key txt-DarkCyan"></i> <span class="txt-DarkCyan bold">' + frmInfo.f_title + '</span>' )
        .buttons( [
            { label: frmInfo.send, action: function() { 
                this.submit( 
                    function() {
                        //window.location.href = 'index.php';
                    },
                    function( data ) {
                        this.close();
                        _PNotify( 'error', data['error']['errCode'] + ' ' + data['error']['errShort'], data['error']['icon'], data['error']['info'] );
                    }, function( data ) {
                        var cap = $( '#g-recaptcha-response' ).val();
                        if( 'undefined' === typeof cap ) { 
                            this.close();
                        } else {
                            data.response = cap;
                        }
                    }
                );
            }, className: 'btn-DarkCyan' },
            { label: frmInfo.cancel, action: function() { this.close(); } }
        ] )
        .edit();
} );

The auth form are close if i click on the button, but the new form opens shortly and closed immediately. The browser console gives me following information:

Form submission canceled because the form is not connected

I'm a little bit confused now. No idea why this not work

Andreas

allan

I think this is going to be related to the fact that Editor only uses one modal instance to display the forms. Its still animating the hide from the auth.close() when you then trigger a new form.

Try opening the new form (newpwd) in a close event handler. Or simply a setTimeout slightly greater than the animation duration.

Allan