Chat application won't load every 10 seconds in jquery

Question

I am creating a chat application and I have a menu at the left that contains the people which I want to chat with. I used JQuery and ajax it's working properly it's getting the messages but it wont load unless or until I click at the contact, it will load. I want it to load every 10 seconds.

This is my JQuery code:

    $('.contact').click(function(){
    $('.box').show();
    var username = $(this).find('.username').attr('id');
    var id = $(this).closest('.contact').attr('id');
    $('.name').html(fnalnc);
    $.ajax({
            url: 'ajax/chat.php',
            type: 'POST',
            data: {'id':id},
            async: false,
            cashe: false,
            success: function(data){
                $('#chat').html(data);
            }
        });
    });

And the $(.box).show(); it will just show 1 box that comes to the bottom and I want it to show more than 1 box by clicking at the contact just like Facebook.

HTML:

<div class='contact' id='<?php echo "$user_id";?>'></div>
<span class='username' id='<?php echo "$username";?>'><?php echo "$username";?></span>
<div id='chat'></div>

Answer 1

You need to split out the code that does the Ajax call into it's own function. Then, you can call it both from a click and a setInterval like below.

Edit: This is a snippet taken from my fiddle.

Essentially, it wires up each box as it's own chat container, and has an interval timer on each that only updates when the box is visible.

$(document).ready(function () {
    var box = $('.box')[0]; //single copy of the target box
    $('.contact').click(function () {
        var id = $(this).closest('.contact').attr('id'); // load the user id
        if ($(".chat-windows").find("#" + id + "-window").exists()) {
            if($(".chat-windows").find("#" + id + "-window").is(":visible")) {
            //Do nothing, because the window is already there
            } else {
                $(".chat-windows").find("#" + id + "-window").fadeIn(200).css("display", "inline-block");
            }
        } else {
            //This is a new box, so show it
            var newBox = box.cloneNode();
            var windows = $(".chat-windows");
            $(newBox).find(".chat-header").text(id);
            $(newBox).prop("id", id + "-window");
            //var username = $(this).find('.username').attr('id');                   
            windows.append($(newBox));
            $(newBox).fadeIn(200).css("display", "inline-block");
            updateChat({
                ContactID: id
            });
            setInterval(function() {

                if($(newBox).is(":visible")) {
                    updateChat({ContactID: id});
                } else {
                    //do nothing so we aren't updating things that aren't seen and wasting time
                } // end if/else
            }, 10000); // fire every 10 seconds for this box
        } // end if/else

    });
    $(document).on("click", ".close-chat", function(e) {
        $(e.currentTarget).parent().fadeOut(100)[0].removeNode(); 
    });
});

//Global prototype function to determine if selectors return null
$.fn.exists = function () {
    return this.length !== 0;
}; // end function exists

function updateChat(args) {
    //Do your Ajax here
    /*$.ajax({
            url: 'ajax/chat.php',
            type: 'POST',
            data: {
                'id': args.ContactID
            },
            async: false,
            cashe: false,
            success: function (data) {
                $('#chat').html(data);
            }
        });*/
    $("#" + args.ContactID + "-window").find(".messages").append("<li>" + "My Message" + "</li>");
}

I have created a fiddle that demonstrates this here: http://jsfiddle.net/xDaevax/7efVX/

I'm not clear on exactly which parts of your code should go in the ChatFunction, but you should be able to get the general idea from this code and my example regardless of what you are trying to accomplish with the chat.

Answer 2

you must use set inter val in js work with milisec:

setInterval(function(){$('.box').show();}, 10000);

$('.box').show(); run every 10 sec 10000mil = 10 sec

or if need some other code you can replace with $('.box').show(); in this code.

and setInterval info is here