web-dev-qa-db-fra.com

Ajax loop refresh on click

J'affiche une boucle de publication aléatoire sur une page. Je voudrais mettre un lien "actualiser" pour actualiser le contenu de la boucle via ajax.

Est-ce possible?

Ceci est ma boucle si cela aide:

            <ul id="content-inner" class="thumb-grid clearfix">
            <?php query_posts('posts_per_page=20&orderby=Rand'); ?>
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo $my_image_url = get('thumbnail'); ?>" alt="" />
                        <span class="title"><?php the_title(); ?></span>
                        <span class="feat"><?php $articletags = strip_tags(get_the_tag_list('',', ',''));echo $articletags;?></span>
                    </a>
                </li>
            <?php endwhile;?>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
            </ul>
loopajax
2
Carpy

Ça ne devrait pas être trop compliqué. Premièrement: créez un fichier javascript et ajoutez ceci:

jQuery(document).ready(function($){
  $('#refresh-links-id').click(function(e){
    e.preventDefault();
    $.post(ajaxurl,{action:'jpb_random_loop'}, function(data){
      $('#content-inner').fadeOut(250).empty().append( data ).fadeIn(250);
    });
  });
});

Enregistrez ce fichier dans votre répertoire de thème quelque part (peut-être aussi dans un sous-répertoire). Pour que cela fonctionne, le lien d'actualisation ne doit pas être à l'intérieur de ul#content-inner. JQuery post appel assez basique, cependant.

Ensuite, ajoutez ceci au fichier functions.php de votre thème:

function jpb_template_redirect(){
  if( <conditions under which this javascript should execute> ){
    wp_enqueue_script( 'random-loop', '<url to the javascript file above>', array( 'jquery' ), '1.0' );
  }
}

function jpb_random_loop_cb(){
  query_posts('posts_per_page=20&orderby=Rand');
  if (have_posts()) : while (have_posts()) : the_post(); ?>
    <li>
      <a href="<?php the_permalink(); ?>">
      <img src="<?php echo $my_image_url = get('thumbnail'); ?>" alt="" />
      <span class="title"><?php the_title(); ?></span>
      <span class="feat"><?php $articletags = strip_tags(get_the_tag_list('',', ',''));echo $articletags;?></span>
      </a>
    </li>
  <?php endwhile; endif;
  die();
}

add_action( 'template_redirect', 'jpb_template_redirect' );
add_action( 'wp_ajax_jpb_random_loop', 'jpb_random_loop_cb' );
add_action( 'wp_ajax_nopriv_jpb_random_loop', 'jpb_random_loop_cb' );

Cela va tout lier ensemble. Assurez-vous simplement que la logique est correcte dans la fonction template_redirect afin que le javascript soit inclus dans les bonnes pages.

3
John P Bloch

Ce plugin semble faire ce que vous cherchez.

http://wordpress.org/extend/plugins/wp-ajax-random-posts/

Si vous ne souhaitez pas utiliser le plug-in, vous pouvez toujours vérifier le code du lien d'actualisation et essayer de le faire fonctionner pour vous.

1
PNMG