7

Estou precisando de uma ajuda em Wordpress pois eu gostaria de carregar posts sem refresh ou reload da página. Tenho um menu que retorna posts de uma determinada categoria em uma <div> a esquerda e gostaria de conseguir carregar na <div> a direita o conteúdo referente ao hyperlink que foi clicado. Além do mais, isto está dentro de uma fancybox, motivo pelo qual não pode haver reload. A estrutura HTML é esta:

<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>
1
  • 1
    É bem diferente, está em um contexto totalmente diferente. Commented 18/02/2014 às 15:14

3 Respostas 3

4

Acho que é isso o que você precisa:

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

Uma alternativa:

$("a").click(function(e){
  $('#content').load(this.href);
  e.stopPropagation();
  e.preventDefault();
});
2
  • Poderia dar uma explicação sobre o código?
    – rray
    Commented 18/02/2014 às 18:56
  • É a mesma coisa do meu: usar return false no jQuery é exatamente igual a usar evt.stopPropagation(); evt.preventDefault();... não, há uma diferença, o seletor é outro: esse pode acabar dando problemas com outros elementos. Commented 18/02/2014 às 19:09
0

Se você quer só carregar o conteúdo da página e exibir ao lado:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .