ivirabyan / jquery-mentions

Adds mentioning support to your text fields.
http://ivirabyan.github.io/jquery-mentions/
MIT License
114 stars 49 forks source link

Can't seem to get URL string as source to work #11

Closed deronsizemore closed 9 years ago

deronsizemore commented 9 years ago

I apologize for all the questions I'm asking, but I've worked on this for a few hours now and can't seem to get the URL as the source to work.

I'm initializing the mentions using:

$('.element').mentionsInput({
    source: "http://127.0.0.1:8000/mentions/",
    showAtCaret: true
});

If manually browse to: http://127.0.0.1:8000/mentions/?term=de then I get a response back on the page that looks like this:

{'id': 18, 'name': u'deronsizemore'}

So it seems that I'm returning the data properly to that URL source, but yet the autocomplete drop down never drops down when I start typing "@de" which it should. So I can only assume I'm doing something wrong?

Also, what values should the json response have? In the example above, I'm returning "id" and "name" to the page per this link: http://podio.github.io/jquery-mentions-input/. That said, I know the example you supplied, the data was called "uid" and "value."

What am I missing?

ivirabyan commented 9 years ago

Source data is an array of objects with uid and value properties: [{uid: '123', value: 'Alex'}, ...] So just change id -> uid, name -> value

ivirabyan commented 9 years ago

btw, if you're using Django, you can use django-mentions application, it provides simple integration with this plugin.

deronsizemore commented 9 years ago

Thanks, got the json dump and return autocomplete working now after getting the correct data object names.

Re: django-mentions: I can't believe I've never seen this app before. I took a quick look at it; I'm wonder if there's any advantages to using it over just using what I already have since I've got it working at the moment? The only thing I can't seem to get working with my code is that when no image is returned, it errors out which doesn't return any data to the autocomplete. As long as the user has an image, then it works great. I probably need to adjust my code somehow to pass if no image exists.

deronsizemore commented 9 years ago

I ended up getting my view sorted out for the image issue. So, it works now and returns a default image if none is stored in the database.

Anything else I'd be missing by not using the app?

ivirabyan commented 9 years ago

It emits signal objects_mentioned, for all mentioned objects, so you can easy notify mentioned users. Also it can automatically create database relations based on mentions. For example, if a user is mentioned in a comment, it creates a record in a m2m table, so that you can easily find all comments the user is mentioned in. Also it has a template filter to render texts containing mentions, so that mentions are automatically converted to links. Also there is a function to just extract mentions from the text. Simply, it has all the stuff needed for working with mentions :)

deronsizemore commented 9 years ago

Interesting. So when is that signal sent out for objects_mentioned? I wouldn't want to notify someone until the actual comment was created in case someone did an @mention but then decided to not leave a comment.

The template filter would be a nice touch for sure. Never thought about turning them into links automatically. I may check it out. I'm still pretty novice with django so I'm trying to use as little apps as possible just for the sake of learning and since I've already got about five hours invested in getting it to the point I'm at, I kind of want to see it through if possible. :) I think I could write the template filter on my own; would be a good learning experience.

deronsizemore commented 9 years ago

Actually, the more I think about it, that template filter might be a little above my knowledge level. I wasn't thinking about it clearly I don't think. I may go ahead and install the app and see if I can get it working

ivirabyan commented 9 years ago

Signal is sent when the comment is saved.

If you want to write your own filter, here the required steps:

  1. Write a regexp for a mention
  2. Find all matches of regexp in text
  3. For every match pick a user from the database using id
  4. Replace the match with an html link to the user
deronsizemore commented 9 years ago

Ok, thanks a lot! I really appreciate all the help you've given me on my questions. Hard to find people willing to help as much as you've done. thanks so much.

deronsizemore commented 9 years ago

I did a work around with this with a little CSS magic. Here's my value:

'value': '< a href="%s" >< span >@< /span >%s< /a >' % (item.user.username, item.user.username),

So it inserts an extra a tag into the autocomplete list but I then use some CSS to get it back inline:

.ui-menu .ui-menu-item a a { padding: 0; display: inline; }

Thoughts?