Ajax onclickでWordpress Postを読み込む方法

Question

私はチュートリアルを読んでお試しに時間を費やしました。私はうまくいきませんが、私は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要素内のコードは

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

が助けてくれてありがとう!!

Answer 1

[OK]を、 は私が裁判の長いプロセスの後にこれを解決していると思います#loadAjaxHereとエラー。

これが動作しているようですが、それはこの

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

をページ（私はget_footerなどいけないGET_HEADERを使用するか：：注意

<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」：「アートワーク」と呼ばれるカスタムポストタイプを使用して

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

ありがとうございます！

Answer 2

あなただけが

だけdiv.tabcontent

にすべてのものにロードし

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

に

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

をammendすることができ、単一のポストの一部にロードする場合だけで、追加します

Answer 3

バリーの答えは、URLの最後にCSSセレクタ式を追加することで、部分的なページを読み込むことができます。それ以外の場合は​​に渡された文字列はhttp://example.com.tabscontentだろう

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

：しかし、そのようなURLとセレクタの間にスペースがあることが必要となります。しかし、それはhttp://example.com .tabscontentでなければなりません。

また、この方法を使用すると、jQueryが<script>タグ内の任意のコードのロードと実行を停止します。しかし、.load(post_url);をセレクタなしで使用すると、<script>タグにコードをロードして実行することができます。

詳しくはhereをご覧ください。