Demo code not working: "elmInputBox.elastic is not a function"

ghost commented 5 years ago

I intend to use jquery-mentions-input in my Angular 6 application. However, at this point I can't even make the demo code run. I get the same error as in my Angular application:

Uncaught TypeError: elmInputBox.elastic is not a function
    at initTextarea (jquery.mentionsInput.js:89)
    at HTMLTextAreaElement.init (jquery.mentionsInput.js:333)
    at HTMLTextAreaElement.<anonymous> (jquery.mentionsInput.js:378)
    at Function.each (jquery.min.js:2)
    at init.each (jquery.min.js:2)
    at init.$.fn.mentionsInput (jquery.mentionsInput.js:371)
    at HTMLDocument.<anonymous> (test.html:27)
    at n (jquery.min.js:2)
    at Object.fireWith (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)

This is the code:

<!doctype html>
<html lang="en">
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type='text/javascript'></script>
  <script src="https://cdn.rawgit.com/jashkenas/underscore/1.8.3/underscore-min.js" type='text/javascript'></script>
  <script src='http://podio.github.io/jquery-mentions-input/jquery.mentionsInput.js' type='text/javascript'></script>

  <script>
    if(window.jQuery) {
        console.log('jQuery loaded');
    } else {
        console.log('jQuery NOT loaded');
    }
    if(window._) {
        console.log('_ loaded');
    } else {
        console.log('_ NOT loaded');
    }

    console.log($('textarea.mention'));

    $(function () {

        $('textarea.mention').mentionsInput({
            onDataRequest:function (mode, query, callback) {
                var data = [
                    { id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:7, name:'kenneth@auchenberg.dk', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:8, name:'Pete Awesome Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
                    { id:9, name:'Kenneth Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
                ];

                data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
                callback.call(this, data);
            }
        });

        $('.get-syntax-text').click(function() {
            $('textarea.mention').mentionsInput('val', function(text) {
                alert(text);
            });
        });

        $('.get-mentions').click(function() {
            $('textarea.mention').mentionsInput('getMentions', function(data) {
                alert(JSON.stringify(data));
            });
        }) ;

    });

  </script>

</head>
<body>
  <textarea class="mention"></textarea>
</body>
</html>

praveenscience commented 5 years ago

Looking into it... 😇

praveenscience commented 5 years ago

@silentsnooc Works for me. You forgot to include jQuery.Elastic:

<script src="http://podio.github.io/jquery-mentions-input/lib/jquery.elastic.js"></script>

MonikaInfyOm commented 5 years ago

I have added elastic.js also but it still not working

podio / jquery-mentions-input

Demo code not working: "elmInputBox.elastic is not a function" #184