2011-01-09 8 views
0
<div class="home-thumbs bottom-thumbs"> 
<?php $home_query_bottom = new WP_Query("cat=&showposts=20&offset=5"); $b = 0; ?> 
<ul class="thumbs"> 
    <?php while ($home_query_bottom->have_posts()) : $home_query_bottom->the_post(); 
     $do_not_duplicate = $post->ID; $b++; ?> 

     <li class="post-<?php the_ID(); ?> thumb"><?php get_the_image(array('custom_key' => array('thumbnail'), 'default_size' => 'thumbnail', 'width' => '160', 'height' => '160')); ?></li> 
    <?php endwhile; wp_reset_query(); $b = 0; ?> 
</ul> 
</div> 
<div id="output"></div> 
<script type="text/javascript"> 


$('.go-right').click(function(){ 

$.ajax({ 

      type: "POST", 
      url: "process_thumbs.php", 
      data: "showposts=25", 
      success: function(html){ 
       $("#output").html(html); 
      } 

}); 
}); 
</script> 

// process_thumbs.php 
    <body> 

    <?php $numposts = $_POST['showposts']; ?> 
    <div><?php echo "this is the amount of posts to be shown: $numposts"; ?></div> 
    </body> 

Cela ressemble à un simple appel ajax. .go-right existe il est juste dans un autre fichier et j'ai testé que le clic est en cours d'exécution. Cet appel ajax ne fonctionne fondamentalement pas. Peut-être que quelqu'un pourrait identifier si mon code est faux.mon jquery ajax ne fonctionne pas sur mon site wordpress

Idéalement, je veux prendre cette boucle wp-Query et utiliser ajax pour exécuter cette boucle à nouveau avec différents points d'affichage et de décalage si quelqu'un clique.

Répondre

0

Assurez-vous que .go-right est avant le code jQuery ou (mieux) envelopper votre jquery dans

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

ou similaire, pour vous assurer que le gestionnaire est vraiment attaché à votre élément .go-right

Ne pas afficher les balises <body> dans votre process_thumbs.php, peut-être que ceci est source de confusion pour jQuery.

Vérifiez les onglets de la console Firebug/net, pour vous assurer que la demande est réellement envoyée.

Ajoutez un rappel error à votre .ajax pour vous assurer que votre appel ajax est réellement exécuté.


Oui, utiliser urls absolue, mais avec une fonction d'aide wordpress:

... 
url: '<?php echo get_bloginfo('url').'/wp-content/myplugin/mycallback';?>' 
... 

De cette façon, toutes vos URL seront par rapport à l'URL racine Wordpress.

+0

merci. J'ai vérifié les outils de développement de chrome et il dit mon erreur process_thumbs.php 404. dit www.url.com/process_thumbs.php, ce qui n'est pas l'url. Je suppose que dans wordpress vous avez besoin de chemins absolus? – Adam

+0

Mis à jour ma réponse –

-2

Dans Wordpress (j'utilise la version 3.0 et plus), en raison de conflits avec d'autres bibliothèques javascript (c.-à-prototype) vous devez écrire:

$JQuery('.go-right').click(function(){ 

au lieu de

$('.go-right').click(function(){ 

également , vérifiez auprès de Firebug pour vous assurer que le lien vers votre bibliothèque Jquery est correct.

Une chose ... Wordpress comprend déjà jQuery, vous pouvez l'obtenir par écrit:

<?php wp_enqueue_script("jquery"); ?> 

<?php wp_head(); ?> 

La première ligne doit aller avant la deuxième ligne (wp_head()) ou bien elle ne fonctionnera pas .

0

Je récrire votre code à l'intérieur du document gestionnaire prêt:

$ (function() { Votre code });

Cela fonctionne bien.

Donc, c'est un problème lié à la position de votre code, OU vous mal épeler quelque chose.

suit mon code de test:

<html> 
    <head> 
    <script type="text/javascript"> 

    $(function() { 

    $('.go-right').click(function(){ 

     $.ajax({ 

        type: "POST", 
        url: "process_thumbs.html", 
        data: "showposts=25", 
        success: function(html){ 
         $("#output").html(html); 
        } 

     }); 
    }); 

     }); 

    </script> 

    </head> 
    <body > 


    <div id="output"></div> 

    <a class="go-right">RIGHT</a> 

    </body> 
    </html> 
Questions connexes