如何加载字preSS邮政与阿贾克斯的onclick [英] How to load Wordpress Post with Ajax onclick

问题描述

我已经花了几个小时阅读和尝试教程。我似乎无法找到一个解决方案，工程，我知道它应该是pretty的容易，但我与AJAX斗争。 ：（

I have spent hours reading and trying tutorials. I cant seem to find a solution that works and I know it should be pretty easy but I struggle with AJAX. :(

我想从一个div链路负载帖子的内容。 下面是我。是否有人可以帮助我的JavaScript的一面呢？谢谢！

I want to load Post content from a link in a div. Below is what I have. Can someone please help me with the JavaScript side? Thanks!

<ul>
    <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <li class="mytab">
      <span>
         <h3><?php the_title(); ?></h3>
         <a href="#"><?php the_post_thumbnail('Project'); ?></a>
      </span>
    </li>
    <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<div id="loadAjaxHere"></div>

我希望加载这个code在DIV #loadAjaxHere

I want to load this code in div #loadAjaxHere

<div class="myArtwork">
   <h2><?php the_title(); ?></h2>
   <div class="text"><?php the_content(); ?></div>
</div>

感谢您的帮助！

推荐答案

好吧， 我想，以后的试验和错误的一个长期的过程我已经解决了这个。

Ok, I think I have solved this after a long process of trial and error.

这似乎工作，但请让我知道如果不这样做的正确方法

This seems to work, but please let me know if it is not the correct way of doing this

JavaScript的：

Javascript:

jQuery.noConflict();
jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $("a.ajax").click(function(){
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");
        $("#tabs").html('<div class="loading">loading...</div>');
    $("#tabs").load(post_url);
    return false;
    });
});

在这里我想（我用所谓的艺术作品自定义文章类型显示帖子内容的页面：

The page where I want to display the post content (I am using custom post types called "artwork":

<ul class="container">
  <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="mytab">
    <h3><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax"><?php the_post_thumbnail('Project'); ?></a>
  </li>
  <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<!-- LOAD SINGLE POST CONTENT IN #TABS -->
<div id="tabs"></div>

和单后单artwork.php。注意：不要使用get_header或get_footer等：

And the single post "single-artwork.php". Note: Dont use get_header or get_footer etc:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="tabcontent" id="tab-<?php the_ID(); ?>">
    <?php the_content(); ?>
  </div>
<?php endwhile; endif; ?>

谢谢！

这篇关于如何加载字preSS邮政与阿贾克斯的onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！