click event problem
click event problem
Andreas S.
Posts: 207Questions: 73Answers: 4
in Editor
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
This question has accepted answers - jump to:
This discussion has been closed.
Answers
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
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
You are using:
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 show0.Use a delegate:
Allan
With that change the click event work, but it would not open the new form:
This code i have written:
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 connectedI'm a little bit confused now. No idea why this not work
Andreas
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 acloseevent handler. Or simply asetTimeoutslightly greater than the animation duration.Allan