Get contents of CKEDITOR to appear when dropdown selection is made

Previously the user would select a page to update from a dropdown selection. A javascript onchange event would cause the textarea to populate with the corresponding content from the database. I have now replaced the text areas with CKEDITOR and the javascript is now no longer populating the CKEDITOR, unless, I refresh the page.

How do I get the CKEDITOR to automatically refresh, and therefore populate with the content from the database, when a selection is made from the dropdown?

<?php 
if(!isset($_SESSION['user']))
{
 header("Location: login.php");
}  
//$vbCrLf = chr(13).chr(10);
$vbCrLf = "";

require ('mysqli.php');

//create and execute query
$query = 'SELECT PageId, PageTitle, PageContent, PageContent2 FROM pages ORDER BY PageId';
$result = $conn->query($query);
//create selection list
$DropDownList = "<select name='PageId' id='PageId' onchange='SelectChanged();'> ".$vbCrLf;
//Code below may need to be deleted
$DropDownList .= "<option value=''>--SELECT PAGE--</option> ".$vbCrLf;
// as it could give an error

while($row = mysqli_fetch_row($result))
{
    $heading = htmlentities($row[0]);
    $DropDownList .= "<option value='$heading'>".json_encode($row[1])."</option> ".$vbCrLf;
    $PageTitlePhp .= 'PageTitleArray['.$heading.']='.json_encode($row[1]).';'.$vbCrLf;
    $PageContentPhp .= 'PageContentArray['.$heading.']='.json_encode($row[2]).';'.$vbCrLf;
    $PageContent2Php .= 'PageContent2Array['.$heading.']='.json_encode($row[3]).';'.$vbCrLf;
}

$DropDownList .= "</select> ".$vbCrLf;
$conn->close();
?>

<html>
<head>
<title>Update Page</title>


<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
</head>

<body>


<br>
<!-- php below; Creates a form to update database content -->
<form  method="post"  action="update_website_page_handle.php">
<table width="943" height="528">
<tr>
<td align="right">&nbsp;</td>
<td height="32" colspan="2" align="left"><h1> Update Page </h1></td>
</tr>
<tr>
<td width="60" align="left">&nbsp;</td>
<td width="134" height="32" align="left"><p>Select Page ID:</p></td>
<td width="733">
    <?php echo $DropDownList; ?>
</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
<td align="left" valign="top"><p>Page Title:</p></td>
<td><textarea style="width: 500px; height: 50px;" name="PageTitle" id="PageTitle" class="heading"></textarea></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
<td align="left" valign="top"><p>Page Content:</p></td>
<td>
  <textarea style="width: 500px; height: 200px;" name="PageContent" id="PageContent" class="date"></textarea>

                    <script>
                    CKEDITOR.replace( 'PageContent' );
                    </script>   

</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
<td align="left" valign="top"><p>Extra Page Content:</p></td>
<td>
        <textarea style="width: 500px; height: 200px;" name="PageContent2" id="PageContent2" class="details"></textarea>

                <script>
                CKEDITOR.replace('PageContent2');               
                </script>

</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
  <input name="update" type="submit"  id="update" value="Update">
</td>
</tr>
</table>
</form>
<script language="Javascript" type="text/javascript">
var PageTitleArray = new Array();
<?php echo $PageTitlePhp; ?>
var PageContentArray = new Array();
<?php echo $PageContentPhp; ?>
var PageContent2Array = new Array();
<?php echo $PageContent2Php; ?>
function SelectChanged()
{
    var PageId = document.getElementById('PageId').value;
    document.getElementById('PageTitle').value = PageTitleArray[PageId];
    document.getElementById('PageContent').value = PageContentArray[PageId];
    document.getElementById('PageContent2').value = PageContent2Array[PageId];
}
SelectChanged(); // added to execute the function after loading to select first value.
</script>
</body>
</html>

Answers


You can use CKEDITOR's API, that has a setData method to put content into a previously initialized editor:

function SelectChanged()
{
    var PageId = document.getElementById('PageId').value;
    document.getElementById('PageTitle').value = PageTitleArray[PageId];
    CKEDITOR.instances["PageContent"].setData(PageContentArray[PageId]);
    CKEDITOR.instances["PageContent2"].setData(PageContent2Array[PageId]);
}

Need Your Help

Ajax features broken across browsers (on one machine)

php jquery ajax codeigniter xmlhttprequest

I have built a CMS system using jQuery and PHP, it has worked consistently for multiple users across different platforms over the past year or so.