как обновить часть сайта без обновления всей страницы после jquery ajax

Я создаю форум с динамическими вопросами и хочу обновлять только список тем, когда пользователь объявляет новую тему, я не хочу обновлять всю страницу. Это возможно?

Это моя разметка для таблицы, в которой перечислены сообщения:

<table class="topics">
    <tr>
        <th width="5%"></th>
        <th width="45%"><a href="">Subject</a></th>
        <th width="15%"><a href="">Author</a></th>
        <th width="10%"><a href="">Replies</a></th>
        <th width="10%"><a href="">Views</a></th>
    </tr>
    <?php foreach ($discussions as $discussion) : ?>
    <tr class="alt">
        <td><a href=""><img src="<?= site_url('assets/images/featured-posts-icon.png') ?>" /></a></td>
        <td><a href="<?= site_url('discussion/test/' . $discussion->stub) ?>" class="subject"><?php echo $discussion->title; ?></a></td>
        <td><a href=""><?php echo $discussion->author; ?></a></td>
        <td><?php echo $discussion->replies; ?></td>
        <td><?php echo $discussion->views; ?></td>
    </tr>
    <?php endforeach; ?>
</table>

Разметка для добавления нового поста:

<input type="text" name="topic" id="topic" />
<ul class="editor-tools">
    <li class="bold"></li>
    <li class="italic"></li>
    <li class="underscore"></li>
    <li class="list"></li>
    <li class="quote"></li>
</ul>
<textarea id="thread-content"></textarea>
<a href="" class="button create-discussion">Start discussion</a>

Я получаю сообщения с помощью php. Теперь, когда я добавляю новый пост с помощью ajax, у меня есть следующий код:

$('a.create-discussion').on('click', function(e){
    e.preventDefault();
    var title = $('input#topic').val(),
        courseId = 1,
        message = $('textarea#thread-content').val();

    $.ajax({
        type : 'POST',
        url : ROOT_PATH + 'main/ajaxjson/create_discussion',
        data : {title: title, courseId: courseId, message: message},
        dataType: 'json'
    }).done(function(result){
        // do something here?
    });
})

php jquery page-refresh jquery-selectors
person Mythriel    schedule 12.03.2012    source источник
comment
в чем именно твоя проблема?   -  person mas-designs    schedule 12.03.2012

Ответы (3)


arrow_upward
1
arrow_downward

вам в основном нужно PUSH материал клиенту

вы можете использовать эти 3 метода

  1. со всех страниц вы можете продолжать делать вызов ajax, чтобы проверить, добавлена ​​ли новая тема (длительный опрос)
  2. вы можете попробовать использовать COMET
  3. в современных браузерах есть что-то, называемое веб-сокетами, вы можете попробовать

вы можете реализовать длинный опрос, подобный этому

  window.setInteval("func()",10000);

  function func()
  {
      //ajax call to you server which returns the latest posts
      str = xhr.responseText;

      if(str)
      {
           document.getElementById("id").innerHTML += str;
      }
  }
person vireshas    schedule 12.03.2012
comment
как я могу реализовать № 1? любые указатели? веб-сокеты работают не во всех браузерах - person Mythriel; 12.03.2012
comment
вы можете использовать socketio :) длинный опрос выглядит примерно так: u use document.setInterval(func(),10000); вызовите функцию, которая делает вызов ajax каждые 10 секунд, и эта функция возвращает последний вопрос. Я отредактирую свой ответ, если хотите! - person vireshas; 12.03.2012

arrow_upward
1
arrow_downward

Вам нужен сценарий на стороне сервера, чтобы генерировать ТОЛЬКО разметку для той части страницы, которую вы хотите «обновить».

Затем используйте jQuery, чтобы установить внутренний HTML-код этой области в соответствии с тем, что возвращается сервером после того, как вы проделали некоторую работу.

PS Приведите в порядок свой вопрос, лень в будущем не пойдет вам на пользу.

person deed02392    schedule 12.03.2012

arrow_upward
-2
arrow_downward

Вы должны использовать вместо done()

success:function(){
       // do something here
}

как в документации jQuery:

$.ajax({
  url: 'http://fiddle.jshell.net/favicon.png',
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( 'text/plain; charset=x-user-defined' );
  },
  success: function( data ) {
    if (console && console.log){
      console.log( 'Sample of data:', data.slice(0,100) );
    }
  }
});

Функция успеха (данные, textStatus, jqXHR), Массив

Функция, которая будет вызываться в случае успешного выполнения запроса. В функцию передаются три аргумента: данные, возвращенные с сервера, отформатированные в соответствии с параметром dataType; строка, описывающая статус; и объект jqXHR (в jQuery 1.4.x, XMLHttpRequest). Начиная с jQuery 1.5, настройка успеха может принимать массив функций. Каждая функция будет вызываться по очереди. Это событие Ajax.

person mas-designs    schedule 12.03.2012
comment
На самом деле обратные вызовы success(), error() и complete() будут объявлены устаревшими для некоторых функций Ajax в jQuery 1.8. Чтобы подготовить код к их возможному удалению в будущем, нет ничего плохого в использовании вместо них done(), fail() и always(). - person adeneo; 12.03.2012
comment
@adeneo спасибо за подсказку! Я этого не знал! Но в настоящее время выпущена версия 1.7.1, но знаете ли вы, когда выйдет версия 1.8? - person mas-designs; 12.03.2012
comment
Неа! Все, что я знаю, это то, что можно использовать новые версии обратных вызовов Ajax (я полагаю, что это было с версии 1.6), и что об этом говорится на веб-сайте jQuery. jQuery 1.7 всего несколько месяцев, а 1.7.2rc1 была выпущена на прошлой неделе, так что 1.8, вероятно, еще не скоро выйдет? - person adeneo; 12.03.2012
comment
даже если вы не знаете, что вы должны использовать лучшие практики, а лучшие практики используют .done() - person Mythriel; 12.03.2012
comment
@Mythriel Я никогда не слышал и никогда не читал также на SO, что .done() является обычным использованием или не является передовой практикой. - person mas-designs; 12.03.2012