podio / jquery-mentions-input Goto Github PK

I have a use case where users can edit a post they already submitted but upon initializing mentionsInput it calls resetInput which wipes out any text I loaded from the database. Is there a way to provide a setting or override to suppress this behavior?

We're using this plugin for our site and noticing that when the overlay is styled to match the input in Chrome on Ubuntu, it's out of sync with Chrome on Mac/Windows, and vice versa.

Styling in this manner creates too delicate a situation, where any slight variation can ruin the appearance, and ultimately, user experience of this plugin.

When looking at what FB does, rather than overlay, content typed into a comment field is actually ONLY rendered using a div (essentially overlay becomes the visible part, and input content is hidden.

I've been working on implementation of a fake cursor to make this configuration possible, however it appears that line breaks for carriage returns are only added after the next text is typed, which creates an odd behavior for the cursor when the enter key is pressed.

Also it appears that starting your input with spaces or carriage returns will take the overlay div and input fields out of sync as well.

We've attached an ID to the overlay div, here's the code I'm using for the fake cursor:

var binnoFakeCursorInterval;
$('#comment').bind('click', function() {
binnoFakeCursorInterval = setInterval("binnoFakeCursor($('#jq_mentions_container_div'))", 800 );
});
$('#comment').bind('focusout', function() { $('.binno-fake-cursor').remove(); clearInterval(binnoFakeCursorInterval);});

function binnoFakeCursor(el) {
if (el.find('.binno-fake-cursor').length)
$('.binno-fake-cursor').remove();
else
el.html(el.html() + '|');
}

either .append or .html to render the cursor results in the same behavior.

I need to populate another form field with data from the item selected from the dropdown right after it's selected, but my JavaScript skills aren't particularly strong so I'm not sure the best way to do that. Is there a callback I can use?

I have tried your autocomplete plugin and got all your examples to work and everything look good. Then, I tried with ajax and encountered some potential problems that would be performance related.

1. If you do @ke and then backspace all the way back, in the process it keeps making ajax calls to the server. How do I prevent this?
2. Would it be possible if using an ajax call to only fire the request after the previous one has returned? An example would be typing out @kenneth and the ajax call happening with query being (ke, ken, kenn, ...).

Any ideas on how to make this work with a contenteditable?

You might want to put the MIT License notice in a LICENSE file in the root, rather than just referencing it in the website (the license does need to be distributed with the software itself in order to be valid).

1. Start to mention someone:
   "@pete"
2. The search box appears like normal, showing pete's
3. Press the backspace key and the autosuggest dissapears until you delete all the way back to the @ then retype

I've found a quick hack so you can do a check on the keycode within onInputBoxKeyPress:

    function onInputBoxKeyPress(e) {
            // Check if this is a backspace key as it seems to insert a space, which is then not spliced
            if (e.keyCode !== 8) {
                var typedValue = String.fromCharCode(e.which || e.keyCode);
                inputBuffer.push(typedValue);
            }
        }

Cheers

James

Looks like a good start. In FF 8 & Chrome 16, there are no spaces between names, unless added manually. Seems like there should be some visual separation here by default... maybe via CSS padding / margins?

If i'm in line and i make the mention, everything ok.
But if I give enter (or continue writing and the text goes to a new line) this happens:

Any ideas?
Thanks!

I am using the default "@" trigger to pull from a list of members, but is there any way to i can use a "#" trigger on the same form to pull from a list of tags?

Can you make it so that the actual <textarea> gets the markedup value so that you can submit the form without having to call the "mentionsInput('val')" prior to submitting a form.

or maybe trigger an event each time the markedup value is updated, so that I could build something around it that does the trick.

I recently modified your script to deal with this problem, I went an added a after the <textarea> with the same name="" of the <textarea> and removed the name from the <textarea>

But I dont want to keep modifying this every time I update this plugin.

Or am I missing something or am I the only one with this problem?

thnx

Legalising same-sex marriage may create a healthier environment for gay men, say US researchers.

The number of visits by gay men to health clinics dropped significantly after same-sex unions were allowed in the state Massachusetts.

This was regardless of whether the men were in a stable relationship, reported the American Journal of Public Health.

A UK HIV charity said there was a clear link between happiness and health.

Research has already suggested that gay men are more likely to suffer from depression and suicidal thoughts than heterosexual men, and that social exclusion may be partly responsible.

'Lasting repercussions'

Same-sex marriages are legal in six US states, with Massachusetts the first to allow them in 2003.

Researchers from Columbia University Mailman School of Public Health surveyed the demand for medical and mental health care from 1,211 gay men registered with a particular health clinic in the 12 months prior to the change, and the 12 months afterwards.

There was a reduction in blood pressure problems, depression and "adjustment disorders", which the authors claimed could be the result of reduced stress.

Lesbian women were not included in the study as there were insufficient numbers to give a statistically meaningful result.

Dr Mark Hatzenbuehler, who led the study, said: "Our results suggest that removing these barriers improves the health of gay and bisexual men

"Marriage equality may produce broad public health benefits by reducing the occurrence of stress-related health conditions."

A spokesman for the Terrence Higgins Trust, a UK-based sexual health and HIV charity, said: "There is a known link between health and happiness.

"It's no surprise that people who are treated as second class citizens tend to have low self esteem, which in turn makes them more likely to take risks.

"Whether this is drugs, alcohol abuse, or unsafe sex, treating gay men unequally has lasting repercussions for their health."

you can get the Lime Kiln,Cement Mill,Ball Mill Manufacturer,Ball Mill Machine,jaw crusher,beneficiation,if you are interested in our products,please contact us by E-mail([email protected]) or telephone.

On Diaspora we are using a different autoresize jQuery plugin for textareas, so we kinda need to disable the built-in elastic option and apply our own manually.

Is it possible to add the option again, and maybe instead place a note in the documentation specifying the need to autoresize the textarea in order for it to work properly?

I get a "Uncaught ReferenceError: _ is not defined" error

using jquery 1.8.0

Mentioning someone with the same name as someone who was already tagged, replaces the original tag with the new mention.

When the input field loses focus, the suggestions dropdown should go away as there is no way to close it except by editing what's been typed.

Chrome 15/OSX

I'm trying to use both jquery-mentions-input and bootstrap-dropdown.js in the same page but including the jquery-mentions-input js file stops the dropdown working. As far as I can tell the two files aren't working on the same DOM elements. Could they be conflicting on events?

I traced it to the last line:

})(jQuery, _); stops the bootstrap-dropdown.js from working.

