I have a comment section where I use a combination of knockoutjs and a plugin called jquery.mentionsInput to enable mentions of other people in comments and notify them. When commenting this works perfectly, you can see the list of people, they become notified. But I also have a 'reply' button that shows up if you click on it. The structure is the same for when commenting, same textarea and so on. but here the mentions script is not firing at all.
I tried creating duplicates the same methods in the mentions script, only changing the names of the methods, and pointing them to other classes, ex: the orginal script points to '$('textarea.mention') and the reply textarea to '$('textarea.mention-reply') but no dice..
Ive tried creating a copy of the two plugin scrips and css, replacing every 'mentionsInput' and 'mention' classes in with 'replyInput' and 'reply' classes. No dice..
The reply textarea is hidden in a template that I show if you click on 'reply', Ive tried moving it out of the template, adding it directly in the html structure. No dice..
The thing is if I change the original textarea.mention to textarea.mention-reply and NOT HAVE ANY OTHER classes in the other textarea, it works. So that confirms that the copy of the plugin is working. They just dont seem to be able to work at the same time/the same view?
The originial script :
$(function () {
$('textarea.mention').mentionsInput({
onDataRequest: function (mode, query, callback) {
$.when($.getJSON("/search/PeopleMention", { searchTerm: query }))
.done(function (dataUsers) {
data = $.map(dataUsers.users,
function (item) {
return {
'id': item.id,
'name': '@' + item.firstname + ' ' + item.lastname,
'display': item.firstname + ' ' + item.lastname,
'avatar': item.image,
'type': 'contact',
'link': '/Info/Profilsida/?CurrentUser=' + item.id
};
});
data = _.filter(data, function (item) { return item.display.toLowerCase().indexOf(query.toLowerCase()) > -1 });
callback.call(this, data);
});
}
});
$('.comment-button').click(function () {
$('textarea.mention').mentionsInput('getMentions', function (data) {
var ids = "";
var names = "";
$.each(data,
function (i) {
names += this.name + ';';
ids += this.id + ';';
});
$('.names-container').text(names);
$('.notification-container').text(ids);
});
});
});
The copy looks exactly the same but has:
$('textarea.mention-reply').mentionsReply ....
$('.mentions-reply-button').click ....
Relevant part of knockoutjs script:
function CommentsModel() {
var that = this;
that.replyToId = ko.observable(0);
that.newCommentText = ko.observable();
that.comments = ko.observableArray();
that.updateComments = function (comments) {
that.comments(that.sortComments(comments));
};
that.addComment = function () {
var mentionsArray = matchMentionsWithNamesInPostComment();
var encodedCommentText = '';
if (mentionsArray.length > 0) {
that.newCommentText(addLinksToMentionsInComment(that.newCommentText(), mentionsArray));
encodedCommentText = encodeURIComponent(that.newCommentText());
}
var mentions = $('.notification-container').text();
$.ajax({
url: '/socialfunctions/addcomment/',
type: 'POST',
data: { id: $('#CurrentPageId').val(), comment: encodedCommentText == '' ? that.newCommentText() : encodedCommentText, mentions: mentions ,parentId: that.replyToId() }
})
.done(function (result) {
........
});
};
that.post = function() {
setTimeout(function () {
that.addComment();
}, 500);
};
that.clickedReply = function (comment) {
if (that.replyToId() === 0 || that.replyToId() !== comment.Id) {
that.replyToId(comment.Id);
} else {
that.cancelReply();
}
};
that.cancelReply = function () {
that.replyToId(0);
that.newCommentText('');
};
that.deleteComment = function (comment) {
.....
};
}
The View:
var clientResources = ServiceLocator.Current.GetInstance<IRequiredClientResourceList>();
clientResources.RequireStyle("\\Static\\css\\jquery.mentionsInput.css").AtHeader();
clientResources.RequireStyle("\\Static\\css\\jquery.mentionsReply.css").AtHeader();
clientResources.RequireScript("\\Scripts\\site\\underscore-min.js").AtFooter();
clientResources.RequireScript("\\Scripts\\jQuery\\jquery.elastic.source.js").AtFooter();
clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsInput.js").AtFooter();
clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsInputInit.js").AtFooter();
clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsReply.js").AtFooter();
clientResources.RequireScript("\\Scripts\\jQuery\\jquery.mentionsReplyInit.js").AtFooter();
<div id="comments">
<div class="clearfix">
<div class="form-group">
<h4>Kommentera</h4>
<p class="infotext">Please write a comment</p>
<textarea data-bind="visible: replyToId() == 0, textInput:newCommentText" class="mention form-control fullwidth" maxlength="4000"></textarea>
</div>
<div class="button-div">
<span style="display: none;" class="notification-container"></span>
<span style="display: none;" class="names-container"></span>
<a href="/" data-bind="visible: replyToId() == 0, click:post" class="comment-button button">Send</a>
</div>
</div>
<script type="text/html" id="reply-template">
<div class="clearfix" data-bind="visible:$root.replyToId() == Id">
<div class="form-group">
<h5>Svara <span data-bind="text: UserFullName"></span></h5>
<textarea data-bind="textInput:$root.newCommentText" class="mention-reply form-control fullwidth" maxlength="4000"></textarea>
</div>
<div class="button-div">
<a href="/" data-bind="click:$root.post" class="mentions-reply-button button">Send</a>
<a href="/" data-bind="click:$root.cancelReply" class="button">Cancel</a>
</div>
</div>
</script>
<div data-bind="visible:comments() == undefined || comments().length == 0">
Right now there are no comments. Be the first to comment!
</div>
<div data-bind="foreach:comments">
<div class="comment clearfix" data-bind="css: { reply: ParentId > 0 }">
<div class="info">
<a data-bind="text:UserFullName, attr:{href:UserProfilePageLink}"></a>
<span class="date" data-bind="text: moment(CreateDate).format('YYYY-MM-DD')"></span>
<a class="reply-button pull-right" data-bind="visible: ParentId == 0, click: $parent.clickedReply">Reply</a>
</div>
<div data-bind="html:Comment, attr: { 'id': Id }"></div>
@if (EPiServer.Security.PrincipalInfo.HasAdminAccess)
{
<a href="#" class="button remove pull-right" data-bind="click:$parent.deleteComment">Remove</a>
}
<div class="reply" data-bind="template: { name: 'reply-template', data: $data }"></div>
</div>
</div>
</div>
I expect the mentions plugin to work in both textareas, but it only works in the comment textarea, not the reply textarea. It never triggers. No error nothing. Again, BOTH versions of the script work in the first textarea, and none of them work in the reply textarea.
