wp_localize_script() escaping URL WordPress
I use the following function to pass parameters via wp_localize_script() to leaflet.js within my plugin [[LINK href="http://mapsmarker.com"]]mapsmarker.com[[/LINK]]:
function lmm_frontend_enqueue_scripts() {
wp_enqueue_script( array ( 'jquery' ) );
wp_enqueue_script( 'leafletmapsmarker', LEAFLET_PLUGIN_URL . 'leaflet-dist/leaflet.js', array(), NULL);
wp_localize_script ( 'leafletmapsmarker', 'leafletmapsmarker_L10n', array(
'lmm_zoom_in' => __( 'Zoom in', 'lmm' ),
'lmm_zoom_out' => __( 'Zoom out', 'lmm' )
) );
if ( $lmm_options[ 'defaults_marker_shadow' ] != NULL ) {
wp_localize_script ( 'leafletmapsmarker', 'leafletmapsmarker_marker_shadow', array(
<strong>'lmm_marker_shadow' => LEAFLET_PLUGIN_URL . '/leaflet-dist/images/marker-shadow.png'</strong>
) );
} else {
wp_localize_script ( 'leafletmapsmarker', 'leafletmapsmarker_marker_shadow', array(
<strong><strong>'lmm_marker_shadow' => LEAFLET_PLUGIN_ICONS_URL . '/' . $lmm_options[ 'defaults_marker_shadow' ]</strong></strong>
) );
}
}
Unfortunately, the URL gets escaped with backslashes, resulting in the following output:
<script type='text/javascript'>
/* <![CDATA[ */
var leafletmapsmarker_L10n = {"lmm_zoom_in":"Zoom in","lmm_zoom_out":"Zoom out"};
var leafletmapsmarker_marker_shadow = {"lmm_marker_shadow":"http:\/\/current.mapsmarker.com\/wp-content\/uploads\/leaflet-maps-marker-icons\/"};
/* ]]> */
</script>
I searched the web and found this approach: [[LINK href="http://wordpress.stackexchange.com/questions/41989/wp-localize-script-escaping-my-url-fix-or-alternative"]]http://wordpress.stackexchange.com/questions/41989/wp-localize-script-escaping-my-url-fix-or-alternative[[/LINK]], saying I have to load the code via a function and action, which I am already doing at the beginning of the plugin:
add_action('wp_print_styles', array(&$this, 'lmm_frontend_enqueue_stylesheets'),4);
Does anyone know another way to remove the backslashes from the output?
Answers (1)
Milan Petrovic answers:
There is nothing wrong here:
var leafletmapsmarker_marker_shadow is JavaScript object, using double quote, so string with slashes in it, must be escaped. When you try to access this object and value, you will see it as it should be.
Milan
Robert Seyfriedsberger comments:
are you sure? I tried to access this object and value in leaflet.js by chaning
shadowUrl:L.ROOT_URL+"images/marker-shadow.png"
to
shadowURL:leafletmapsmarker_marker_shadow.lmm_marker_shadow
unfortunately, this didnt work...
Milan Petrovic comments:
Can you try using unescape() function?
Robert Seyfriedsberger comments:
yes, but neither
if ( $lmm_options[ 'defaults_marker_shadow' ] != NULL ) {
wp_localize_script ( 'leafletmapsmarker', 'leafletmapsmarker_marker_shadow', array(
'lmm_marker_shadow' => unescape(LEAFLET_PLUGIN_URL . '/leaflet-dist/images/marker-shadow.png')
) );
nor
if ( $lmm_options[ 'defaults_marker_shadow' ] != NULL ) {
wp_localize_script ( 'leafletmapsmarker', 'leafletmapsmarker_marker_shadow', unescape(array(
'lmm_marker_shadow' => (LEAFLET_PLUGIN_URL . '/leaflet-dist/images/marker-shadow.png')
) );
did work :-/
Milan Petrovic comments:
That is strange. Localize script function uses json_encode function that generates this encoded output. To be honest, I had some issues with localize script few times, and I decided to always print settings like this manually.