Отображение данных JQuery в HTML

Question

Отображение данных JQuery в HTML

0

Я использую jQuery для отображения сообщений из базы данных, это файл jquery:

function call() {
    $(".message_box").fadeIn();
    return false;
}
    function updatess() {
         $.getJSON("php/fetch.php", function(data) {
           $.each(data.result, function(){
            var message = this['message'];
            call();  
            $('div.message').html( message ); 
      });
     });
    }

и это HTML файл:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd" >
    <html>
    <head>
    <title>Sample Chat Application</title>
    <script type="text/javascript" src="/jquery.js" ></script>
    <script type="text/javascript" src="/my_js.js"></script>
    </head>
    <body>
<div class="message_box"> // some css like displayed:none; ......
        <div class="message"></div>
</div>  
  </body>
    </html>

но проблема в том, что если есть два сообщения, то отображается только последнее сообщение, и если есть много сообщений, каждый раз, когда приходит новое сообщение, он заменяет старый. но я хочу, чтобы все сообщения отображались. например, если я получаю 3 сообщения, я хочу, чтобы 3 поля отображались не один. когда я использую append вместо html, все сообщения появляются в одном поле.

user3446643 21 март 2014, в 18:57

Источник

0

$('div.message').append( message ); и перед each циклом $('div.message').empty();
A. Wolff 21 март 2014, в 17:47

Теги:

jquery

html

3 ответа

Ещё вопросы

$('div.message').append( message ); и перед each циклом $('div.message').empty();

undefined · Answer 1 · 2014-03-21T15-46-00.000Z

Вы должны использовать метод append вместо метода html который перезаписывает предыдущий контент:

function updatess() {
     $.getJSON("php/fetch.php", function(data) {
         // calling '.empty()' before the '.each()' call
         var $div = $('div.message').empty();
         $.each(data.result, function() {
            var message = this['message'];
            $div.append( message ); 
         });
    });
}

Обратите внимание, что я использовал метод .empty() для удаления старого содержимого перед .each(), если это не то, что вы хотите, и вы хотите сохранить текущий контент, вы можете удалить метод .empty().

edit: для создания и добавления элемента div с классом message для каждого сообщения:

$.each(data.result, function() {
     $(document.createElement('div'))
          .addClass('message')
          .html(this['message'])
          .appendTo('.message_box');
});

я редактирую проблему, пожалуйста, посмотрите снова.

Bill · Answer 2 · 2014-03-21T15-42-00.000Z

Вы заменяете HTML в своем div на каждую итерацию этой строкой:

$('div.message').html( message );

Вы можете обернуть сообщение в другой div, а затем добавить его:

var message = $('<div></div>').html(this['message']); 
$('div.message').append( message );

После редактирования:

Если для каждого элемента требуется новое поле для сообщения, вам нужно создать новое поле для каждого элемента.

Попробуй это:

function addMessage(message) {
    var messageBox = $('<div></div>').addClass('message_box');
    messageBox.append(message);
    $('body').append(messageBox);
    messageBox.fadeIn();
}

function updatess() {
     $.getJSON("php/fetch.php", function(data) {
       $.each(data.result, function(){
        var message = this['message'];
        addMessage(message);
  });
 });
}

я редактирую проблему, пожалуйста, посмотрите снова.
Если вы хотите новое окно сообщения для каждого элемента, вам нужно создать новое окно сообщения для каждого элемента. Взгляните на мою правку; дайте мне знать, если это поможет.
я стараюсь с этим много, но не работает

suraj rawat · Answer 3 · 2014-03-21T15-18-00.000Z

0

Пытаться:

 $('div.message').append( message );

suraj rawat 21 март 2014, в 15:18

0

я редактирую проблему, пожалуйста, посмотрите снова.
user3446643 21 март 2014, в 18:31