サポート » 使い方全般 » ajaxで取り込んだテンプレートパーツ内で他のjsが動かない

  • 解決済 d.w.c

    (@dwc-1)


    計算処理などが多く含まれるページテンプレートを作成してしばらく使っていたんですが、あまりにも表示の遅延が気になったので処理が遅い部分だけテンプレートを分け、手探りでajaxを利用しての非同期処理をしました。
    大まかには目的の動作が出来たのですが、その際、遅れて表示したテンプレート部分に functions.phpwp_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件中)
  • d.w.c

    (@dwc-1)

    状況の認識間違いがあったので、追記します。

    ◆page.php
    ajax利用でget_template_part( 'template_a' );呼び出し

    ◆template_a.php
    通常の記載でget_template_part( 'template_b );呼び出し

    ◆template_b.php

    上記のように3層の入れ子のようになっていて、 functions.php

    if (!function_exists( 'register_my_jquery' )) {
      function register_my_jquery() {
        wp_register_script('targetjs1', get_stylesheet_directory_uri() .'/js/targetjs1.js', array(), '', true);
        wp_enqueue_script('targetjs1');
      }
    }
    add_action( 'wp_enqueue_scripts', 'register_my_jquery' );

    としたjsは page.phptemplate_a.phptemplate_b.php のすべてで適用する必要があります。

    ajaxで template_a.php を呼び出した状況だと、 page.phptemplate_a.php では targetjs1.js ファイルが適用されるのですが、 template_b.php 内では適用されなくなっています。

    functions.phpwp_enqueue_scriptsmy-ajax.jsを下記のように追加修正して、ajaxのjsファイル内で適用させたいjsファイルを再度取得することで、一応動作する様になりました。

    ただ、なぜ普通にfunctions.php内に書いてあるコードがajaxで取得してきた部分の中の引用テンプレート内で利用できないかは不明なままです。
    読み込みの順番がおかしいとかなのか・・・

    functions.phpwp_enqueue_scripts
    *jsファイルが置いてあるディレクトリのURLをjsファイルに渡すコードを追記

    <?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(),
      "js_dir"      => get_stylesheet_directory_uri() . "/js/",
      );
      wp_localize_script( 'ajax-script', "PassedData", $pass_data_for_js );
      }
      }
    }
    add_action( 'wp_enqueue_scripts', 'register_my_jquery' );

    my-ajax.js
    *無視されていたjsファイルをajaxを使って取得&実行

    ( function($) {
      $(function() {
        var TargetArea = $('section#loading_area');    //引用するテンプレートパーツ の出力先section
        var TargetTemplateDirectory = TargetArea.data("d"); //テンプレートパーツのディレクトリ名
        var TargetTemplateFile      = TargetArea.data("f"); //テンプレートパーツのファイル名
        var printMessage            = "";
        
        $.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 );
          
          //customer_info_box.js がなぜか適用されないので、改めて呼び出し
          jQuery.ajax({
            url: PassedData.js_dir + "targetjs1.js",
            type: "POST",
            dataType: "script"
          }).done(function(js_data) {
            // 文字列をjavascriptとして実行。
            eval(js_data);
          });
        }
        
        }).fail(function( XMLHttpRequest, textStatus, error ){
        console.log(error);
        console.log(XMLHttpRequest.responseText);
        
        printMessage = "情報の取得に失敗しました。<br>お手数ですが、管理者までご連絡ください。";
        TargetArea.html( printMessage );
        });
      });
    })(jQuery);
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。