ShoutBox

by PAEz

HTML

<script src="https://raw.github.com/rniemeyer/rniemeyer.github.com/master/KnockMeOut/Scripts/knockout-1.3ctp.debug.js"></script>
<script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-alerts.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
    <div id="wrapper">
        
        <div class="alert-message fade in" data-alert="alert">
           This is just an alert 
        </div>
        
    <p id="messagewindow"><span id="loading">Loading...</span></p>
    <form id="chatform">
    <div id="author">
    Name: <input type="text" id="name" />
    </div><br />

    <div id="txt">
    Message: <input type="text" name="content" id="content" value="" />
    </div>
    
    <div id="contentLoading" class="contentLoading">  
    <img src="http://misc.paez.kodingen.com/images/blueloading.gif" alt="Loading data, please wait...">  
    </div><br />
    
    <input class="btn primary" type="submit" value="Send" /><br />
    </form>
    </div>

CSS

#messagewindow {
            height: 250px;
            border: 1px solid;
            padding: 5px;
            overflow: auto;
        }
        #wrapper {
            margin: auto;
            width: 400px;
        }

JavaScript

$(document).ready(function(){
            
            loadMsg();            
            hideLoading();
                        
            $("form#chatform").submit(function(){
                                            
                $.post("http://misc.paez.kodingen.com/chat/update",{
                            message: $("#content").val(),
                            name: $("#name").val(),
                            action: "postmsg"
                        }, function() {
                    
                    $("#messagewindow").prepend("<b>"+$("#name").val()+"</b>: "+$("#content").val()+"<br />");
                    
                    $("#content").val("");                    
                    $("#content").focus();
                });        
                return false;
            });
            
           
        });

        function showLoading(){
            $("#contentLoading").show();
            $("#txt").hide();
            $("#author").hide();
        }
        function hideLoading(){
            $("#contentLoading").hide();
            $("#txt").show();
            $("#author").show();
        }
        
        function addMessages(json) {
            //console.log(json);
            
            $.each(json, function(i,val){
                //console.log(val.id);
                $("#messagewindow").append("<b>"+val.user+"</b>: "+val.msg+"<br />");                
            });
        }
        
        function loadMsg() {
            $.getJSON("http://misc.paez.kodingen.com/chat/json_backend", function(json) {
                $("#loading").remove();                
                addMessages(json);
            });
            
            //setTimeout('loadMsg()', 4000);
        }