dsebao
1/8/2014 - 4:51 AM

Load post with ajax in WordPress

Load post with ajax in WordPress

<?php get_header();?>
<div id="ajaxpost">
    <div class="content">
        
    </div>
</div>
<br/><br/>
<div id="main">
    <?php if (have_posts()) : while (have_posts()) : the_post();?>

        <article>
            <h2>
                <a class="link" data-id="<?php the_ID();?>" href="<?php the_permalink();?>">
                    <?php the_title();?>
                </a>
            </h2>
            <div class="content">
                <?php the_excerpt();?>
            </div>
        </article>
    <?php endwhile; endif;?>
             
</div>

<?php get_footer();?>
<?php 

//Cargo jquery

function agregar_js() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
		wp_enqueue_script('jquery');
	}
}
add_action('wp_enqueue_scripts', 'agregar_js');


//Agrego el script del ajax loop
function registrar_ajaxLoop_script() { 
	//cargo el script para las llamadas ajax 
    wp_register_script('ajaxLoop',get_stylesheet_directory_uri() . '/js/ajaxLoop.js',array('jquery'));
    wp_enqueue_script('ajaxLoop');

    //defino la url del admin_ajax.php de WP
    $php_array = array('url' => admin_url( 'admin-ajax.php' ) );
  	wp_localize_script( 'ajaxLoop', 'mi_ajax', $php_array ); //mi_ajax.url sera la variable, ajaxloop es asociado al script
}  
add_action('wp_enqueue_scripts', 'registrar_ajaxLoop_script');  

//Funcion que carga el post
function cargar_post() {
	$args = array( 'p' => $_POST['thepost']);
  	$q = new WP_Query( $args );
  	while( $q->have_posts() ) : $q->the_post();?>

    <h2><?php the_title(); ?></h2>
    <div class="entry-content">
    	<?php the_content(); ?>
    	<div class="clearfix"></div>
    </div>

  	<?php endwhile;exit;
}

add_action( 'wp_ajax_cargar_post', 'cargar_post' );
add_action( 'wp_ajax_nopriv_cargar_post', 'cargar_post' );
$(function(){
    //Si hago click en el a href se ejecuta la llamada ajax
    $('.link').click(function( event ){
        var posttoload = $(this).attr('data-id');

        $.ajax({
            url: mi_ajax.url,
            type: "POST",
            data: {
                'action':'cargar_post', //envio la info a la funcion php
                'thepost' : posttoload //envio la variable de que post quiero cargar
            },
            beforeSend: function() {
                $('#ajaxpost .content').html('<div id="loading"></div>'); //defino un loading
            },
            success: function(data){

                //cargo la data en una variable
                var $ajax_response = $(data);
            },
            error: function(errorThrown){
            }
        });
        event.preventDefault();
    })
})