Little javascript / ajax / mysql chat

Question

For my site I want to have a little chat / support field. At the moment I can write and also save it right to the database.

But I want to have it, that if I open the site again the old text come from the database. But how is the best way to do that? I also think my Array is false, because I only get one and not all data back from the database.

My javascript testcode:

    initChat: function () {

                var cont = $('#chats');
                var list = $('.chats', cont);
                var form = $('.chat-form', cont);
                var input = $('input', form);
                var btn = $('.btn', form);

                var handleClick = function (e) {
                    e.preventDefault();

                    var text = input.val();
                    if (text.length == 0) {
                        return;
                    }

                    var time = new Date();
                    var time_str = time.toString('dd.MM.yyyy - H:mm')+ " Uhr";
                    var tpl = '';
                    tpl += '<li class="out">';
                    tpl += '<img class="avatar" alt="" src="assets/img/avatar.png"/>';
                    tpl += '<div class="message">';
                    tpl += '<span class="arrow"></span>';
                    tpl += 'Meine Frage&nbsp;';
                    tpl += '<span class="datetime">vom ' + time_str + '</span>';
                    tpl += '<span class="body">';
                    tpl += text;
                    tpl += '</span>';
                    tpl += '</div>';
                    tpl += '</li>';

                    var msg = list.append(tpl);

                    var time_str_new = time.toString('yyyy-MM-dd H:mm:ss');             

                    $.ajax({                                      
                    type: "POST",                                    
                    url: '../support.php',
                    data: {datum: time_str_new, text: text},
                    dataType: 'json',
                    success: function(data)
                    {
                    input.val("");
                    }
                    });

                    $('.scroller', cont).slimScroll({
                        scrollTo: list.height()
                    });
                }

My php testscript:

$kundenid = KUNDENID;

$query = "INSERT INTO support set datum = '$datum', kunde = '$kundenid', text = '$text', typ = 'kunde'";
$result = mysql_query($query,$db);

$querysup = "SELECT id, datum, kunde, text, typ FROM support WHERE kunde = '$kundenid'";
$resultsup = mysql_query($querysup,$db);

while($rowsup = mysql_fetch_array($resultsup)) {
$datum = $rowsup['datum'];
$text = $rowsup['text'];
$typ = $rowsup['typ'];

$data = array("datum"=>$rowsup['datum'], "text"=>$rowsup['text'], "typ"=>$rowsup['typ']);
}

echo json_encode($data);

---

Ok now I have this code. If I post a new text it show me all posts from database. But I need it that the data from mysql still there before my first post.

    initChat: function () {

        var cont = $('#chats');
        var list = $('.chats', cont);
        var form = $('.chat-form', cont);
        var input = $('input', form);
        var btn = $('.btn', form);

        var handleClick = function (e) {
            e.preventDefault();

            var text = input.val();
            if (text.length == 0) {
                return;
            }

            var time = new Date();
            var time_str = time.toString('dd.MM.yyyy - H:mm')+ " Uhr";
            var tpl = '';
            tpl += '<li class="out">';
            tpl += '<img class="avatar" alt="" src="assets/img/avatar.png"/>';
            tpl += '<div class="message">';
            tpl += '<span class="arrow"></span>';
            tpl += 'Meine Frage&nbsp;';
            tpl += '<span class="datetime">vom ' + time_str + '</span>';
            tpl += '<span class="body">';
            tpl += text;
            tpl += '</span>';
            tpl += '</div>';
            tpl += '</li>';

            var msg = list.append(tpl);

            var time_str_new = time.toString('yyyy-MM-dd H:mm:ss');             
            $.ajax({                                      
            type: "POST",                                    
            url: 'support.php',
            data: {datum: time_str_new, text: text},
            dataType: 'json',
            success: function(data)
            {
            var myArray = data;
            for (var i = 0; i < myArray.length; i++) {

            var datum = new Date(myArray[i].datum);

            var tpl = '';
            tpl += '<li class="out">';
            tpl += '<img class="avatar" alt="" src="assets/img/avatar.png"/>';
            tpl += '<div class="message">';
            tpl += '<span class="arrow"></span>';
            tpl += 'Meine Frage&nbsp;';
            tpl += '<span class="datetime">vom ' + datum.toString('dd.MM.yyyy - H:mm:ss')+ ' Uhr' + '</span>';
            tpl += '<span class="body">';
            tpl += myArray[i].text;
            tpl += '</span>';
            tpl += '</div>';
            tpl += '</li>';
            var msg = list.append(tpl);
            }
            }
            });

Answer 1

But how to load it from the array to my javascript... so if I refresh the page the values from array are in my "Chatbox"

The missing part could be a simple "assign" operation like

var chatArr=<?PHP echo json_encode($data) ?>;

in a <script type="language/JavaScript"> section, which you can insert after you have dealt with all the PHP stuff in the document. You should make sure of course that nothing "unwanted" gets into $data. After that you can do whatever you want to do with the JavaScript Array/Object in a $(function(){...}) section anywhere else in the document.

There are of course also dedicated JSON parsers which will also take care of Date objects. The simple assign will only generate Stings or numeric contents in the JavaScript object, see here.