PHP echo's javascript as text?

Question

I am trying to echo some javascript but it is making it as text, it works fine on my test page but when I add it to wordpress it turns it into text. But I have another part where the script runs fine.

    echo ' 
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: \'short_name\',
  route: \'long_name\',
  locality: \'long_name\',
  administrative_area_level_1: \'short_name\',
  country: \'long_name\',
  postal_code: \'short_name\'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById(\'autocomplete\')),
      { types: [\'geocode\'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, \'place_changed\', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = \'\';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

if (typeof jQuery != \'undefined\') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}

jQuery(document).ready(function () {initialize();});

    </script>
   <style>

      #autocomplete {
        top: 0px;
        left: 0px;
        width: 350px;
      }

    </style>

  </head>

  <div>

';

I know that the code works, just that the echo doesn't. Please help.

Sorry for the sloppy code :[

Output :

<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&#038;sensor=false&#038;libraries=places"></script><br />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><br />
   <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.</p>
<p>var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};</p>
<p>function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}</p>
<p>// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();</p>
<p>  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }</p>
<p>  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]</p>
<p>if (typeof jQuery != 'undefined') {</p>
<p>    alert("jQuery library is loaded!");</p>
<p>}else{</p>
<p>    alert("jQuery library is not found!");</p>
<p>}</p>
<p>jQuery(document).ready(function () {initialize();});</p>
<p>    </script></p>
<style>
<p>      #autocomplete {
        top: 0px;
        left: 0px;
        width: 350px;
      }</p>
</style>

I am including it, using a plugin, I have used it before and it worked great. — Steve Edwin
– Steve Edwin, Commented Mar 25, 2014 at 21:57
does php know how to handle strings with carriage returns in single quotes? — robbmj
– robbmj, Commented Mar 25, 2014 at 21:58
JavaScript is text - if PHP is rendering it as text, that is what you want. I'm trying to work out what the problem is here. I'd advise you not to trap JavaScript inside PHP strings this way (except where bits really are dynamic) - it is better to put them in a PHP file and include them. — halfer
– halfer, Commented Mar 25, 2014 at 22:01
put all that in a PHP file by itself without the echo and use this --- include 'myfile.php'; --- place that to the position you want that html to appear -- may not work in word press — Tasos
– Tasos, Commented Mar 25, 2014 at 22:02

Ian · Accepted Answer · 2014-05-22 03:16:32Z

There are a couple of different ways you can do this.

1) Create a variable heredoc string with all your javascript code in it. Then echo that string. Test to see if that works.

2)The proper way to add scripts to WordPress whether it's a plugin or a theme is to use the wp_enqueue_scripts function (documentation here) and call .

WordPress syntax is as follows:

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Step 1: Place your script into its own js file, for example your-map-canvas.js.

Step 2: Create a new function.

function your_map_canvas(){}

Step 3: In the function, create your own handle (can be anything). For this example I'll use map-canvas. You will want to make the name unique enough that other plugins/themes won't use the same function and cause conflicts.

Step 4: Add the source to the file. If it's a plugin (as you've indicated), use plugin_dir_path(); (documentation here) to get dynamically get the path to your plugin folder. $src should look something like this now: plugin_dir_path(__FILE__).'path/in/plugin/folder/to/your-map-canvas.js'.

This is what you should have so far:

function your_map_canvas(){ wp_enqueue_script('map-canvas', plugin_dir_path(__FILE__).'your-map-canvas.js'); }

Step 5: Call your function with the wp_enqueue_scripts hook

add_action( 'wp_enqueue_scripts', 'your_map_canvas' );

The final code should look something like this:

function your_map_canvas(){
    wp_enqueue_script('map-canvas', plugin_dir_path(__FILE__).'your-map-canvas.js');
}

add_action( 'wp_enqueue_scripts', 'your_map_canvas' );

Steve Edwin · Accepted Answer · 2014-03-25 22:27:31Z

0

Wordpress converts it to text even when I add it directly into the text editor, because of the spaces and newlines in the code. So I had to use a raw html plugin that allows the code to go through untouched by wordpress. So I added the code in between the plugin snippets and it worked.

answered Mar 25, 2014 at 22:27

Steve Edwin

891 silver badge7 bronze badges

Collectives™ on Stack Overflow

PHP echo's javascript as text?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related