Question

I am making a dynamic questions forum and I want to refresh only the listing of the topics when a user ads a new topic , I do not want to refresh the entire page. Is that possible?

This is my markup for the table where the posts are listed:

<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>

Markup for adding a new post:

<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>

I am fetching the posts with php. Now when I add a new post with ajax I have the following code:

$('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?
    });
})

Answer 1

you basically need to PUSH the stuff to the client

you can use these 3 methods

1. from all the pages you can keep making an ajax call to check if a
   new topic is added (long polling)
2. you can try using COMET
3. there is something called web-sockets in the modern browsers u can give it a try

you can implement long polling like this

  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;
      }
  }