1

When a file is uploaded to my page I make an ajax call to add an entry in a database. I then want to send a string back to the client using wp_localize_script but when I try to access it I just get an error saying "Uncaught Reference Error: pw_script_vars is not defined".

I know I can send something back with wp_die but this is a bit of a work around that I don't think is the correct way. So the question is why is the wp_localize_script not working? Any help appreciated.

script.js:

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
jQuery(function($) {
    var i;
    for(i=1;i<21;i++){
            $('body').on('change', '#file'+i, function() {
                var file_data = $(this).prop('files')[0];
                var id = $(this).attr('id');

                var form_data = new FormData();

                form_data.append('file', file_data);
                form_data.append('action', 'file_upload');

                jQuery.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success: function (response) {
                        alert( pw_script_vars.alert );
                    }

                });

            });
    }
});

functions.php:

    add_action('wp_enqueue_scripts','owr_scripts_function');
    add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
    add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );

    function owr_scripts_function() {
          wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/script.js', array('jquery'), time(), false);
    }
function file_upload_callback(){
    wp_localize_script('script', 'pw_script_vars', array(
            'alert' => __('Hey! You have clicked the button!', 'pippin'),
            'message' => __('You have clicked the other button. Good job!', 'pippin')
        )
    );
    wp_die("upload success");
}

`

1

Please try below code :

script.js

jQuery(function($) {
    var i;
    for(i=1;i<21;i++){
        $('body').on('change', '#file'+i, function() {
            var file_data = $(this).prop('files')[0];
            var id = $(this).attr('id');

            var form_data = new FormData();

            form_data.append('file', file_data);
            form_data.append('action', 'file_upload');

            jQuery.ajax({
                url: pw_script_vars.ajax_url,
                type: 'POST',
                contentType: false,
                processData: false,
                data: form_data,
                success: function (response) {
                    alert( response.alert );
                }

            });

        });
    }
});

functions.php

add_action('wp_enqueue_scripts','owr_scripts_function', 20);
function owr_scripts_function() {
    wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/script.js', array('jquery'), time(), false);
    wp_localize_script(
        'script', 
        'pw_script_vars', 
        array(
            'ajax_url' => admin_url('admin-ajax.php'),
        )
    );
}


add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );
function file_upload_callback(){
    $response = [];
    $response['alert'] = __('Hey! You have clicked the button!', 'pippin');
    $response['message'] = __('You have clicked the other button. Good job!', 'pippin');
    wp_send_json($response);
    wp_die("upload success");
}
  • Thanks for answering and although this does work I need to run the wp_localize_script from the file_upload_callback method. Is there a way to do this? (reason is that I've put a trivial string into wp_localize_script for sake of example but I'm actually sending something that I pull from the database dynamically) – dreddx Jun 10 at 4:45
  • @dreddx Please try above edited code.You doesn't need to add response into wp_localize_script.Directly you can send into ajax function. – Milan Hirpara Jun 10 at 5:00
  • Great, thank you – dreddx Jun 10 at 5:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.