在php，mysql和ajax jquery中开发Chat模块

Question

I am trying to implement a small chat application where user can text chat with any one of the online users. My logic behind this is some thing like the following:

 Login first.

 Fetch the users who are online from DB and show them as list of online users.

 Click on the users, then another small window is opening for text chatting.

 Create a form(two hidden fields- one is for sender id and another is for receiver id, one textarea and a button for submitting) for this chatting.

 Through jQuery, fill the value of receiver id.

 By session id, fill the value of sender id.

 After submitting the button, I call a page through ajax jquery which is responsible to insert and show the current data from DB.

My code for the ajaxJquery is like :

$(document).ready(function(){
        $('#send_btn').click(function(){
            var receiver_id = $('#hide_receiver_id').val();
            var sender_id = $('#hide_sender_id').val();
            var messagebox = $('#messagebox').val();

            $.ajax({
                type:"POST",
                url:"chat_history.php?receiver_id="+receiver_id+"&sender_id="+sender_id+"&message="+messagebox,
                success:function(result){
                    $('#history').html(result);
                }   

            });
            $('#messagebox').val('');
        });
    });
</script>

Up to this, its working fine. But I need to autoload the <div id="history"></div> portion. For that also I am thinking to do by using setInterval() in jQuery. My code is like :

<script type="text/javascript">
  var auto_refresh = setInterval(
   function (){
    $('#history').load("chat_history.php?receiver_id=''&sender_id=<?php echo $_SESSION['id']?>&message=").fadeIn("fast");
   }, 1000); // refresh every 1000 milliseconds
</script>

But in this scenario, how to pass the value of receiever_id in load() which is necessary to find out the respective data from DB? Please let me know whether the requirement is cleared to you or not.

Thanks in advance.

Answer 1

<script>
    $(function () {

        // function wide variables
        var receiver_id = $('#hide_receiver_id').val();
        var sender_id = $('#hide_sender_id').val();
        var messagebox = $('#messagebox').val();

        // button click
        $('#send_btn').click(function () {
            receiver_id = $('#hide_receiver_id').val();
            sender_id = $('#hide_sender_id').val();
            messagebox = $('#messagebox').val();

            $.ajax({
                type : "POST",
                url : "chat_history.php?receiver_id=" + receiver_id + "&sender_id=" + sender_id + "&message=" + messagebox,
                success : function (result) {
                    $('#history').html(result);
                }
            });
            $('#messagebox').val('');
        });

        var auto_refresh = setInterval(function(){
            $('#history').load("chat_history.php?receiver_id="+receiver_id+"&sender_id=<?php echo $_SESSION['id']?>&message=").fadeIn("fast");
        }, 1000); // refresh every 1000 milliseconds
    });
</script>