web-dev-qa-db-ja.com

Ajax経由でテンプレートをクリック読み込み

ユーザーがボタンをクリックしたら、私はAjax経由でテンプレートをロードしようとしています。これは私が使っているコードです：

functions.php上：

function phantom_scripts() {
  global $child_dir;

  /* Ajax Requests */
  wp_enqueue_script( 'ajax-stuff', get_stylesheet_directory_uri() . '/js/ajax.js', array( 'jquery' ), true );
 }
 add_action( 'wp_enqueue_scripts', 'phantom_scripts' );


function portfolio_ajax() {
  include( 'templates/cards.php' );
  die();
}
add_action('wp_ajax_nopriv_portfolio_ajax', 'portfolio_ajax');
add_action('wp_ajax_portfolio_ajax', 'portfolio_ajax');

wp_localize_script( 'ajax-stuff', 'ajaxStuff', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

ajax.js上：

(function($) {
    $('#load-cards').click(function() {
        alert();
            $.ajax({
                url: ajaxurl,
                data: {
                    action: 'portfolio_ajax'
                },
                success: function(data) {
                    $('#cards-container').append(data);
                },

                error: function(MLHttpRequest, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        });
})(jQuery);

HTML：

<a href="javascript:void(0)" id="load-cards">Load cards</a>

今のところ、コンソールにエラーが表示されていませんが、templates/cards.phpファイルにあるコンテンツが読み込まれていません。私が何を見逃しているのか何か考え？

phpfunctionsjqueryajaxjavascript
2
wpuser

だから、あなたはwp_localize_scriptを使ってajaxのURLをインジェクトします。しかし、その値にアクセスするためにローカライズされたvarハンドルを使用しませんでした。これを試して：

/* ... */
$.ajax({
    url: ajaxStuff.ajaxurl, // NOTE use of 'ajaxStuff' object
/* ... */
1
Dougal Campbell

最初に、Dougalがajax-urlを正しく取得することについて述べたことを実行する必要があります。 dataTypeも指定します。 dataTypeは、サーバーから返されることを期待しているデータの種類です。詳細については、こちら をご覧ください。

テンプレートを取得するには、ワードプレスの get_template_part を使用します。

0
Lasse M. Tvedt