<html>
<head>
	<title>CodeIgniter Shoutbox</title>
    <style>
    	ul li
		{
			margin:5px;
		}
		
		.modal 
		{
			display:    none;
			position:   fixed;
			z-index:    1000;
			top:        0;
			left:       0;
			height:     100%;
			width:      100%;
			background: rgba( 255, 255, 255, .8 ) 
						url('<?php echo base_url("assets/img/myicon/blueloading.gif");?>') 
						50% 50% 
						no-repeat;
		}
	
		body.loading 
		{
			overflow: hidden;   
		}
	
		body.loading .modal 
		{
			display: block;
		}
		
		#item
		{
			color:red;	
		}
    </style>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="<?php echo base_url("assets/js/jquery-1.11.0.min.js");?>"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
	$body = $("body");
	$(document).on({
		ajaxStart: function() { $body.addClass("loading"); },
		ajaxStop: function() { $body.removeClass("loading"); }    
	});
	
	$(document).ready(function(){
		loaduser();
		newMsg();
	});
	
	function loaduser()
	{
		var id = $("#showuser").val();
		$.ajax({
		 	type: "POST",
			url: "<?php echo base_url(); ?>"+"admin/chat/show_user"
		}).done(function( data ) {
			
			var values;
			var show_values;
			$("#showuser option").each(function()
			{
				values = $(this).val();
			});
			
			$(data).each(function()
			{
				show_values = $(this).val();
			});		
			
			if(show_values !== values){
				$('#showuser').html(data);	
			}
      		
			
		});	
		setTimeout('loaduser()', 1000); 
	}
	
	<!--load-ajax-->
	function newMsg(str)
	{
		if (str == "" || str == undefined) {
			 var str = document.getElementById("myLi").value;
  		}
		$("#trn_user").val(str);
		//document.getElementById("trn_user").value = str;
		$.ajax({
		 	type: "POST",
			url: "<?php echo base_url(); ?>"+"admin/chat/getMsg",
			data: {Id : str }
		}).done(function( data ) {
			$('#messagewindow').html(data);	
		});		
		//setTimeout('newMsg()', 1000); 
		
	}
	<!--exit-->
    </script>
	<style>
    	#messagewindow {
			width:100%;
			height: 250px;
			border: 1px solid;
			padding: 5px;
			margin:5px;
			overflow: auto;
			border-radius: 4px;
		}
    </style>
<body>
    <div class="container">
    
    	<div class="col-lg-3">
        	<ul class="list-group" id="showuser">
                <?php 
                    $date = date('Y-m-d');
					$sql = $this->db->query("SELECT `id`, `ip_address`, `sessionId`, `active`, `date` FROM `ci_sessions` WHERE date = '$date' AND active = 1");
                    foreach($sql->result() as $v)
					{
						if($sql->result  = 0)
						{
							$user = "Not Found";  
						}
						else
						{
							$user = "User"; 
						}
					
				    	echo'<li id="myLi" value="'.$v->sessionId.'" onclick="newMsg(this.value)" class="list-group-item"><a href="" >User('.$v->sessionId.')</a></li>';
                     
                    }
                ?>    
            </ul>
        </div>
        
        <div class="col-lg-8">
        	<p id="messagewindow">
            	<?php //echo $html; ?>
        	</p>
   
            <form id="chatform" action="<?php echo site_url("/admin/chat/add");?>" method="post">
            	<div id="user">
                	<input type="hidden" name="trn_user" id="trn_user"/>
                </div>
                
            	<div id="myid">
                	<input type="hidden" name="trn_id" id="trn_id" value="0"/>
                </div>
                
            	<div id="txt">
            		<label>Message</label><br>
            		<textarea cols="40" rows="4" class="form-control" placeholder="Type your message here" name="message" id="content"></textarea>
            	</div><br />
                
            	<input type="hidden" name="html_redirect" value="true" />
            	<input type="submit" class="btn btn-primary" value="Send" /><br/>
			</form>
            
            
            
        </div>
        <a href="<?php echo base_url("authentication/logout");?>" style="float:right;">logout</a>
    </div>
    
   <div class="modal"><!-- Place at bottom of page --></div>	
</body>
    
</html>