web-dev-qa-db-fra.com

Moyen approprié pour charger un seul message via Ajax?

Je charge des articles simples via Ajax dans une div que j'ai configurée sur ma page d'index. Tout fonctionne bien à cet égard. Je souhaite utiliser history.js pour transmettre/masquer l'état. Ainsi, si les utilisateurs entrent example.com/my-post dans la barre d'adresse, la page d'index est chargée avec la publication déjà chargée dans la div. C'est là que réside le problème.

Ceci est une version simplifiée de la fonction que j'utilise (l'actuel inclut également une diapositive): 

function my_load_ajax_content () {

    $args = array(
        'p' => $_POST['post_id'],
        'post_type' => 'projects'
        );

    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">
        <div id="project-content">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            <?php the_content(); ?>
        </div>
    </div><!-- .post-container -->

    <?php
    endwhile;
    wp_die();
}

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

C'est comme ça que je l'appelle: 

$('.post-link').on('click', function(e) {
    e.preventDefault();

    var post_id = $(this).data('id'), // data-id attribute for .post-link
        projectTitle = $(this).data('title'), // data-title attribute for .post-link
        projectSlug = $(this).data('slug'), // data-slug attribute for .post-link
        ajaxURL = site.ajaxurl; // Ajax URL localized from functions.php

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        context: this,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').html(response);
            return false;
        }
    });
});

Voici la boucle 

<?php $home_query = new WP_Query('post_type=projects');

while($home_query->have_posts()) : $home_query->the_post(); ?>

    <article class="project">
        <?php the_post_thumbnail( 'home-thumb' ); ?>
        <div class="overlay">
            <a class="post-link expand" href="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>" data-slug="<?php global $post; echo $post->post_name; ?>">+</a>
        </div>
    </article>

<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>

Je me demande si je m'y prends mal. Je suis confus et une partie de moi pense que je devrais mettre tout le code HTML dans mon modèle single et l'appeler à partir de la fonction Ajax. Mais dans ce cas, je ne sais pas exactement comment cela fonctionnerait non plus, car si l'utilisateur entre example.com/my-post dans son navigateur, il ne chargera que la publication unique sans tout le code HTML de la page d'index. J'espère que je l'explique correctement. Est-ce que quelqu'un peut me montrer comment c'est fait?

jqueryajaxsingle
1
j85

Voici mon avis: Chargez-le dans votre single.php pourquoi utiliser ajax du tout? Google ne pourra pas le voir (en utilisant la plupart des robots).

Dans tous les cas, voici le bon moyen de renvoyer les données ...
Veuillez noter que vous pouvez utiliser get_post ou wp_query. jusqu'à toi.

JS Part: 

   jQuery(document).ready(function($) {
    $.post(ajax_object.ajaxurl, {
        action: 'my_load_ajax_content ',            
        post_id: post_id  // << should grab this from input...

    }, function(data) {

        var $response   =   $(data);
        var postdata    =   $response.filter('#postdata').html();

        $('.TARGETDIV').html(postdata);
    });
});

PHP Partie: 

function my_load_ajax_content () {

    $pid        = intval($_POST['post_id']);
    $the_query  = new WP_Query(array('p' => $pid));

    if ($the_query->have_posts()) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            $data = '
            <div class="post-container">
                <div id="project-content">
                    <h1 class="entry-title">'.get_the_title().'</h1>
                    <div class="entry-content">'.get_the_content().'</div>
                </div>
            </div>  
            ';

        }
    } 
    else {
        echo '<div id="postdata">'.__('Didnt find anything', THEME_NAME).'</div>';
    }
    wp_reset_postdata();


    echo '<div id="postdata">'.$data.'</div>';
}

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

J'espère que cela t'aides.
encore une fois, je ne recommanderais pas cela mais ... cela devrait fonctionner.

REVISION POUR OBTENIR POST ON CLICK

premier: le bouton/lien - devrait être quelque chose comme

<button class="get_project" data-postid="POSTID HERE!">PROJECT NAME</button>

deuxième: le code js écoutant un clic:

jQuery(function($){

    $('.get_project').click(function() {

        var postid = $(this).attr('data-postid');

        $.post(ajax_object.ajaxurl, {
            action: 'my_load_ajax_content ',            
            postid: postid
        }, function(data) {
            var $response   =   $(data);
            var postdata    =   $response.filter('#postdata').html();
            $('.TARGETDIV').html(postdata);
        });

    })

});

Le code php n'a pas besoin de changer - il suffit de définir les données dont vous avez besoin.

1
Sagive SEO