ajaxで取り込んだテンプレートパーツ内で他のjsが動かない
-
計算処理などが多く含まれるページテンプレートを作成してしばらく使っていたんですが、あまりにも表示の遅延が気になったので処理が遅い部分だけテンプレートを分け、手探りでajaxを利用しての非同期処理をしました。
大まかには目的の動作が出来たのですが、その際、遅れて表示したテンプレート部分にfunctions.php
でwp_enqueue_scripts
を利用して読み込んでいる他のjsのコードが適用されないという現象が起きています。ajaxで
get_template_part()
を利用して取得するテンプレート内(bodyタグ内)に<script src="***"></section>
を書いて改めてjsファイルを呼び出すと利用はできるのですが、できればfunctions.php
内の処理で完結できればと思っています。どうすればajaxで取得したテンプレート部分にもfunctions.phpで読み込んだjsファイルを適用することができるでしょうか?
【現在のコード】
functions.php
<?php //--------------------------------------------------------------------------- // JS読み込み //--------------------------------------------------------------------------- if (!function_exists( 'register_my_jquery' )) { function register_my_jquery() { //ajax利用で取得したテンプレートで適用されなかったjs wp_register_script('targetjs1', get_stylesheet_directory_uri() .'/js/targetjs1.js', array(), '', true); wp_enqueue_script('targetjs1'); //特定のページだけajax適用 $ajax_target_id = array( 8, 566, ); if( in_array( get_the_ID(), $ajax_target_id, true )){ wp_register_script( 'ajax-script', get_stylesheet_directory_uri() .'/js/my-ajax.js', array('jquery'), null, true ); wp_enqueue_script( 'ajax-script'); $pass_data_for_js = array( "ajax_url" => admin_url( 'admin-ajax.php'), "post_id" => get_the_ID(), ); wp_localize_script( 'ajax-script', "PassedData", $pass_data_for_js ); } } } add_action( 'wp_enqueue_scripts', 'register_my_jquery' ); //--------------------------------------------------------------------------- // AJAX PHP側の処理 //--------------------------------------------------------------------------- function do_myajax() { $post_id = intval( $_POST["post_id_ajax"] ); $template_directory = ( !empty( $_POST["d_name"] )) ? $_POST["d_name"] . '/' : ""; $template_file = ( !empty( $_POST["f_name"] )) ? $_POST["f_name"] : ""; $return_data = null; if( !empty( $template_file )){ $return_data = get_template_part( $template_directory . $template_file ); } json_encode( $return_data ); //get_template_part()のなかで既にechoしてせいか、ここでecho付けると余計な表示がつく wp_die(); } // ログインしているユーザー向け関数 add_action( 'wp_ajax_my_action', 'do_myajax' ); // 非ログインユーザー用関数 add_action( 'wp_ajax_nopriv_my_action', 'do_myajax' );
my-ajax.js
( function(jQuery) { jQuery(function() { var TargetArea = jQuery('section#loading_area'); //引用するテンプレートパーツ の出力先section var TargetTemplateDirectory = TargetArea.data("d"); //テンプレートパーツのディレクトリ名 var TargetTemplateFile = TargetArea.data("f"); //テンプレートパーツのファイル名 var printMessage = ""; jQuery.ajax({ type: "POST", url: PassedData.ajax_url, data: { 'action' : 'my_action', "post_id_ajax": PassedData.post_id, //$_POSTに変数を格納 wp_localize_script()を利用してfunctions.phpの方で定義済み "d_name" : TargetTemplateDirectory, "f_name" : TargetTemplateFile, } }).done( function( data ){ if( data === "" ){ printMessage = "情報を取得できませんでした。<br>お手数ですが、管理者までご連絡ください。"; TargetArea.html( printMessage ); }else{ TargetArea.hide(); TargetArea.html( data ); TargetArea.fadeIn( 1000 ); } }).fail(function( XMLHttpRequest, textStatus, error ){ console.log(error); console.log(XMLHttpRequest.responseText); printMessage = "情報の取得に失敗しました。<br>お手数ですが、管理者までご連絡ください。"; TargetArea.html( printMessage ); }); }); })(jQuery);
ajaxで読み込んだものの表示先PHP
?> <section id="loading_area" data-d="ajax" data-f="zakkuri_income_calc"> <div class="al-c b f20em"> 読み込み中<br> <img src="<?php echo get_stylesheet_directory_uri() . '/images/loading-clock.gif' ?>"> </div> </section>
2件の返信を表示中 - 1 - 2件目 (全2件中)
2件の返信を表示中 - 1 - 2件目 (全2件中)
- トピック「ajaxで取り込んだテンプレートパーツ内で他のjsが動かない」には新たに返信することはできません。