javascript - 如何将数据传递到 WordPress 管理页面上的 JavaScript？

Question

我正在构建一个 Wordpress 插件，以从“选项设置”页面操作 Wordpress 数据库中的自定义表。到目前为止，我已经能够查询数据库并使用结果构建 HTML 表。

ob_start();
// query the database and get the records
// $games contains the records

$htm .= '<table id="pl_table">';
    // header
    $htm .= '<tr>';
        foreach ( $cols as $col ) {
            $htm .= '<th>'.$col.'</th>';
        }
    $htm .= '</tr>';
    // body
    $htm .= '<tr>';
        foreach ($games as $game){
            foreach ($game as $val) {
                $htm .= '<td>'.$val.'</td>';
            }
            $htm .= '</tr>';
        }
$htm .= '</table>';
echo $htm;
$output = ob_get_contents();
ob_end_clean();
echo $output;

到目前为止一切顺利。现在我想让表格中的第一列成为一个触发 JavaScript 函数的按钮。

$htm .= '<tr>';
foreach ($games as $game){
    foreach ($game as $val) {
        if ($game->ID == $val){
            $htm .= '<td><button type="button"  id="btn'.$val.'" onclick="myFunction()">'.$val.'</td>';
        }
        else {
            $htm .= '<td>'.$val.'</td>';
        }
    }
    $htm .= '</tr>';
}

这是我的 admin.js 文件中的函数:

function myFunction() {
    document.getElementById("tboxOut").value = jsgame.ID;
}

在我的主插件页面中，我已将脚本文件排入队列。

wp_enqueue_script('pl_script',plugins_url( 'js/admin.js', __FILE__ ));

当我在浏览器中打开页面并单击第 1 列中的按钮时，该函数将触发，我可以在浏览器中对其进行调试。

现在，我需要将 $game 中的数据传递给这个函数并填充一堆输入框，但没有运气。这是我尝试过的:

$aryGame = (array)$game;
$htm .= wp_localize_script( 'pl_script', 'jsgame',$aryGame  );
$htm .= '<td><button type="button"  id="btn'.$val.'"onclick="myFunction()">'.$val.'</td>';

但是在浏览器调试器中，我收到错误:Uncaught ReferenceError: jsgame is not Define

显然，我对如何将数据从 PHP 传递到 javascript 缺乏一些了解。有什么想法吗？

Answer 1

您需要在服务器端使用正确的钩子(Hook)('admin_enqueue_scripts')来加载管理页面的js并为其提供句柄。然后使用正确的逻辑本地化 js。并在脚本中确保 jQuery 处于无冲突模式(通过 jQuery(document).ready)。

换句话说，服务器端发生的任何事情都保留在服务器端。 js 函数(myFunction)没有返回任何内容，因此 $.htm = wp_localize_script() 没有任何意义。 js本地化的对象要么是数组，要么是json编码(str)/解码(obj)类型。如果在脚本(客户端)中使用该数据类型执行某些操作后，您想要将修改后的数据发布回服务器，则可以通过将表单提交到 options.php 来完成。提交按钮/事件将触发 php 页面刷新，因此您的服务器代码可以使用新数据。但您需要单击提交按钮，即触发 POST 事件。

它应该是这样的:

在 PHP 中

function custom_enqueue_my_script(){
    //Retrieve any options (settings) already in database.
    $options = get_option('my_option_meta_key');
    //If you need to change the data type, e.g., (json_encode/decode), do it here.
    $data_to_pass = json_encode($options);
    //Enqueue the js file
    wp_enqueue_script('script_handle', plugins_url( 'pluginname/js/or/whatever/myadmin.js', dirname(__FILE__) ) );
    //Localize the js, referencing the handle
    wp_localize_script('script_handle', 'my_local_data', $data_to_pass );
}

add_action( 'admin_enqueue_scripts', 'custom_enqueue_my_script' );

function custom_wp_settings_callback(){ //presumably, some callback in your options.php workflow.

    //Render your section, settings and controls here
    //As well as the form.
    $htm .= '<tr>';
    foreach ($games as $game){
        foreach ($game as $val) {
            if ($game->ID == $val){
                //You don't need onclick if using jquery
                $htm .= '<td><button type="button"  id="btn'.$val.'">'.$val.'</td>';
            }
            else {
                $htm .= '<td>'.$val.'</td>';
            }
        }
        $htm .= '</tr>';
    }

}

在 JS 中

function myFunction(myNewVal){
    //Do something with myNewVal, such as populating an input field within the form, which will eventually send data back to options.php (server side).
}

jQuery(document).ready(function($){
    var local_data = my_local_data;
    console.log(local_data);    //To see it working

    $('#btnMonopoly').click(function(){
        var myNewVal = $('$btnMonopoly').val();
        myFunction(myNewVal);
    });
});

该解决方案基本上基于this blog post由 Pippins 插件提供。