Load refresh-free page post with AJAX and JQUERY

Question

I am in need of a Wordpress help as I would like to load posts without refresh or reload page. I have a menu that returns posts from a certain category in a <div> left and would like to be able to press the <div> a right the content referring to the hyperlink that was clicked. Moreover, this is inside a fancybox, which is why there can be no Reload. The HTML structure is this:

<div id="floatpost" role="main"> 
  <!-- section -->
  <section>
    <div class="rReleases">
      <div id="menu" class="rPosts">
        <ul>
            <?php
                $recent = new WP_Query("cat=7");
                while ($recent->have_posts()) : $recent->the_post();
            ?>
            <li>
              <p class="title">
                <?php the_time('j / m'); ?> - <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </p>
            </li>
            <?php
                endwhile;
            ?>
        </ul>
      </div>
      <div id="content" class="rPost">

      </div>
    </div>
  </section>
  <!-- /section --> 
</div>

Answer 1

I think that’s what you need:

$('#menu a').on('click', function () {
  /* to-do: mostrar ao usuário que há conteúdo sendo carregado
  se não o ele irá clicar novamente pensando que ocorreu um erro */

  // carrega o conteúdo
  $('#content').load(this.href);

  // evita que o link seja aberto normalmente
  return false;
});

Answer 2

An alternative:

$("a").click(function(e){
  $('#content').load(this.href);
  e.stopPropagation();
  e.preventDefault();
});

Answer 3

If you just want to load the page contents and display beside:

        $(document).ready(function(e) {

            $('#menu-lateral .post').click(function(e){
                var page = $(this).attr('href');

                $('#janela-direita').html('');

                $('#janela-direita').load(page, function(x, y, z){
                    $('#janela-direita').trigger('create');
                });
                e.preventDefault();
            });
        });