How to call Bootstrap jquery function from Ember 2 on specific action

Ember Data
1

I am doing Chat application ,Currently I managed to add bootstrap/bootsnipp code(Html,css,jquery) in my Ember2.14 project and jquery works fine when I add it in this folder public/assets/Chat.js then I add reference to it in app/index.html.it is now loaded in vendor.js and jquery is working fine when I am loading the page…

-My Question is: How can I call the jquery function (again) from Ember and where to put the code… I want when I press Send button to put my input Message in Chat window with jquery effect like the Bootstrap example in the below link …

I am totally new to jquery & Ember so I am not sure which function from the below jquery code I need to call (I think it may be sendMessage) and how to call it from Ember…

jquery:

(function () { var Message; Message = function (arg) { this.text = arg.text, this.message_side = arg.message_side; this.draw = function (_this) { return function () { var $message; $message = $($(‘.message_template’).clone().html()); $message.addClass(_this.message_side).find(‘.text’).html(_this.text); $(‘.messages’).append($message); return setTimeout(function () { return $message.addClass(‘appeared’); }, 0); }; }(this); return this; }; $(function () { var getMessageText, message_side, sendMessage; message_side = ‘right’; getMessageText = function () { var $message_input; $message_input = $(‘.message_input’); return $message_input.val(); }; sendMessage = function (text) { var $messages, message; if (text.trim() === ‘’) { return; } $(‘.message_input’).val(‘’); $messages = $(‘.messages’); message_side = message_side === ‘left’ ? ‘right’ : ‘left’; message = new Message({ text: text, message_side: message_side }); message.draw(); return $messages.animate({ scrollTop: $messages.prop(‘scrollHeight’) }, 300); }; $(‘.send_message’).click(function (e) { return sendMessage(getMessageText()); }); $(‘.message_input’).keyup(function (e) { if (e.which === 13) { return sendMessage(getMessageText()); } }); sendMessage(‘Hello Philip! :)’); setTimeout(function () { return sendMessage(‘Hi Sandy! How are you?’); }, 1000); return setTimeout(function () { return sendMessage(‘I'm fine, thank you!’); }, 2000); }); }.call(this));

Full BootstarpCode: Bootstrap Snippet Chat (by Pavel Komiagin) using HTML CSS jQuery

2

You might want to look at rebuilding that chat window using Ember components. While you’ll need to learn a little, it means that you can leverage the whole Ember ecosystem. It also means that you can add other functionality such as sending and receiving messages from a server. You can reuse the HTML and CSS, so it’s not completely from scratch

The logic of displaying the messages you’ll want to map out. Roughly, you’ll want an array of messages which you can display by using the each helper. A button with an action that uses the value of a text input to create a new message and push in onto the messages array

I’d start with getting a blank chat window displaying, then try adding the action

3

Thanks for your response , but can you explain what you mean in Example to be able to understand you quickly as I am still new in Ember

here is my code :

1-templates/application.hbs :

Chat
    {{#if responseMessage}} {{#each model as |chat|}}
    {{chat.message}}
    {{/each}} {{/if}} 
</ul>
<div class="bottom_wrapper clearfix">
    <div class="message_input_wrapper">
        {{input class="message_input" value=messageInput placeholder="Type your message here..." }}
    </div>
    <button class="send_message"  disabled={{isDisabled}} {{action 'saveMessage'}} >
      <div class="icon"></div>
      <div class="text">Send</div>
    </button>

  </div>
</div>

2-routes/chat.js

import Ember from ‘ember’;

export default Ember.Route.extend({ model(){ return this.store.findAll(‘chat’); } }); 3-models/chat.js

import DS from ‘ember-data’; export default DS.Model.extend({ message: DS.attr(‘string’) }); 4-controllers/chat.js

import Ember from ‘ember’; export default Ember.Controller.extend({ responseMessage: ‘’, messageInput: ‘’ ,

isDisabled: Ember.computed.empty(‘messageInput’),

actions: { saveMessage() { var _that = this; var inputMessage = this.get(‘messageInput’); var newInputMessage = this.store.createRecord(‘chat’,{ message: inputMessage });

  //Call super script BackEnd
    var url ='http://localhost:5000/superscript?message='+this.get('messageInput');
   console.log('Request URL is :',url);
    Ember.$.getJSON(url).then(function(data) {
     _that.set('responseMessage', data.message);
    _that.set('messageInput', '');
    console.log('resonse is :',data.message);
    var newResponseMessage = _that.store.createRecord('chat',{
      message: data.message
       });

     });
}//save

}//actions });//export

4

I don’t know why there is no code format in this forum , I prefer to close this thread and keep the chat in this thread as stackoverflow present my question properly javascript - How to call Bootstrap jquery function from Ember 2 on specific action - Stack Overflow

5

Thank for the solution! I appreciate :+1::+1::+1::+1::+1::+1::+1:

Regards, John Right BBBootstrap