wp_enqueue_scriptはAJAXでphpファイルと呼ばれていません

Question

ここでは少し複雑な問題があります。

私は「親」ポスト（「ステップ」と呼ばれるカスタムタイプのポスト）を選択してからAJAX関数がその親のすべての子を持つ新しい選択バーを表示するWordPressプラグインを構築しています。私はAJAX関数で呼び出されたPHPファイルの新しい要素と要素を出力することでこれを行います。これはうまくいきましたが、この新しい出力要素がページに追加されたときに同じJQueryファイルから関数を実行するプロセスを繰り返す必要があります。

<?php 
/* 
Plugin Name: n8jadams Step by Step Plugin (WIP) 
Plugin URI: 
Description: 
Author: Nathan James Adams 
Author URI: http://nathanjamesadams.com 
Version: 0.0.1a 
*/ 

//Exit if accessed directly 
if(!defined('ABSPATH')) { 
    exit; 
} 

//My custom post type, it works fine 
require_once(plugin_dir_path(__FILE__).'n8jadams-step-funnel-cpt.php'); 
require_once(plugin_dir_path(__FILE__).'n8jadams-ajax.php'); 

//Add my javascript 
function n8jadams_init_javascript() { 
    wp_register_script('n8jadams_javascript', plugin_dir_url(__FILE__).'n8jadams-scripts.js', array('jquery'),'1.1', false); 
    wp_enqueue_script('n8jadams_javascript'); 
} 
add_action('wp_enqueue_scripts', 'n8jadams_init_javascript'); 

//Adds a plugin menu to the wordpress sidebar 
function n8jadams_add_plugin_menu() { 
    add_menu_page('', 'Steps Settings', 4, 'steps-settings', 'n8jadams_steps_settings', ''); 
} 
add_action('admin_menu', 'n8jadams_add_plugin_menu'); 

//The actual function for the menu page 
function n8jadams_steps_settings() { 
    //Access the database and the tables we want 
    global $wpdb; 
    $posts = $wpdb->prefix.'posts'; 
    //Get the user id 
    $user = wp_get_current_user(); 
    $userid = $user->ID; 

    //Initialize javascript (it works here!) 
    n8jadams_init_javascript(); 

    /* Get all the parents */ 
    $parentsquery = " 
     SELECT `ID`, `post_title` 
     FROM $posts 
     WHERE `post_author` = $userid 
     AND `post_parent` = 0 
     AND `post_status` = 'publish' 
     AND `post_type` = 'step' 
    "; 
    $parentsarray = $wpdb->get_results($parentsquery); 
    ?> 
    <h4>My Forms:</h4> 
    <select id="parentselect"> 
     <option id="-1"> - Select Your Step Form - </option> 
     <?php 
      //output the parents 
      for($i=0;$i<sizeof($parentsarray);$i++) { 
       echo '<option id="'.$parentsarray[$i]->ID.'">'.$parentsarray[$i]->post_title.'</option>'; 
      } 
     ?> 
    </select> 
    <div id="displayChildren"></div> 
    <?php 
} 
?> 

のJavascript（n8jadams-scripts.js）：

(function($){ 
    $('#parentselect').change(function(s) { 
     var thisID = s.target[s.target.selectedIndex].id; 
     var outputDisplay = document.getElementById('displayChildren'); 
     if(thisID != '-1') {   
      $.ajax({ 
       type: 'POST', 
       url: 'admin-ajax.php', 
       data: { 
        action: 'n8jadams_get_children', 
        id: thisID 
       }, 
       success: function(response){ 
        if(response == "") { 
         outputDisplay.textContent = "This form has no children. Add them in the sidebar menu of this step form."; 
        } else { 
         outputDisplay.innerHTML = response; 
        } 
       }, 
       error: function(errorThrown) { 
        alert(errorThrown); 
       } 
      }); 

     } else { 
      outputDisplay.textContent = ''; 
     } 
    }); 

    // I want this function to work 
    /* 
    $('#childselect').change(function(t) { 
     console.log("test"); 
    }); 
    */ 
})(jQuery); 

によって呼び出されたPHPファイル

（プラグインディレクトリ内のフォルダにある）

主なPHPのプラグインファイル（Javascriptのコードを参照してください） AJAX（n8jadams-ajax.php）：

<?php 
    function n8jadams_get_children() { 
     //Get the id of the parent 
     $parent_post_id = $_POST['id']; 
     //Sanitize the input (Added after question was answered) 
     $parent_post_id = preg_replace("/[^0-9]/","",$parent_post_id); 
     //Access database 
     global $wpdb; 
     $posts = $wpdb->prefix.'posts'; 
     $user = wp_get_current_user(); 
     $userid = $user->ID; 
     $childrenquery = " 
      SELECT `ID`, `post_title`,`post_content` 
      FROM $posts 
      WHERE `post_parent` = $parent_post_id 
      AND `post_status` = 'publish' 
      AND `post_type` = 'step' 
      AND `post_author` = $userid 
     "; 
     //Retrieve the children associated with this parent 
     $childrenarray = $wpdb->get_results($childrenquery); 

     //Initialize Javascript (it doesn't work here!) 
     n8jadams_init_javascript(); 

     if(!empty($childrenarray)) { ?> 
      <h4>My Steps:</h4> 
      <select id="childselect"> 
       <option id="-1"> - Select Your Step - </option> 
       <?php 
        //output the children of the parent 
        for($i=0;$i<sizeof($childrenarray);$i++) { 
         echo '<option id="'.$childrenarray[$i]->ID.'">'.$childrenarray[$i]->post_title.'</option>'; 
     } ?> 
      </select> 
     <?php wp_die(); 
     } 
    } 
    add_action('wp_ajax_n8jadams_get_children', 'n8jadams_get_children'); 
    add_action('wp_ajax_nopriv_n8jadams_get_children', 'n8jadams_get_children'); 
?> 

Screenshot of Plugin Menu

なぜ私のjavascriptファイルがAJAXによって呼び出されたPHPファイルで動作していないのか分かりません。多分StackOverflowの広大な知恵が私を助けることができます。事前に助けてくれてありがとう。 :)

Answer 1

あなたはwp_enqueue_scriptsにフックしています。これはWordpressのフロントエンド（平均的な訪問者が見る部分）でのみ実行されます。 wp-admin、Wordpressのバックエンドにスクリプトをロードする場合は、admin_enqueue_scriptsアクションを使用してください。

このコードは/ wp-admin /では機能しないので、admin_enqueue_scriptsを使用する必要はありません。私は全体の問題は、あなたがハンドラを$('#childselect')にアタッチしていることになりますが、その時点でそのような要素はページに存在していないと思います。 $(..).on(..)で延期使用します

$(document).on('change', '#childselect', function(e) { 
    //Black magic 
}); 

サイドノート：すでにコメントで述べたように、以下の部分では、攻撃者がSQLインジェクションを実行することができますunsanitised変数が含まれています。

$childrenquery = " 
    SELECT `ID`, `post_title`,`post_content` 
    FROM $posts 
    WHERE `post_parent` = $parent_post_id 
    AND `post_status` = 'publish' 
    AND `post_type` = 'step' 
    AND `post_author` = $userid 
"; 

可能であれば、WP_Queryを使用してください。これがWordpressのバックエンドからのみ使用されている場合は、wp_ajax_nopriv_*を使用しないでください。あなたのサイトにログインしていないユーザーはそれを使用する権利がないからです。