php - Apostrophe not working in OpenJS Grid

I am using OpenJS Grid to show a grid on a page and I wrote a little modal script to add a message to the grid for users to add a row to grid.. I specifically used PDO so special characters would be escaped but I noticed every time I use a message with an apostophe in it all characters past the apostrophe don't get added to message. I thought PDO handled this automatically? Here is code: php-

<?php

ini_set('display_errors',1); 
error_reporting(E_ALL);


header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
include ("dbinfo.inc.php"); //include login info file

//Start a PDO session to insert the form data into the MySQL Table

try
    {
      $conn=new PDO($dsn, $username,$password);
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }
catch (PDOException $e)
    {
    $error_message=$e->getMessage();
    echo "<h1>Resource Unavailable. Please Contact the System Administrator</h1>";
    }

$prsn_from=$_POST['from_val'];
$note=$_POST['note_val'];
$crnt_date=date('Y-m-d H:i:s');


   //Clean input to make sure it is formatted with a leading Capital letter.
$prsn_from=ucfirst($prsn_from);

if ($prsn_from !='') { $stmt = $conn->prepare("INSERT INTO Messages SET prsn_from = :prsn_from, note = :note, crnt_date = :crnt_date");


     $stmt->execute(array(
            ':prsn_from' => $prsn_from,
            ':note' => $note,
            ':crnt_date' => $crnt_date));


     //Return to Main Page.      
     $url = 'http://' . $_SERVER['HTTP_HOST'];            // Get the server
     $url .= rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); // Get the current directory
     $url .= '/index.html';            // <-- Your relative path
     header('Location: ' . $url, true, 302);              // Use either 301 or 302 
     die();
  }

else {

echo '<h2>Attention. You Did Not Enter a Message. Please enter the Message</h2>';

echo '<h2>At a Minimum...</h2>';
}
?>
Copy code

The php OpenGrid uses:

<?php
    // connect to db
    mysql_connect("localhost","alank","alank");
    mysql_select_db("Bulletin_Board");

require_once("grid.php");
$grid = new Grid("Messages", array(
"save"=>true,
"delete"=>true,
"select" => 'selectFunction'
));
Copy code

And the HTMl markup:

<!--OpenJS Grid Markup -->
    <h2>Messages</h2>
    <!--Note that adding type="text" to a table column makes it editable.-->

    <table action="ajax.php">
      <tr>  
        <th col="prsn_from" width="100">From:</th>
        <th col="note" width="350" type="text">Message</th>
        <th col="crnt_date" width="200">Date/Time Entered</th>
      </tr>
    </table>

    <!-- End OpenJS Grid Markup --> 

    <!-- Add a Message Modal here...-->

  <!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#myModal">
 Add a Message
</button>

<!-- Modal -->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div >
  <div >
   <div >
    <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h3 id="myModalLabel">Add a Message</h3>
   </div>
   <div >



   <!-- Add Message Form 
Copy code

Any input on how to resolve this appreciated.