Clinton Green Clinton Green - 28 days ago 10
jQuery Question

Redactor - do something on change event not working

I am trying to check whether or not to validate a submit button on a change event. I have tried a normal jquery change function as below, and also the Redactor callback method, also below but nothing is working. None of my console.logs are firing.

The redactor is working 100% with no error but I added the compiled HTML too just in case.

JS Method

$('#compose-message .redactor-editor').on('change', function(){
var messageLength = $('#compose-message .redactor-editor').text().length;
var formtagLength = $('.compose-wrap .available-friends-wrap').find('.fa-check').length;

console.log('messageLength = ' + messageLength);
console.log('formtagLength = ' + formtagLength);

if ( messageLength > 1 && formtagLength > 0) {
// enable button
$('#compose-message .action-btn').removeClass('disabled').attr('disabled', false);
} else{
// disable button
$('#compose-message .action-btn').addClass('disabled').attr('disabled', true);
}
});


Redactor Method

$('#message-body-field').redactor({
callbacks: {
change: function()
{
var messageLength = $('#compose-message .redactor-editor').text().length;
var formtagLength = $('.compose-wrap .available-friends-wrap').find('.fa-check').length;

console.log('messageLength = ' + messageLength);
console.log('formtagLength = ' + formtagLength);

if ( messageLength > 1 && formtagLength > 0) {
// enable button
$('#compose-message .action-btn').removeClass('disabled').attr('disabled', false);
} else{
// disable button
$('#compose-message .action-btn').addClass('disabled').attr('disabled', true);
}
}
}
});


HTML - with redactor already initialise eg copied from the browser source code

<form id="compose-message">
<div class="form-group choose-recipients">
<label for="message-recipient-field pull-left">Send to:</label>
<div class="available-friends-wrap overflow-x">
<span class="form-tag">Csanad Novak <i class="fa fa-plus"></i></span> <span class="form-tag">Tony Stark <i class="fa fa-plus"></i></span> <span class="form-tag">Yan Lin <i class="fa fa-plus"></i></span> <span class="form-tag">Sean Xu <i class="fa fa-plus"></i></span> <span class="form-tag">AJ Hunt <i class="fa fa-plus"></i></span> <span class="form-tag">Alley Express <i class="fa fa-plus"></i></span>
</div>
</div>
<div class="form-group">
<label for="message-body-field">Add your message</label>
<div class="redactor-box" role="application"><ul class="redactor-toolbar" id="redactor-toolbar-0" role="toolbar" style="position: relative; width: auto; top: 0px; left: 0px; visibility: visible;"><li><a href="#" class="re-icon re-html" rel="html" role="button" aria-label="HTML" tabindex="-1"></a></li><li><a href="#" class="re-icon re-formatting redactor-toolbar-link-dropdown" rel="formatting" role="button" aria-label="Formatting" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-bold" rel="bold" role="button" aria-label="Bold" tabindex="-1"></a></li><li><a href="#" class="re-icon re-italic" rel="italic" role="button" aria-label="Italic" tabindex="-1"></a></li><li><a href="#" class="re-icon re-deleted" rel="deleted" role="button" aria-label="Deleted" tabindex="-1"></a></li><li><a href="#" class="re-icon re-unorderedlist" rel="unorderedlist" role="button" aria-label="&amp;bull; Unordered List" tabindex="-1"></a></li><li><a href="#" class="re-icon re-orderedlist" rel="orderedlist" role="button" aria-label="1. Ordered List" tabindex="-1"></a></li><li><a href="#" class="re-icon re-outdent" rel="outdent" role="button" aria-label="< Outdent" tabindex="-1"></a></li><li><a href="#" class="re-icon re-indent" rel="indent" role="button" aria-label="> Indent" tabindex="-1"></a></li><li><a href="#" class="re-icon re-link redactor-toolbar-link-dropdown" rel="link" role="button" aria-label="Link" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-alignment redactor-toolbar-link-dropdown" rel="alignment" role="button" aria-label="Alignment" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-horizontalrule" rel="horizontalrule" role="button" aria-label="Insert Horizontal Rule" tabindex="-1"></a></li></ul><div class="redactor-editor" contenteditable="true" dir="ltr"><p>&#8203;</p></div><textarea class="form-control" id="message-body-field" rows="3" required="" dir="ltr" style="display: none;"></textarea></div>
<div class="help-block with-errors"></div>
</div>
<div class="text-right">
<button type="submit" class="btn action-btn disabled" disabled="">Submit</button>
</div>
</form>

Answer

One way to solve this is to change the "change" event to a "keyup" event. Although it still doesn't explain why the Redactor change event is not working. If anyone has any ideas please let me know.

Comments