neilgee
5/5/2015 - 11:42 PM

wp_localize_script using Booleans & Integers

wp_localize_script using Booleans & Integers

jQuery(document).ready(function($) {
    $(phpVars.wpb_stored_options_test).jquerysomething({
    
        prependTo: phpVars.wpb_stored_name,
        label: phpVars.wpb_stored_string,               
        duration: phpVars.wpb_stored_number,
        showChildren: phpVars.wpb_stored_truth,
    });
 });
<?php

//Our Plugin Function Registering and Enqueing our needed scripts
function wpb_scripts_styles() {

//Our main JQuery init script  
wp_register_script ( 'jsinit' , plugins_url( '/js/js-init.js',  __FILE__ ), array( 'jquery' ), '1.0.0', false );

//Calling our stored db wp_options field
$options = get_option( 'wpb_stored_options_test' );
//Wrapping our values in an array =  $data
 $data = array (
  //Wrapping our values in an inner array to protect boolean and integers = wpb_stored
        'wpb_stored_name'   => esc_html( $options['wpb_stored_name'] ), //this is a string
        'wpb_stored_string' => esc_html( $options['wpb_stored_string'] ), //this is a string
        'wpb_stored_truth'  => $options['wpb_stored_truth'], // this is a boolean true/false
        'wpb_stored_number' => $options['wpb_stored_number'], // this is an integer
);

  // Pass PHP variables to jQuery init script 'jsinit'
  wp_localize_script( 'jsinit', 'phpVars', $data );
  // Enqueing our init script after wp_localise_script
  wp_enqueue_script( 'jsinit' );
}

add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );
jQuery(document).ready(function($) {
    $(phpVars.wpb_stored_inner.wpb_stored_options_test).jquerysomething({
    
        prependTo: phpVars.wpb_stored_inner.wpb_stored_name,
        label: phpVars.wpb_stored_inner.wpb_stored_string,               
        duration: phpVars.wpb_stored_inner.wpb_stored_number,
        showChildren: phpVars.wpb_stored_inner.wpb_stored_truth,
    });
 });
//Example 1 - Javascipt init file - using variables for Boolean and parseInt for Integer

//deal with the boolean

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

 if( phpVars.ng_slicknav_child_links === "true" )
        $child = true;
    else
        $child = false;


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

ng_slicknav_speedInt = parseInt(phpVars.ng_slicknav_speed, 10); //deal with the integer

jQuery(document).ready(function($) {
            $(phpVars.ng_slicknav_menu).slicknav({
                prependTo:phpVars.ng_slicknav_position,
                label:phpVars.ng_slicknav_label,
                allowParentLinks:$links,
                duration: ng_slicknav_speedInt,
                showChildren: $child,
            });
            });
 });
 
 //results in 
 
 
/* <![CDATA[ */
var phpVars = {"ng_slicknav_menu":"#menu-primary-navigation-1","ng_slicknav_position":"body","ng_slicknav_parent_links":"true","ng_slicknav_child_links":"false","ng_slicknav_speed":"400","ng_slicknav_label":"MENUGEDD0N"};
/* ]]> */




//Example 2 - Javascipt init file - values are being referenced using the nested array

jQuery(document).ready(function($) {
            $(phpVars.ng_slicknav.ng_slicknav_menu).slicknav({
                prependTo:phpVars.ng_slicknav.ng_slicknav_position,
                label:phpVars.ng_slicknav.ng_slicknav_label,
                allowParentLinks:phpVars.ng_slicknav.ng_slicknav_parent_links,
                duration: phpVars.phpVars.ng_slicknav.ng_slicknav_speed,
                showChildren:phpVars.ng_slicknav.ng_slicknav_child_links,
            });
 });
 
 //results in
 
<script type="text/javascript">
/* <![CDATA[ */
var phpVars = {"ng_slicknav":{"ng_slicknav_menu":"#menu-primary-navigation","ng_slicknav_position":".navicon","ng_slicknav_parent_links":true,"ng_slicknav_child_links":true,"ng_slicknav_speed":600,"ng_slicknav_label":"ohhellomrmagoo"}};
/* ]]> */
</script>

//this returns proper formed boolean and integer values
<?php

//Our Plugin Function Registering and Enqueing our needed scripts
function wpb_scripts_styles() {

//Our main JQuery init script  
wp_register_script ( 'jsinit' , plugins_url( '/js/js-init.js',  __FILE__ ), array( 'jquery' ), '1.0.0', false );

//Calling our stored db wp_options field
$options = get_option( 'wpb_stored_options_test' );
//Wrapping our values in an array =  $data
 $data = array (
  //Wrapping our values in an inner array to protect boolean and integers = wpb_stored
    'wpb_stored_inner' => array(
      //Assigning our required values from the db
        'wpb_stored_name'   => esc_html( $options['wpb_stored_name'] ), //this is a string
        'wpb_stored_string' => esc_html( $options['wpb_stored_string'] ), //this is a string
        'wpb_stored_truth'  => (bool)$options['wpb_stored_truth'], // this is a boolean true/false
        'wpb_stored_number' => (int)$options['wpb_stored_number'], // this is an integer
    ),
);

  // Pass PHP variables to jQuery init script 'jsinit'
  wp_localize_script( 'jsinit', 'phpVars', $data );
  // Enqueing our init script after wp_localise_script
  wp_enqueue_script( 'jsinit' );
}

add_action( 'wp_enqueue_scripts', 'wpb_scripts_styles' );
<?php

//wp_localize_script  by default passes everything in as strings so for booleans and integers when being referenced in your javascript you need to do some trickery 

//Example 1 - passing in booleans as strings
$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_position'     => $options['ng_slicknav_position'],
    'ng_slicknav_parent_links' => $options['ng_slicknav_parent_links'],//boolean
    'ng_slicknav_child_links'  => $options['ng_slicknav_child_links'],//boolean
    'ng_slicknav_speed'        => $options['ng_slicknav_speed'] ,//integer
    'ng_slicknav_label'        => $options['ng_slicknav_label'],
  );

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

  wp_enqueue_script( 'slickinit' );
  
  
  
  
//Example 2 - passing in booleans and integers as the correct type by nesting the array in another for protection
//And by casting the data type such as (bool) and (int)
  
$options = get_option('ng_slicknavmenu');

 $data = array (

    'ng_slicknav' => array(//array nested to protect boolean and integer values
        'ng_slicknav_menu'         => $options['ng_slicknav_menu'],
        'ng_slicknav_position'     => $options['ng_slicknav_position'],
        'ng_slicknav_parent_links' => (bool) $options['ng_slicknav_parent_links'], // this is a boolean true/false
        'ng_slicknav_child_links'  => (bool) $options['ng_slicknav_child_links'], // this is a boolean true/false
        'ng_slicknav_speed'        => (int) $options['ng_slicknav_speed'],//this is an integer
        'ng_slicknav_label'        => $options['ng_slicknav_label'],
    ),
);

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

  wp_enqueue_script( 'slickinit' );