Two listeners with At.js

Question

Anyone here with a bit of experience with At.js ?

I have the weirdest bug right now. I've checked and re-checked everything 100 times.

I assign 2 listeners to a form. 1 fetches users with the " @ " symbol, the other fetches events with the " event: " text.

The "tagUsersConfig" options work great, but the "tagEventsConfig" behaves weirdly. It fetches the first 5 events, then as soon as I start typing the first letter, the list dissapears, even if I know for a fact (in the console) that for each character I type, it's sending me back the correct JSON objects from the API (all of which are accurate depending on the typed letter).

If I paste the users' API query in the tagEventsConfig (events) one, the "event:" now works. The weirdest part is (and you're going to have to take my word for it), the events API call and its variables are all perfectly correct and valid.

Theory : I'm thinking it all has to do with the matcher callback, but I don't see why, since the users' names and event names have the same expected structures (spaces, and sometimes special characters).

var userList;
var eventList;

var tagUsersConfig = {
  at: "@",
  displayTpl: "<li class='replyToAtWho-list-item clearfix'><div class='feed-replyTo-img' style='${imageId}'></div><div class='left'><div class='feed-replyTo-name'>${name}</div><div class='feed-replyTo-realName'>${realName}</div></div></li>",
  insertTpl: '<span class="feed-reply-to-name-link" data-userNameReplyTo="${name}" data-userIdReplyTo="${userId}">${name}</span>&nbsp;',
  callbacks: {
    remoteFilter: function(query, render_users) {

      $.getJSON(DOMAIN + '/Skeddy/rest/gem/v1/user?institutionid='+CAMPUS_ID+'&apitoken='+USER_TOKEN+'&limit=10&fullname=' + encodeURIComponent(query), function(data) {

        userList = $.map(data.listT, function(value, i) {
          var imageId = (parse_OBJ(value.i, "ImageId")) ? DOMAIN + '/Skeddy/rest/gem/v1/image/' + parse_OBJ(value.i, "ImageId") + '?sname=CampusSchema&apitoken=' + USER_TOKEN : '/' + ROOT + '/img/avatar-default.png';
          return {
            'userId': value.id,
            'realName': value.name,
            'name': parse_OBJ(value.i, "firstName") + " " + parse_OBJ(value.i, "lastName"),
            'imageId' : 'background-image : url("' + imageId + '")'
          };
        });

        render_users(userList);

      });
    },
    matcher: function(flag, subtext, should_start_with_space) {
      var match, regexp;
      flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
      if (should_start_with_space) {
        flag = '(?:^|\\s)' + flag;
      }
      regexp = new RegExp(flag + '([A-Za-z0-9_\\s\+\-\]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi');
      match = regexp.exec(subtext.replace(/\s/g, " "));
      if (match) {
        return match[2] || match[1];
      } else {
        return null;
      }
    }
  },
  delay: 20
};

var tagEventsConfig = {
  at: "event:",
  displayTpl: "<li class='itemAtWho-list-item clearfix'><div class='feed-item-img' style='${imageId}'></div><div class='left'><div class='feed-item-name'>${eventName}</div><div class='feed-replyTo-realName'>10-10</div></div></li>",
  insertTpl: '<a href="' + DOMAIN + '/website/event-details/' + CAMPUS_ID + '/${eventId}" class="fp-ext-link" target="_blank">${eventName}</span>&nbsp;',
  callbacks: {
    remoteFilter: function(query, render_events) {

      $.getJSON(DOMAIN + '/Skeddy/rest/gem/v1/event?institutionid='+CAMPUS_ID+'&apitoken='+USER_TOKEN+'&limit=10&state=published_expired&name=' + encodeURIComponent(query), function(data) {

        eventList = $.map(data.listT, function(value, i) {
          var imageId = (value.imageId) ? DOMAIN + '/Skeddy/rest/gem/v1/image/' + value.imageId + '?sname=CampusSchema&apitoken=' + USER_TOKEN : '/' + ROOT + '/img/avatar-default.png';
          return {
            'eventId': value.eventId,
            'eventName': value.name,
            'imageId' : 'background-image : url("' + imageId + '")'
          };
        });

        render_events(eventList);

      });
    },
    matcher: function(flag, subtext, should_start_with_space) {
      var match, regexp;
      flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
      if (should_start_with_space) {
        flag = '(?:^|\\s)' + flag;
      }
      regexp = new RegExp(flag + '([A-Za-z0-9_\\s\+\-\]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi');
      match = regexp.exec(subtext.replace(/\s/g, " "));
      if (match) {
        return match[2] || match[1];
      } else {
        return null;
      }
    }
  },
  delay: 20
};

$POST_FORM_MASTER.find(".feed-form.mention").atwho(tagEventsConfig).atwho(tagUsersConfig);

Thank you very much for your time.

Answer 1

Oh. Wow. I figured it out.

Before:

    eventList = $.map(data.listT, function(value, i) {
      var imageId = ...
      return {
        'eventId': value.eventId,
        'eventName': value.name, // ********** Here was my mistake **********
        'imageId' : 'background-image : url("' + imageId + '")'
      };
    });

After :

    eventList = $.map(data.listT, function(value, i) {
      var imageId = ...
      return {
        'eventId': value.eventId,
        'name': value.name, // ********** Here is the fix **********
        'imageId' : 'background-image : url("' + imageId + '")'
      };
    });

I didn't realize that the variables (ex: '${name}') in the 'displayTpl'/'insertTpl' had to be the actual objects' keys, and not the key names I was giving them in my eventList array ('eventName').

But again, this doesn't make 100% sense, since I'm naming/labeling my own keys in the tagUsersConfig options and inserting those into the 'displayTpl'/'insertTpl' and it's all working fine... So confusing.