2

This question already has an answer here:

What is the best way to pass a boolean into wp_localize_script as from what I can see everything is interpretted as strings.

I have a backend user options form for a plugin, when the values are returned I am using them for a jQuery script, one of them is a boolean, the user selects true or false from a dropdown, using wp_localize_script outputs these as strings (not booleans) "true" or "false" which will fail that parameter in the script.

<?php

  $options = get_option('ng_slicknavmenu');
  // Add PHP plugin variables to the $params[] array to pass to jQuery
  $data = array (
    'ng_slicknav_menu'         => $options['ng_slicknav_menu'],
    'ng_slicknav_parent_links' => $options['ng_slicknav_parent_links'], // this is a boolean true/false
    'ng_slicknav_speed'        => $options['ng_slicknav_speed'] ,
  );

  // Pass PHP variables to jQuery script
  wp_localize_script( 'slickinit', 'phpVars', $data );

This is how I am doing it at the moment in my js init file

   if( phpVars.ng_slicknav_parent_links === "true" )
        $links = true;
    else
        $links = false;


jQuery(document).ready(function($){

ng_slicknav_speedInt = parseInt(phpVars.ng_slicknav_speed, 10);

jQuery(document).ready(function($) {
            $(phpVars.ng_slicknav_menu).slicknav({
                allowParentLinks: $links,
                duration:ng_slicknav_speedInt,
            });
            });
 });

But is there a better way?

I have tried some solutions from Passing boolean values with wp_localize_script ...

'ng_slicknav_parent_links' => ($options['ng_slicknav_parent_links']) ? true : false,

and

'ng_slicknav_parent_links' => (bool)$options['ng_slicknav_parent_links'],

But the answer does not work. The answers there for both result in a string of "1" for both values which is incorrect.

marked as duplicate by birgire, Pieter Goosen, Mayeenul Islam, Nicolai, Howdy_McGee May 4 '15 at 13:44

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

5

Unfortunately wp_localize_script() casts all scalars (simple types) in the passed-in array to strings (and then runs html_entity_decode() on them?!), so the casts mentioned by the answer you quote & @TheDeadMedic will get stringified "1"/"" if boolean, and number strings if ints, which won't work with javascript plugins that demand exact values.

A way around it is to put your arguments in an array within the passed-in array, then they don't get mangled, eg:

$data = array (
    'ng_slicknav' => array(
        'menu'         => $options['ng_slicknav_menu'],
        'parent_links' => (bool) $options['ng_slicknav_parent_links'],
        'speed'        => (int) $options['ng_slicknav_speed'] ,
    ),
);

And you can reference them directly in your javascript:

jQuery(document).ready(function($) {
    $(phpVars.ng_slicknav.menu).slicknav({
        allowParentLinks: phpVars.ng_slicknav.parent_links,
        duration:phpVars.ng_slicknav.speed,
    });
});
  • This doesn't work as boolean comes in as a string /* <![CDATA[ */ var phpVars = {"ng_slicknav":{"menu":"#menu-secondary-navigation","allowParentLinks":"true","duration":"400"}}; /* ]]> */ – neilgee May 3 '15 at 23:48
  • 1
    Are the options typed correctly? If not try doing the casts as suggested ('allowParentLinks' => (bool) $options['ng_slicknav_parent_links'], 'd‌uration' => (int) $options['ng_slicknav_speed']). – bonger May 4 '15 at 1:21
  • ok now both the boolean and integer are returned correctly but the menu doesn't fire, I assume its to do with the nested array, I can see the values OK /* <![CDATA[ */ var phpVars = {"ng_slicknavmenu":{"ng_slicknav_menu":"#menu-primary-navigation-1","prependTo":"body","allowParentLinks":true,"showChildren":true,"duration":400,"label":"MENUGEDD0N"}}; /* ]]> */ – neilgee May 5 '15 at 23:28
  • Here is a gist [link]gist.github.com/neilgee/9bb8d424b4a0a7f2e325 – neilgee May 5 '15 at 23:53
  • Yes as you have it in Example 2 in the gist you need to refer to phpVars.ng_slicknav.ng_slicknav_menu, phpVars.ng_slicknav.prependTo, phpVars.ng_slicknav.label,phpVars.ng_slicknav.allowParentLinks etc... – bonger May 6 '15 at 7:42

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