Search code examples
javascriptjquerycallbackinlinemention

At.js Mentions Callbacks and Duplicates


Anyone experience with At.js that can help out? I'm trying to:

  1. Get the inserted mentions in an array so that they can then be processed with PHP
  2. Prevent duplicate entries (not sure where to start with this one)

Little experience with Javascript and jQuery so any help appreciated. FYI I'm using At.js with the amazing Froala WYSIWYG Editor

Here is what I have to get the tags but I'm not sure how to get it into an array.

$(function(data){   
   $('#postTagsInput').atwho({
       at: '@', 
       data: 'URL'
});

$('#postTagsInput').on("inserted.atwho", function($li, query) {
   console.log(query);

   var postTags = query;
   $('#myResults').html(postTags);      
  });      
});

Solution

  • I solved this problem by using a custom "insertTpl" for the inserted mentioned names:

    var at_config = {
        at: '@',
        data: mentionablesList,
        displayTpl: '<li><span>${name}</span></li>',
        insertTpl: '<a href="${url}" data-type="mentionable" data-id="${id}" data-name="${name}">${name}</a>'
    };
    
    $(that.document.getBody().$)
        .atwho('setIframe', that.window.getFrame().$)
        .atwho(at_config);
    

    and then use jQuery to parse the input value and extract all mentioned names:

    var commentHtml = CKEDITOR.instances['new-comment'].getData();
    var comment = $('<div/>').html(commentHtml).contents();
    
    comment.find('a[data-type="Employee"]').each(function(index, element) {
    
        // do whatever you need with $(element) object
    
    });
    

    Note: I used CKEditor in my case -- a comment box that allows users to mention other users' names while they are writing a comment. Once the comment is posted, all mentioned names will be added to a list of followers of the post that the comment belongs to.