but

})(jQuery); works fine. Or at least has stopped interfering with bootstrap-dropdown.js

With the slight problem being that mentionsInput no longer works if you remove ",_" . It keeps producing JS errors on page load.

I need to disable @mention when typing email address. Did anyone know how ?

I want to trigger the mentionsInput functionality if a user clicks a specific button, in addition to the natural of this plugin. I have it so an '@' symbol is inserted at the caret position but it doesn't trigger the dropdown.

What am I missing?

When writing @name and then followed by space and then picking the name the text (@name) sticks. See screenshot

how can I get the value of the mentions and send it to input field using these amazing plugin

In IE9 when I @mention someone, and backspace the name, it still shows overlay

AFAIK this is not possible out of the box, but how should I proceed if I want to pre-populate a text field that contains mentions. The highlighting and the mentions should be preserved.

I'd like to use capital letters as a trigger character, similar to how Facebook does mentions.

For example, if I start typing John Smith's name, an AJAX request would be triggered after I type 'Jo' (J being the trigger char). The trigger character in this case is part of the actual name, unlike @.

Is it possible to achieve this? I think it would be an awesome feature.

Thanks for this great plugin!

Starting to type a mention works fine, but after I select the mention the highlight is up and to the left.
The highlight follow the mention text but it is not on top of it as expected.

I tried the the same CSS applied to the textareas on the example site.

.mentions-input-box textarea {
    font-family: 'pt sans', arial, helvetica, sans-serif;
    font-size: 14px;
}

Tested in IE8+ and Chrome ... Ideas?

Thanks
K

Hello,

We are one of the most visited forums in Turkey, but when we try to implement your solution to twitter-style mention system, we experience trouble such:

As you type into the Textarea, which named "body", it fills with text. But in the element side, it is always empty.

When we post the page, and print the Request.Form of "body" element, it's length zero.

I have just prepared a test page for anyone to see this, (automatically logged in with my account)

http://resim.donanimhaber.com/post_yeni_for_kenneth.asp?do=reply&messageID=66496640&toStyle=tm

Post the page and you'll see the Request.Form as
"r_do=reply&recID=&withsig=on&subject=Cevap%3A++test&msgIcons=1&ref=&citiozel=yes&mentionids=&adminmod=off&toStyle=tm&parent=66496640&threadID=66479878&body=&emnotify=&postingaction=reply&jsenabled=false&ssid=562875720&memberModerated=0&forumid=78&upfile=&upfileinfo=&downloadcount=&upfilesize=&signature=%5Bimage%5Dhttp%3A%2F%2Fi56.tinypic.com%2F2qxynu9.jpg%5B%2Fimage%5D&qmode=&submitbutton=+Tamam+"

So "body" part is like "&body="

I've been struggling with this for a few days, so any help will be strongly appreciated.

I need to markup mention after submit. If i have strineg like "@anders love sport" its ok i markup andres... But if i have "@anders love anderson" how to know what to markup? I think something about, when i add mention to try to add and position where in sentence mention happen.

