Как загрузить сообщение Wordpress с помощью Ajax onclick

Я провел часы, читая и пробуя учебники. Я не могу найти решение, которое работает, и я знаю, что это должно быть довольно легко, но я борюсь с AJAX. :(

Я хочу загрузить содержимое сообщения из ссылки в div. Ниже то, что у меня есть. Может кто-нибудь помочь мне со стороной JavaScript? Спасибо!

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

Я хочу загрузить этот код в div #loadAjaxHere

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

Спасибо за помощь!!

6
ajax jquery loops post wordpress

3 ответов

Ok, Я думаю, что я решил это после долгого процесса проб и ошибок.

Это, кажется, работает, но, пожалуйста, дайте мне знать, если это не правильный способ сделать это

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;
    });
});

страница, на которой я хочу отобразить содержимое сообщения (я использую пользовательские типы сообщений под названием "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>

и одиночный столб " одиночн-художественное произведение.РНР." Примечание: не используйте get_header или get_footer и т. д.:

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

спасибо!

10

просто добавить, если вы хотите загрузить только часть одного сообщения, Вы можете ammend

$("#tabs").load(post_url);

to

$("#tabs").load(post_url + ".tabcontent" );

который просто загрузится во все в div.tabcontent

3

ответ Барри правильный о возможности загрузки частичной страницы, добавив выражение селектора css в конец URL-адреса. Однако между url-адресом и селектором должно быть пространство:

$("#tabs").load(post_url + " .tabcontent" );

в противном случае строка передается в .load() будет http://example.com.tabscontent. Но это должно быть http://example.com .tabscontent.

кроме того, слово мудро, используя этот метод, остановит jQuery от загрузки и выполнения любого кода внутри <script> теги. Однако, просто используя .load(post_url); без селектора успешно загрузить и выполнить код в <script> теги.

подробнее о здесь.

3