CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsenter
NIKHIL RANE
NIKHIL RANE

Reputation: 4110

Call function on 'Enter' press

Here is my HTML code:

<div class="panel-footer">
    <div class="input-group">
        <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
        <span class="input-group-btn">
            <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
        </span>
    </div>
</div>

And here is my jQuery code: 

$('.message').keypress(function (e) {
    if (e.which == 13) {
        var msg = $(this).val();
        var id = $(this).closest('span').next('button.btn_chat').val();
        alert(id+"      "+msg);
        sendMessage(msg,id);
    }
    e.preventDefault();
});

Here is my send message function: 

var sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

Now I want to call my sendMessge function in it, when enter button press after message written.

But when I press enter button my jQuery not run. How can I solve this problem?

Upvotes: 1

Views: 3917

Answers (2)

Satpal
Satpal

Reputation: 133403

Angular provides mechanism, You can create a form and use ngSubmit to bind function to execute when form is submitted.

So, when Enter is pressed form will be submitted.

HTML

<div class="panel-footer">
    <div class="input-group">
        <form ng-submit="sendMessage(messageToSend, 79)">
            <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" /> 
          <span class="input-group-btn">
                <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
          </span>
        </form>
     </div>
</div>

Add method in your controller 

$scope.sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

If you don't want to use form, then you can use ngKeyup

<input ng-keyup="$event.keyCode == 13 ? sendMessage(messageToSend, 79): null" ng-model="messageToSend" >

Upvotes: 2

Alex McMillan
Alex McMillan

Reputation: 17942

You are using the line 

var id = $(this).closest('span').prev('button.btn_chat').val();

however, the $(this) in that case is an <input> element, which isn't inside a <span>. Therefore .closest('span') will be returning an empty set.

Upvotes: 0

Related Questions