Question

I’m attempting to echo a PHP variable into my script, however it seems to break the rest of the script:

Here’s my PHP:

$geo_options = "<option value=\"0\">Select country</option>
<option value=\"AF\">Afghanistan</option>
<option value=\"AL\">Albania</option>
<option value=\"DZ\">Algeria</option>
<option value=\"AS\">American Samoa</option>
<option value=\"AD\">Andorra</option>
<option value=\"AG\">Angola</option>
...";

And my Javascript/jQuery:

$(document).ready( function() {
    var id = $(this).val();

    function countProperties(obj) {
      var prop;
      var propCount = 0;

      for (prop in obj) {
        propCount++;
      }
      return propCount;
    }
      var options = "<?php echo $geo_options; ?>";
      $('#geo-location').append(options);
      $.get('json.php',
        function(data) {
            $('input[name=url]').val(data.url);
            $('select[name=r_id]').prepend("<option selected='selected' value='" + data.rid + "'>" + data.rname + "</option>");
            $('input[name=r_min]').val(data.rmin); $('input[name=r_max]').val(data.rmax);
            if(data.blank == 1) {
            $('input[name=blank]').attr("checked", "checked"); 
            }

            var geo = (countProperties(data)-5)/2;


            }, 'json');

    });

If I comment out var options = '<?php echo $geo_options; ?>'; so this must be the part stopping the rest of the script from executing correctly (from that point downwards, as even $('#geo-location').append(); doesn’t work).

I just can’t figure out why this would be though?

Any help, would be greatly appreciated.

(Note: I’ve attempted to use both ' single quotes and " double quotes to encase the variable, thinking that the escapes in the string might be the problem, but neither have made a difference).

Update:

I’ve now placed my entire code, both JS and HTML into a JSFiddle as I figure there might be something I haven’t spotted at all. To recap on what I’ve tried so far; using different quote types (single, double, none), re-escaping the variable $geo_options with add_slashes(), str_replace() and json_encode(), echoing the variable $geo_options into a random HTML element, which worked fine.

My JsFiddle: http://jsfiddle.net/SFwB6/

I must confess, I’m totally stumped.

Update 2:

I’ve attempted to make it much easier, and place the entire $geo_options string in var options from the beginning; http://jsfiddle.net/NUCRG/.

However, both JSLint and Dreamweaver display a syntax error, but I’m not sure why. Perhaps this is the root of the problem?

Answer 1

What’s happening is that you need to sets of escapes, when you only have one.
When you echo that string into the javascript, because the string is encapsulated with double quotes ("), this means that each occurence of \" in the string is just printed as ", because the \ is being removed as an escape character in php.

But then javascript comes up, and also needs that escape character because you are, again encapsulating it in a string.

So to print it, use something like
var options = "<?php echo str_replace('"', '\"', $geo_options); ?>";

EDIT:
If you want to go the json route, try this:

var options = <?php echo json_encode($geo_options); ?>;
for (var i in options)
    $('#geo-location').append('<option name="'+i+'">'+options[i]+'</option>');

Instead of

var options = "<?php echo $geo_options; ?>";
$('#geo-location').append(options);

Note, the php array geo_options will need to look something like:

$geo_options = array ("0"=>"Select country",
"AF"=>"Afghanistan",
"AL"=>"Albania",
"DZ"=>"Algeria",
"AS"=>"American Samoa",
"AD"=>"Andorra",
"AG"=>"Angola");

EDIT 2:
Alright then, try this

var options = '<?php echo str_replace(array("\n","\r"), '', $geo_options); ?>';

and make sure the $geo_options string is formatted like (and there are NO single quotes allowed):

<option value="0">Select country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AG">Angola</option>