Page 1 of 1

Special Characters Within Javascript

Posted: Fri Jan 27, 2012 11:41 pm
by unifiedac
Hello,

I'm having an issue printing a string held in a PHP variable, within JavaScript. I am dynamically generating a keyword value for the Amazon MP3 widget, but for some reason apostrophes in the string will not escape within JavaScript. Here is the code:

Code: Select all

 <?php 

     $keyword = $dynamicallygeneratedvariable;
?>
$dynamicallygeneratedvariable is a string that contains quotes. In the working example below, the actual string is "Beethoven's Trinklied No. 282".

See the problem in action:

http://www.drinking-songs.com/beethoven ... ied-no-282

Notice how the widget title on top of the right sidebar does not contain the apostrophe? Instead it is being replaced by the ASCII code. I have tried all the decode functions for PHP with no success.

Results outside of JavaScript:
"Beethoven's Trinklied No. 282

Results within JavaScript:
Beethoven&#8217;s Trinklied No. 282

Here is the JavaScript code that produces the widget:

<script type='text/javascript'>

var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='hotogestjo-20';
amzn_wdgt.widgetType='SearchAndAdd';
amzn_wdgt.ASIN='B0011Z0YR2,B00137W4P8,B0013G0PG4,B001AU8ZLK,B001AUCJZ8,B001AUEMDK,B001AU8YB6,B001AU8YBQ,B001AU8YCK,B001AUCK2U,B001AUEMFS,B001AUCK52,B001AU6XE6,B001AUEMH6';
amzn_wdgt.keywords='<?php echo $keyword; ?>';
amzn_wdgt.title='<?php echo $keyword; ?>';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='True';
amzn_wdgt.marketPlace='US';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.com/20070822/US ... ect_1_5.js'>
</script>

Any help is appreciated. Thanks!

Re: Special Characters Within Javascript

Posted: Sat Jan 28, 2012 9:13 pm
by twinedev
(NOTE: for this post here, I added the space between the & and the #8217 each time it was used, because well the forum was outputting it as is, so the browser was parsing the entity to the actual character for display here as the angled apostrophe. After seeing this, I wonder did you put the actual angled apostrophe in your post, or the entity, and it just displayed the angled apostrophe for your post)

The issue is that $keyword does NOT contain Beethoven's Trinklied No. 282 as proven by viewing the source code on the link given:

Code: Select all

var amzn_wdgt={widget:'MP3Clips'};
amzn_wdgt.tag='hotogestjo-20';
amzn_wdgt.widgetType='SearchAndAdd';
amzn_wdgt.ASIN='B0011Z0YR2,B00137W4P8,B0013G0PG4,B001AU8ZLK,B001AUCJZ8,B001AUEMDK,B001AU8YB6,B001AU8YBQ,B001AU8YCK,B001AUCK2U,B001AUEMFS,B001AUCK52,B001AU6XE6,B001AUEMH6';
amzn_wdgt.keywords='Beethoven& #8217;s Trinklied No. 282';
amzn_wdgt.title='Beethoven& #8217;s Trinklied No. 282';
amzn_wdgt.width='250';
amzn_wdgt.height='250';
amzn_wdgt.shuffleTracks='True';
amzn_wdgt.marketPlace='US';


As you can see, the angled apostrophe is actually the entity & #8217; and then on Amazon's end, they are generating code with that as is to pass as a variable to the flash file that is being displayed:

Code: Select all

Title=Beethoven%26%238217%3Bs%20Trinklied%20No.%20282
(that is the string converted to a urlencoded version)

So that means, that the flash file, takes the value, runs an equivalent of htmlspecialchars() on it which sees the & and converts it to & thus it is displaying &#8217;

However, this looks to be a fail on their end, as since it is displaying text IN the flash file, and not as code on the page, it will display as is &#8217;

Long story short, the angled apostrophe is being double converted over to an entity value (once in your script, once in their flash), both of which are not needed since it isn't being display as text output to the browser. Get the first one fixed (where your script has the & #8217; ) and then use addslashes(); so it doesn't break your quoting in javascript if it was using a regular single quote, then at that point contact amazon about the issue on their end.

The addslashes part I am referring to is:

Code: Select all

amzn_wdgt.title='<?php echo $keyword; ?>';
to

Code: Select all

amzn_wdgt.title='<?php echo addslashes($keyword); ?>';
The first one (assuming you have a single quote in $keyword) would give you:

Code: Select all

amzn_wdgt.title='Beethoven's Trinklied No. 282';
which will crash the JS. the second one give the correct output of

Code: Select all

amzn_wdgt.title='Beethoven\'s Trinklied No. 282';
-Greg