获取外部js文件的db值

时间:2016-12-13 作者:Interactive

我创建了一个插件,可以在管理屏幕中创建一个元框
此元框具有通过默认WordPress功能上载或选择图像的选项。

如果有一个图像上载程序,这可以正常工作。现在我遇到了一个有多个图像上传器的情况。

默认上载程序根据id. <我想让它更有活力,但不知道怎么做。我知道我可以创建一个新的.js 文件并向其中添加一个数字以使其工作。但我需要20个图像上传器。创建20个不同的文件是愚蠢的。

如果某个模板用于页面,则加载元框。因此,用户首先必须创建一个带有模板的页面来激活元框。考虑到这一点,我已经知道了某些信息。我在想如果我$page_ID 动态添加到id 在外部.js 文件但这仍然给我留下了一个问题id 保持不变。

下面是我所做的:

I have updated the question. See below

这是外部.js 对于图像加载器:
I have updated the question. See below

如果我能拥有一些能为id\'这样我就不必创建20个文件了!

-----------更新-------------
我已经更改了几件事,现在只剩下一个问题了。保存到数据库no的数据具有页面名称和尾随数字。看起来是这样的:
text-{name-page}_1

因为我知道会有多少元框,所以我可以对它们进行编号(我不知道最优雅的选择,但时间是个问题。)

但是为什么总是有一个但是

对于图像加载程序,脚本使用外部.js 文件这是id 定义的选择按钮的。我还需要将此设置为“动态”,但如何才能将按钮名称的值获取到外部文件?

这是图像上载程序:

<?php 
$post = get_post($post_id, ARRAY_A);
$post_name = $post[\'post_name\'];
$a = \'_\'.$post_name.\'_1\';
?>

<input type="button" id="dynamic-image-button<?php echo $a ?>" class="button" value="<?php _e( \'Kies of Upload\', \'dynamic-textdomain\' )?>" />
这是外部.js

/*
* Attaches the image uploader to the input field
*/
jQuery(document).ready(function($){

// Instantiates the variable that holds the media library frame.
var meta_image_frame;

// Runs when the image button is clicked.
$(\'#dynamic-image-button\').click(function(e){

    // Prevents the default action from occuring.
    e.preventDefault();

    // If the frame already exists, re-open it.
    if ( meta_image_frame ) {
        meta_image_frame.open();
        return;
    }

    // Sets up the media library frame
    meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
        title: meta_image.title,
        button: { text:  meta_image.button },
        library: { type: \'image\' }
    });

    // Runs when an image is selected.
    meta_image_frame.on(\'select\', function(){

        // Grabs the attachment selection and creates a JSON representation of the model.
        var media_attachment = meta_image_frame.state().get(\'selection\').first().toJSON();

        // Sends the attachment URL to our custom image input field.
        $(\'#dynamic-image\').val(media_attachment.url);
    });

    // Opens the media library frame.
    meta_image_frame.open();
});
});
如何获取$a 进入外部js?

-------其他--------
这是脚本中已有的内容:

function dynamic_image_enqueue() {  global $typenow;
$post = get_post($post_id, ARRAY_A);
$post_name = $post[\'post_name\'];
$a = \'_\'.$post_name.\'_1\';
$b = \'_\'.$post_name.\'_2\';
if( $typenow == \'page\' ) {  wp_enqueue_media();
    wp_register_script( \'dynamic-box-image\', plugin_dir_url( __FILE__ ) . \'dynamic-box-image.js\', array( \'jquery\' ) );
    wp_localize_script( \'dynamic-box-image\', \'meta_image\',  array(\'title\' => __( \'Kies of Upload een afbeelding\', \'dynamic-textdomain\' ), \'button\' => __( \'Gebruik deze afbeelding\', \'dynamic-textdomain\' ),));
    wp_enqueue_script( \'dynamic-box-image\' );   }}
add_action( \'admin_enqueue_scripts\', \'dynamic_image_enqueue\' );
?>
-----------更新---------
它声明该值未定义
我试图发出警报以获取值,但运气不佳
我添加了:

,\'a_value\' => __( $a, \'dynamic-textdomain\' )
wp_localize_script.

示例中:
alert( object_name.some_string);<我的尝试alert(meta_image.a_value);

1 个回复
最合适的回答,由SO网友:Benoti 整理而成

您需要使用wp_localize_script() 当您将js脚本排队时。这通常是ajax方式的一个很好的替代方法,这将节省您创建多个js文件的时间。

wp_localize_script() 可以用于使脚本中的任何数据可用,这些数据通常只能从WordPress的服务器端获取。

正如你在codex专用页面上看到的

add_action(\'admin_enqueue_scripts\', \'wpse_249089\');

function wpse_249089(){
// Register the script
wp_register_script( \'some_handle\', \'path/to/myscript.js\' );

// Localize the script with new data
$translation_array = array(
    \'some_string\' => __( \'Some string to translate\', \'plugin-domain\' ),
    \'a_value\' => \'10\'
);
wp_localize_script( \'some_handle\', \'object_name\', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( \'some_handle\' );
}
然后在js文件中,您可以这样使用它:

<script>
// alerts \'Some string to translate\'
alert( object_name.some_string);
// alerts \'10\'
alert( object_name.a_value);
</script> 
希望有帮助!