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>
Use htmlentities: http://php.net/manual/en/function.htmlentities.php
onclick="testSwap('<?php echo htmlentities($testtext); ?>')"
Your $testtext is what has the quote in it, correct? If so, htmlentities will turn the quote into a ' (or " if it's a double quote), and it won't break the testSwap onclick.
Edit: I'm sorry, I'm completely changing my answer. Use htmlentities instead (it was urlencode before).
PHP tags get replaced with the results of the expression inside the tag before the page renders as HTML. So since your <?php echo $testtext; ?> is inside single quotes, you will have a problem with those quotes after rendered.
You can escape the quote with a backslash in your string so when it's rendered in HTML it will appear correctly.