Insert HTML via jQuery (Chat)

Question

Insert HTML via jQuery (Chat)

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

Well, I'm developing a Chat with Faye. On the back end everything is normal. Fucking perfectly, but I'm having a silly problem: I can not insert the messages for viewing. I'll explain better:

When I retrieve the messages I enter a <div class="panel_msg> , inside a table (I know it's not the most viable alternative, but it's just a test). So by using the html() function it jQuery does the job normally, but when another client sends a message it does not add another table in the div, it just adds the text next to the existing text.

How do I add table after table?

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>iCube &bull; Beta</title>
    <script type="text/javascript" src="http://localhost:8000/faye/client.js"></script><scripttype="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <!-- Carrega Styles css -->
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    <link rel="stylesheet" type="text/css" href="css/campo_texto.css">
</head>
<body>
    <!-- Menu -->
    <div class="menu">
        <ul>
            <!-- Em breve -->
        </ul>
    </div>
    <!-- Fim menu -->
    <!-- Campo de texto -->
    <div class="campo_texto">
        <table cellspacing="10">
            <tr>
                <td><input type="text" id="texto"></td>
                <td><button id="enviar">Enviar</button></td>
            </tr>
        </table>
    </div>
    <!-- Fim campo de texto -->
    <div class="panel_msg">
         <!-- As mensagens veem aqui -->
    </div>
</body>
</html>

jQuery

var client = new Faye.Client('http://localhost:8000/faye');

$(function () {
    $('#enviar').click(function(){

         var mensagem = $('#texto').val();

         client.publish('/faye', { 'texto': mensagem });

            client.subscribe('/faye', function (message) {

                $('.panel_msg').html("
                <table cellspacing=\"12\" > 
                    <tr>
                        <td class=\"msg_txt\">"+message.texto+"
                        </td>
                    </tr>
                <table>");
            }); 

            $('.panel_msg').html("
            <table cellspacing=\"12\" >
                <tr>
                    <td class=\"msg_txt\">"+message.texto+"</td>
                </tr>
            </table>");
      });   
});

PS: I am sending a JSON there, how do I recover it is correct?

javascript jquery css

asked by anonymous 05.01.2016 / 12:46

2 answers

-1

Try this, using append

var client = new Faye.Client('http://localhost:8000/faye');
$(function () {
    $('#enviar').click(function(){

         var mensagem = $('#texto').val();

         client.publish('/faye', { 'texto': mensagem });

            client.subscribe('/faye', function (message) {

                $('.panel_msg').append("
                <table cellspacing=\"12\" > 
                    <tr>
                        <td class=\"msg_txt\">"+message.texto+"
                        </td>
                    </tr>
                <table>");
            }); 

            $('.panel_msg').append("
            <table cellspacing=\"12\" >
                <tr>
                    <td class=\"msg_txt\">"+message.texto+"</td>
                </tr>
            </table>");
      });   
});

05.01.2016 / 12:59

using array_push in cakephp 2x Withdraw currency formatting and get only the number in PHP

score 1 · Accepted Answer

The .html() method replaces content, the .append() method adds content.

Furthermore, looking at your code seems more logical, you add lines to the table, not new tables with each message. So I suggest you have it in HTML:

<div class="panel_msg">
    <table cellspacing="12">
        <!-- As mensagens veem aqui -->
    </table>
</div>

and in JavaScript:

var client = new Faye.Client('http://localhost:8000/faye');

function novaLinha(texto) {
    var tr = $('<tr />');
   var td = $('<td />', {
        text: texto,
        class: 'msg_txt'
    });
    return tr.append(td);
}

$('#enviar').click(function() {
    var mensagem = $('#texto').val();
    client.publish('/faye', {
        'texto': mensagem
    });
    client.subscribe('/faye', function(message) {
        $('.panel_msg table').append(novaLinha(message));
    });
});