В чем ошибка зарегистрации скрипта в wp и как передать ему переменные с php?

Question

[Ninja Mate]

у меня есть wp плагин для которого в админке создаю сраничку и там хочу повесить для кнопки функцию и передать ей переменные
функция срабатывает но переменные из MyAjax не получается использовать.
вот главный php

require_once(ABSPATH .'wp-includes/pluggable.php');
require_once(ABSPATH .'wp-load.php');


add_action('admin_menu', 'setup_menu');

function setup_menu(){
    require_once plugin_dir_path( __FILE__ ) . '/admin.php';
    add_menu_page( 'IMG', 'IMG', 'manage_options', 'img-plugin', 'run_this' );
}

include ("get_all_img.php");

/* Script registration*/
wp_enqueue_script( 'img_import.js', plugins_url( '/img_import.js', __FILE__ ), array('jquery'), '1.12', true );
wp_localize_script( 'img_import', 'MyAjax', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('myajax-nonce'),
    'pluginsUrl' => plugins_url()
) );

На странице в админке только кнопка

function run_this()
{
    echo '<div id="img_app"></div>';
    echo '<button id="app-img" onclick="myFunction();">Click me!</button>';
}

Вот img_import.js' файл

"use strict";

function myFunction( ) {
    //name, id
    jQuery.post(
        MyAjax.ajaxurl,
        {
            type: "post",
            dataType: "json",
            'action': 'get_all_img_',
            async: true
        }
    ).done(
        function (resp) {
            console.log(resp);
        }
    );
}

выдает ошибку

img_import.js?ver=1.12:24 Uncaught ReferenceError: MyAjax is not defined
at myFunction
at HTMLInputElement.myButton.onclick

Answer 1

[MrTimon]

В этом месте

wp_localize_script( 'img_import', 'MyAjax', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('myajax-nonce'),
    'pluginsUrl' => plugins_url()
) );

Попробуйте первый параметр заменить на название скрипта перед которым переменные должны подгрузиться, тоисть img_import.js а не img_import . Получиться как то так

wp_localize_script( 'img_import.js', 'MyAjax', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('myajax-nonce'),
    'pluginsUrl' => plugins_url()
) );

Comments

[Ninja Mate]

фух спасибо. два дня сидел.

[Ninja Mate]

не знаете случайно. как избавится от такого сообщения об ошибке

( ! ) Notice: wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in C:\Users\Victor\Desktop\WP\apps\wordpress\htdocs\wp-includes\functions.php on line 4137

судя по всему я не правильно скрипт запрашиваю

[MrTimon]

Ninja Mate: Так и есть. посмотрите в любой более - менее простой плагин чтобі понять как правильно подключать css и js.

К примеру можно сделать так:

Все подключение файлов стоит подключать используя хук admin_enqueue_scripts для админки и wp_enqueue_scripts для фронтенда

add_action('admin_enqueue_scripts',  'init_admin_styles'10,1);

Потом в функции скрипт или стайл сначала нужно зарегистрировать а потом уже выводить то что нужно и где нужно

function init_admin_styles() 
{
    /* тут регистрируем все свои css файлы */
   wp_register_style('admin-styles', plugins_url('/css/style.css', __FILE__));
  /* ... */

    /* тут регистрируем все свои js файлы */
   wp_register_script( 'img_import.js', plugins_url( '/img_import.js', __FILE__ ), array('jquery'), '1.12');
  /* ... */


  /*ну и потом тут же ну или в месте где вам это нужно выводим сами скрипты */
wp_enqueue_script( 'img_import.js'); /* тут указываем тольки имя так как оно у нас уже зарегистрировано*/
wp_localize_script( 'img_import.js', 'MyAjax', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('myajax-nonce'),
    'pluginsUrl' => plugins_url()
) );

}

Как то так. Писал без проверки, так что могут быть ошибки, но идея думаю понятна

[Ninja Mate]

MrTimon: спасибо еще раз