如何使用 Ajax onclick 加载 Wordpress Post [英] How to load Wordpress Post with Ajax onclick

问题描述

我花了几个小时阅读和尝试教程.我似乎找不到有效的解决方案，我知道这应该很容易，但我在使用 AJAX 时遇到了困难.:(

我想从 div 中的链接加载 Post 内容.下面是我所拥有的.有人可以帮我处理 JavaScript 方面的问题吗?谢谢！

<?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_post_thumbnail('Project');?></a></span><?php endwhile;万一;wp_reset_query();?>
<div id="loadAjaxHere"></div>

我想在 div #loadAjaxHere 中加载这段代码

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

谢谢你的帮助！！

解决方案

好的，经过长时间的反复试验，我想我已经解决了这个问题.

这似乎有效，但如果这不是正确的做法，请告诉我

Javascript:

jQuery.noConflict();jQuery(文档).ready(函数($){$.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);返回假；});});

我想在其中显示帖子内容的页面(我使用名为艺术品"的自定义帖子类型:

<?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=""class="ajax"><?php the_post_thumbnail('Project');?></a><?php endwhile;万一;wp_reset_query();?>
<!-- 在#TABS 中加载单个帖子内容--><div id="tabs"></div>

还有一个帖子single-artwork.php".注意:不要使用 get_header 或 get_footer 等:

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

<?php endwhile;万一;?>

谢谢！

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. :(

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>

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>

Thank you for the help!!

解决方案

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:

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>

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; ?>

Thanks!

这篇关于如何使用 Ajax onclick 加载 Wordpress Post的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！