It's a cool plugin but not support Unicode characters (eg. Chinese, Japanese @中文 @日本語 ).
That's a pity.

http://ichord.github.com/At.js/ is a Similar plugin support Chinese characters(try @你),but not as powerful as jquery-mentions-input.

i'm trying to make a textarea (WYSIWYG Text Editor) where i write a text and i can mention people from the Database.

How do i add a link to the person i mention? By link i mean a anchor tag.

Thank you,
PF2G

There's code in onInputBoxKeyDown to handle backspace, and it runs, but the text in .mentions doesn’t update until a normal key is entered. Happens even with the examples on the project page.

Tested in IE 9, standards mode. Works correctly in IE 8.

This looks fantastic. One feature I would love is if it could support both '@' and '#' trigger chars at the same time. The trigger char then should be passed to the onDataRequestonDataRequest so different types of searches can be performed.

Can you share the jquery version this works with and the version of underscore.js required?

If the contact's name stars with an accent, say "Éverton Ribeiro", a very strange thing happens when you select it: the selected name "Éverton Ribeiro" goes right to the beginning of the input, and the "@éver" you were writing to select him stays where it was before. Any hints on how to solve that?

Hi Podio,
First off, amazing work, nice clean scripts.

On the @mentions script it goes mad when used on iPad/iPhone, see screen shots below. (running iOS 5.0.1)

Issue 01:
http://i41.tinypic.com/308cz0y.jpg

Issue 02:
http://i40.tinypic.com/qmzy41.jpg

Do you have any work arounds for this? At this time i've turned of highlights so it works more like a Twitter Mention script than a Facebook Mention script.

Thanks in Advance :)

Ducky

You might be interested in adding fuzzymatching on names using https://github.com/KyleAMathews/Fuzzymatcher.js. It's a nice win over using indexOf()

plugin not working with jquery.validate (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

This mentions input javascript plugin very useful for me. I have one suggestion,

1. Need to configure drop down max-height.
2. If i navigate record using down arrow, it will scroll to corresponded record. (I manually added scroll in .mentions-input-box .mentions-autocomplete-list class, i am facing this problem.)

For example if you type "@kenn" mention work, but if I remove one letter "n" "@ken" mention stop to work :( . Any solution?

I have an inline form with a textarea in it, but no div wrapping it. This causes one of the mentionsInput divs to attach to the wrong element.

As a user
I need the autocompler results to go away when I click away from the input box and results
because I want to see what's under the results if it's a long list if I accidentally picked the wrong field

I wonder if this scrolling can be disabled ...

Can't tell if there's a bug or (more likely) I'm doing it wrong:

https://skitch.com/jackdempsey3rd/8w9cb/hi

Have setup a basic example to demo it to myself and am seeing strange behavior. I have the relevant js and CSS files in place. Not sure what this could be (no errors) but hoping someone's seen it before.

thx!

when i input @ chinese ,the keydown even isn't triggered,so as the server can't return the data

When I enter space after unselected mention, querying don't stop? So if I have for example email('@'appear), until end of post script will make endless queries...

Is there a way to capture the "full name" of a person and sending it to my backend for search?

For example, if I type "@john Doe", only "John" is sent to the backend when I do a realtime AJAX name search. This has 2 side effects:

• the full name is not highlighted properly in the dropdown
• I cannot filter the results accordingly. This is problematic since I have a few thousand users. I want to reduce the size of the dropdown as much as possible.

I made a short screencast to illustrate the problem: http://db.tt/5Sky8XVT

I'm not sure if this is a bug, a mis-configuration or simply something that was not implemented. Thanks!

For the record, this is my onDataRequest code (in Coffeescript):

onDataRequest: (mode, query, callback) ->
  $.getJSON "/#{window.communitySlug}/memberships.json?q=" + encodeURIComponent(query), (responseData) ->
    responseData = _.filter(responseData, (item) ->
      item.name.toLowerCase().indexOf(query.toLowerCase()) > -1
    )
    callback.call this, responseData

I would like a synchronous method, please :-)

I want to change format of selected item from:
var updatedMessageText = start + mention.value + ' ' + end;
to
var updatedMessageText = start + '@' + mention.value + ' ' + end;
but I don't want to change mentionsInput.js
Please suggest how could I implement such behavior

See this screenshot: http://cl.ly/2E1e3D0r1y3c0D2z0t2h/mentions.png

As you can see the blue tag that is placed behind the textarea isn't lined up correctly. This only happens when I enter enough newlines.

I'd like to use this for a comment system, when a user clicks on reply (from an other comment) it adds the tag of the user's name in the textarea.
I tried to use the addMention function but I was unable to get it to work.
Does anyone have an idea on how to do this ??
Thanks a lot for any answers
Joris

Would it be possible to present the suggestions the same way as the github @ mention autocompleter?