Support » Developing with WordPress » Issue with wp_localize_script

  • Hi,
    unfortunately I have not found a solution in https://wordpress.stackexchange.com and via google. I get the following error message when calling:

    Uncaught ReferenceError: ait_php_var is not defined
    ../assets/js/ait_buttons.js?wp-mce-4940-20190515 line 11

    This is the corresponding function I use to pass the values to the JS function:

    /* localization for ait_buttons.js */
    	add_action( 'wp_enqueue_scripts', 'ait_load_scripts' );
    	function ait_load_scripts() {
    	$ait_pfad = plugin_dir_url( __FILE__ ) . '/assets/js/ait_buttons.js';
    	$ait_add_options = 'here';
    	// Enqueued script with localized data.
    	wp_register_script('ait_js_script',	$ait_pfad );
    	// Localize the script with new data
    	wp_localize_script( 'ait_js_script', 'ait_php_var',
    	array(
     	  'external_link' => __( 'Ext. Link', 'add-infos-to-the-events-calendar' )		 
              'event_category' => __( 'Event Category', 'add-infos-to-the-events-calendar' ),
     	  'internal_link' => __( 'Int. Link', 'add-infos-to-the-events-calendar' ),
    	  'ackids' => $ait_add_options,
    	)
    	);
    	// Enqueue the script after localizing
    	wp_enqueue_script( 'ait_js_script', $ait_pfad );
    }

    Here is the relevant (sample) snippet from the JS file:

    // JavaScript Document
    // alert( ait_php_var.ackids );
    
    (function() {
      // const { __, } = wp.i18n;
      // var ait_cats = JSON.parse(ait_cat_obj.category);
      // var categories = [];
      var ait_http = 'http://';
      var ait_https = 'https://';
      var ait_test_http = '';
      console.log(ait_php_var.ackids);
     ...
    

    The file is in the correct folder, otherwise the error would not appear in line 11. The same error message also occurs when the other variable (e. g. external_link) is called in the same or similar form.
    Thanks a lot for any help to solve the problem.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Stef

    (@serafinnyc)

    I’m not understanding what you’re wanting to do here exactly. Can you start from the beginning?

    Are you simply trying to call a file in a folder and enqueue it?

    Hi,
    thanks for the answer and sorry for the unclear description. The JS-file is a kind of shortcode generator.
    I would like to enable translations (see // label: ait_php_var.event_category, instead of label: 'Event Category', in the JS file on the one hand and pass variables ( see console.log(ait_php_var.ackids);) on the other, which I can continue to use in the JS file.
    Here is the complete JS file:

    // JavaScript Document
    // alert( ait_php_var.ackids );
    
    (function() {
      // const { __, } = wp.i18n;
      // var ait_cats = JSON.parse(ait_cat_obj.category);
      // var categories = [];
      var ait_http = 'http://';
      var ait_https = 'https://';
      var ait_test_http = '';
      console.log(ait_php_var.ackids);
    
        /*
        for( var cat in ait_cats){
          categories.push({"text":ait_cats[cat],"value":cat});
        }
        */
         /* Register the buttons */
         tinymce.PluginManager.add( 'my_button_script', function( ed, url ) {
              ed.addButton( 'ait_button', {
                title : 'Add Infos to the events calendar',
                type: 'menubutton',
                image : url + '/icons8-kalender-48.png',
                icon: 'icons8-kalender-48.png',
                  menu:[{
                      text: 'Add Infos to the events calendar',
                      value: 'Add Infos to the events calendar',
                      onclick : function() {
                          ed.windowManager.open( {
                             title: 'Add Infos to the events calendar Shortcode Generator',
                             body: [
    
                                  {
                                     type: 'textbox',
                                     name: 'link',
                                     label: 'Ext. Link',
                                     // label: ait_php_var.external_link, //
                                     value:""
                                  },
                    							{
                    								type: 'textbox',
                    				        name: 'vl',
                                    label: 'Event Category',
                    				        // label: ait_php_var.event_category, //
                                    values: ""
                    				        // values:categories
                    							},
                                  {
                    								type: 'textbox',
                    				        name: 'il',
                                    label: 'Int. Link',
                    				        // label: ait_php_var.internal_link, //
                    				        values:""
                    							},
                                  /* for internal use only
                                  {
                                    type: 'checkbox',
                                    name: 'kfm',
                                    label: 'Kinderflohmärkte',
                                    values: ""
                                  },
                                  {
                                    type: 'checkbox',
                                    name: 'fm',
                                    label: 'Flohmärkte',
                                    values: ""
                                  },
                                  {
                                    type: 'checkbox',
                                    name: 'ferien',
                                    label: 'Ferien',
                                    values: ""
                                  },
                                  */
    
            ],
            onsubmit: function( e ) {
              if (e.data.vl == "all") {
                e.data.vl = "";
              }
              e.data.vl = 'vl="' + e.data.vl + '" ';
    
              /* test whether the link starts with http:// or https://, otherwise add http:// if necessary */
              if (e.data.link != '') {
                if (e.data.link.substring(0, 7) != ait_http && e.data.link.substring(0, 8) != ait_https){
                  e.data.link = ait_http + e.data.link;
                }
                e.data.link = 'link="' + e.data.link + '" ';
              }
              else {
                e.data.link ="";
              }
              if (e.data.il != '') {
                if (e.data.il.substring(0, 7) != ait_http && e.data.il.substring(0, 8) != ait_https){
                  e.data.il = ait_http + e.data.il;
                }
                e.data.il = 'il="' + e.data.il + '" ';
              }
              else {
                e.data.il ="";
              }
    
              /* for internal use only */
              e.data.kfm_var = '';
              if (e.data.kfm === true) {
                  e.data.kfm_var = ' kfm="" ';
              }
              e.data.fm_var = '';
              if (e.data.fm === true) {
                  e.data.fm_var = ' fm="" ';
              }
              e.data.ferien_var = '';
              if (e.data.ferien === true) {
                  e.data.ferien_var = ' ferien="" ';
              }
              /* only for internal use */
    
              ed.insertContent(
                /* '[fuss link="' + e.data.link + '" vl="' + e.data.vl + '" il="' + e.data.il+ '"]' */
                '[fuss ' + e.data.link + e.data.vl + e.data.il + e.data.kfm_var + e.data.fm_var + e.data.ferien_var + ']'
              );
            }
          });
              }
          }]
    
        });
      });
      })();
    

    Thanks for any help

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Howdy!

    What happens if you simply just enqueue the script?

    So instead of this:

    
    wp_enqueue_script( 'ait_js_script', $ait_pfad );
    

    it simply is:

    wp_enqueue_script( 'ait_js_script' );
    

    The funny thing is I’ve encountered something similar in that the JS object was being called too early and I honestly don’t recall what I did to solve that. :facepalm:

    Hi,
    thanks a lot for answer.
    I had already tested this before and now also again – but unfortunately with the same result. 🙁

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Now the strange part is that I was able to get that working on my local installation.

    I only used a few lines of code as seen on this gist.

    Hi,
    thanks a lot.
    That sounds great – I’ll check as soon as possible and get back to you (I’m on my way right now)

    Hi,
    I’ve re-tested it now and it’s indeed as you say this feature works. Then I tested functions related to it and found that the following function caused the problem.
    I will take a closer look over the next few days and see what’s wrong.

    /* Integrate shortcode generator in tinymce editor */
    
    add_action( 'admin_init', 'ait_button' );
    
    function ait_button() {
        if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
    	 // check if WYSIWYG is enabled //
    	 if ( get_user_option('rich_editing') == 'true') {
                add_filter( 'mce_buttons', 'ait_to_tec_register_tinymce_button' );
    	    add_filter( 'mce_external_plugins', 'ait_to_tec_add_tinymce_button' ); 
    	}
         }
    }
    
    function ait_to_tec_register_tinymce_button( $buttons ) {
         array_push( $buttons, "ait_button");
         return $buttons;
    }
    
    /* this function causes the error */
    function ait_to_tec_add_tinymce_button( $plugin_array ) {
         $plugin_array['my_button_script'] = plugins_url( '/assets/js/ait_buttons.js', __FILE__ ) ;
    return $plugin_array;
    }
    

    If you also have a tip, that would be great of course.
    Thanks again for your help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.