JQuery : Adding new inside

Question

So I want to build chat message inside list. I want to add new list after user input the message in input field and click submit button.

Here is my HTML:

<div class="panel-collapse">
    <div class="panel-body" style="overflow-y: scroll; height: 250px;">
        <ul class="chat" id="list"> 
           <li class="left clearfix">
                <span class="chat-img pull-left">
                    <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                </span>
                <div class="chat-body clearfix">
                     <div class="header">
                         <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">
                         <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
                      </div>
                      <p> PUT HERE SOME OF TEXT OF CHAT </p>
                </div>
           </li>
           <li> ALL ATTRIBUTES IN PREVIOUS LI AND NEW MESSAGE WILL BE HERE </li>
        </ul>
    </div>

    <div class="panel-footer">
        <div class="input-group">
            <input id="chat-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
            <span class="input-group-btn">
                <button class="btn btn-warning btn-sm" id="btn-chat" type="submit"> Send</button>
            </span>
         </div>
    </div>

</div>

So everytime user text some message inside <input> field, and click button submit, jquery will add new <Li> and the message will put in <p> </p>.

Here is my JQuery:

$(document).ready(function() {
    $('#btn-chat').click(function(e) {
        e.preventDefault();
         var new_chat = $('#chat-input').val();
        $('#list').append('<p>'+new_chat+'</p>');
    });
});

Please correct my code if I'm do something wrong. I really appreciate it. Thank you.

Answer 1

Replace '<p>'+new_chat+'</p>' by '<li><p>'+new_chat+'</p></li>'

$(document).ready(function() {
  $('#btn-chat').click(function(e) {
    e.preventDefault();
     var new_chat = $('#chat-input').val();
    $('#list').append('<li><p>'+new_chat+'<p/></li>');
  });
}); 

Result: https://jsfiddle.net/7nz4cdwu/

Answer 2

As you add the chat messages to the page, as soon as the page is refreshed all those chat messages will be gone. Also, there is no way for the chat recipient to receive the messages. All messages will only appear on the one (temporary) page and be seen only by the sender.

To solve this, you must store the chat messages somewhere and display them to the appropriate users. This requires use of server-based tools, such as PHP or ASP.NET. PHP is by far the most common, and you have access to it for free when you install XAMPP or WAMP/MAMP/LAMP (Windows/Mac/Linux) on your local computer (or with almost any inexpensive hosting account online, almost all of which use LAMP). The earlier-mentioned tools, such as XAMPP, create a dev LAMP hosting environment on your local computer.

You have two options for receiving/storing/redisplaying the chat messages: FORMs or AJAX. AJAX is recommended, because it does not refresh the page, and is pretty simple. The <form> construct is the old way to send data to the server, AJAX is how we do this nowadays.

When user clicks SEND, use jQuery/js to read the <input> or <textarea> field with user's message. Then, use an AJAX code block to send data to the server (to a PHP file that receives the data and plunks it into a database).

Here are some simple examples of how to use AJAX -- it's quite easy. Make sure you copy the examples and reproduce them on your system. Best 15 mins you'll spend this quarter.

Your code will look something like this (incomplete/untested/FYI):

Assumption: the user logs in on index.php, and is redirected to chats.php for chat system.

chats.php

<?php
    session_start(); //Must be first instruction on page
    if ( !isset($_SESSION['userID'] ) header('Location: ' . 'index.php'); //2nd instruction on page
    $msgs = get_chat_messages($_SESSION['user_id']); //Note that user has logged in somehow
?>

<div class="panel-collapse">
    <div class="panel-body" style="overflow-y: scroll; height: 250px;">
        <ul class="chat" id="list"> 

<?php
    $out = '';
    while ($row = mysql_fetch_array($msgs)) {
        $out = '
           <li class="left clearfix">
                <span class="chat-img pull-left">
                    <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                </span>
                <div class="chat-body clearfix">
                     <div class="header">
                         <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">
                         <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
                      </div>
                      <p>' .$row['msg_db_field_name']. '</p>
                </div>
           </li>
           <li> ALL ATTRIBUTES IN PREVIOUS LI AND NEW MESSAGE WILL BE HERE </li>
        ';
    }
    echo $out;
?>
        </ul>
    </div>

    <div class="panel-footer">
        <div class="input-group">
            <input id="chat-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
            <span class="input-group-btn">
                <button class="btn btn-warning btn-sm" id="btn-chat" type="submit"> Send</button>
            </span>
         </div>
    </div>

</div>

<script>
    var msg;
    $(function(){
        msg = $('#chat-input').val();
        $.ajax({
            type: 'post',
             url: 'my_ajax_processor.php',
            data: 'msg=' + msg,
            success: function(d){
                //if (d.length) alert(d); //uncomment for troubleshooting
                $('#list').append('\
                   <li class="left clearfix">\
                        <span class="chat-img pull-left">\
                            <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />\
                        </span>\
                        <div class="chat-body clearfix">\
                             <div class="header">\
                                 <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">\
                                 <span class="glyphicon glyphicon-time"></span>12 mins ago</small>\
                              </div>\
                              <p>' +msg+ '</p>\
                        </div>\
                   </li>\           
                ');
            }//END success fn
        });//END ajax code block
    });//END document.ready
</script>

my_ajax_processor.php

<?php
    $msg = $_POST['msg'];
    //now, store message into database. Of course, you need more than just the message. You also need the senderID and the recipID, plus maybe date, time etc.

---

Above is a big-picture overview of your chat system. There are some great video tutorials on codecourse.com. They used to be free, they now charge about $10/month. Purchase one month access and go through the Registration/Login tuts (they have both procedural and OOP courses - procedural is easier, OOP is more useful if you intend to work in the industry). Worth every penny. Remember to cancel the account before you are charged for another month. This is done in your paypal account under Profile -- My Money -- Preapproved Payments -- Update