Insert HTML via jQuery (Chat)

Asked

Viewed 753 times

0

Guys, I’m developing a chat room with Faye. Back-end normal. Fucionando perfectly, but I have silly problem: I can not insert the messages for viewing. I will explain better:

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

How do I go adding 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>
    <script type="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, the way I recover is correct?

javascript jquery css
  • 1

    I think you need to use the .append() but without seeing your code I can’t say for sure. Add the code to the question so we can help more...

  • Post the code html and jquery to facilitate friendly understanding.

2 answers

1


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

Moreover, looking at your code it seems more logical to add lines to the table, and not new tables to 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));
    });
});
  • 1

    Your answer seemed much more explanatory. Obg!

  • 1

    And yet you won -1. There’s someone trolling around

-1

Try it like 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>");
      });   
});

  • Oops! Problem solved =) Obg @Jhonatansimões

  • I think this answer has problems... to) javascript line breaks give syntax error; b) as is being added 2 messages at a time; c) has a }); the most between the two $('.panel_msg').append

  • More than that is a problem in the user’s business logic, which has no influence on the answer. And @Mike said it worked.

  • Don’t take this the wrong way, I commented because I think it can be improved, it’s just [Dit]. If you find something wrong in my answer you can also explain, it is better to have negative votes with explanation than without explanation :)

  • Sure bro, you’re right... however I can’t change the way the user who asked programmed, I abstained only on the question, because I don’t even know how it is stylized on the screen, maybe by changing his html, or tags may have a negative impact on the style he applied to his project.

  • 1

    @Jhonatansimões even trying to use his code gives syntax error. It has to be like this: https://jsfiddle.net/rycwtn2y/1/

Show 1 more comment

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.