I have 3 pages that load the same slideshow. Am trying to consolidate to one page by passing new content in a variable from javascript to an html element. Effect should be similar to ajax. Passed content includes html markup. All works fine, but if I include an apostrophe symbol in the text, it fails. I can work around by using the acute symbol; but would like to use the apostrophe. Here's a sample of the markup and script. Same result in firefox, chrome and ie9. Not a big deal, but I´d like to understand why it fails. Any ideas?
<?php
// Test of script passing content to <p> element
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<script type="text/javascript">
function testSwap(text) {
var text1=text;
document.getElementById('test').innerHTML = text1;
}
</script>
</head><body>
<?php
$testtext="<img style= " float:left;margin:10px " src= " http://www.w3schools.com/images/pulpit.jpg " alt=" Pulpit rock " width="50" height="60" /> <span style="font-weight:bold;font-size:16px;text-decoration:underline" > Second Page Title </span> : This page tells how we found our family´s origins. This sample includes an image, a span element with styling, and a double line break. <br /><br /> They all work. Unfortunately, the script fails if I include an apostrophe in this text so I use ´ instead.<br /><br />Same result in firefox, chrome and ie9. Not a big deal, but I´d like to understand why it fails. Any ideas?";
?>
<div><button type="button" onclick="testSwap('<?php echo $testtext; ?>')">Click Me!</button></div>
<p id='test'><span style='font-weight:bold;font-size:16px;text-decoration:underline'>My Main Page Title:</span>
The pages are in a genealogy site with our family's history. Main page introduces site and describes content<br /><br />Other two pages use same slide show of family pictures, but have more detailed info.<br /><br />Menu currently directs to a new page and reloads the slideshow. I plan to use javascript to avoid the reload if user has it enabled.<br /><br />This sample demonstrates the idea. Click on the button for second page.
</p>
</body></html>
