web-dev-qa-db-fra.com

Comment wp_query postes avec ajax

J'ai une barre de navigation avec des catégories. Lorsque je survole une catégorie, je souhaite interroger le post le plus récent en utilisant ajax.

html marquer

<ul>
    <li id="alabama">Alabama</li>
    <li id="banana">Banana</li>
    <li id="bible">Bible</li>

</ul> 

<div id="main"></div>

appel ajax

$( "#alabama" ).click(function() {
 var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
      $.post(
          ajaxurl, 
          {
              'action'  :   'fetch_posts',
              'fetch' :   'alabama',
          }, 
          function(output){
            $('#main').html(output);
          });
});
enter code here

php dans functions.php

function import_post() {
    if($_REQUEST['fetch'] == 'alabama'){
        $query_args = array(
                'post_type' => 'post',
                      'tax_query' => array(
                      'relation' => 'AND',
                          array(
                              'taxonomy' => 'category',
                              'field'    => 'slug',
                              'terms'    => array( 'news' ),

                          ),
                          array(
                              'taxonomy' => 'category',
                              'field'    => 'slug',
                                  'terms'    => array( 'alabama' ),
                          ),
                      ),
            );
            $the_query = new WP_Query( $query_args ); 

        if ( $the_query->have_posts() ) :
             while ( $the_query->have_posts() ) : $the_query->the_post();
                $return_str.= '<div class="col-md-3">';
                $return_str.= '<li>' . get_the_title() . '</li>';
                $return_str.='</div>';
            endwhile;
            wp_reset_postdata();
            else :
                $return_str.= 'No posts found';
        endif;
    } 


    echo $return_str;
    die;
}



add_action('wp_ajax_fetch_posts', 'fetch_posts');

add_action('wp_ajax_nopriv_fetch_posts', 'fetch_posts');
wp-queryajax
1
Tsea

Je voudrais faire une série de commentaires, mais la longueur totale serait trop longue pour un commentaire, je dois donc écrire une réponse.

  1. Vous devez indiquer ce qui fonctionne et ce qui ne fonctionne pas et nous dire ce que vous avez essayé de faire fonctionner. Regarder votre code est trop général.

  2. Dans wordpress, l'alias jQuery $ ne fonctionne généralement pas. Toutefois, si vous avez la console Outils de développement ouverte, vous devriez recevoir un message d'erreur. J'utilise toujours jQuery au lieu de $ uniquement pour éviter les erreurs stupides.

  3. Vous indiquez que vous souhaitez survoler une catégorie, mais votre déclencheur est au clic.

    $( "#alabama" ).click(function() {

    Si vous n'obtenez aucun comportement de survol, essayez de cliquer sur.

  4. Votre appel AJAX semble bon, bien que la fonction de rappel semble placer les données au mauvais endroit. Si vous voulez que la requête survienne en survol, la output ne devrait-elle pas aller dans une info-bulle?

  5. L'action dans l'appel AJAX consiste à fetch_posts mais votre fonction PHP s'appelle import_post. Ces deux fonctions doivent être identiques pour que AJAX puisse fonctionner.

  6. Votre fonction PHP utilise la variable $_REQUEST[]. Puisque vous envoyez le AJAX via POST, vous pouvez utiliser la variable $_POST[]. Cela ne corrigera probablement pas, mais rien ne changera, mais pour moi, cela a plus de sens (le code est plus lisible).

  7. Lorsque je développe un appel AJAX, je configure l'appel jQuery AJAX, comme vous l'avez fait. Ensuite, je crée la fonction PHP qui gère l'appel AJAX. Tout d'abord, je viens de faire écho aux données que j'ai envoyées via AJAX. Une fois que je sais que cela fonctionne, alors j’écris le code SQL, je fais écho pour vérifier qu’il n’ya pas d’erreur de syntaxe. À ce stade, je récupère les données que je veux et les renvoie. La dernière étape consiste à afficher correctement les données dans la fonction de rappel AJAX.

OK, il y a votre tutoriel AJAX. J'espère que ça aide.

4
scott