CODEWITHSUNDEEP
javascriptphpjqueryhtmlckeditor
Liam
Liam

Reputation: 102

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>

You can see in the image below, what the form looks like before I have to refresh the page, and what it looks like after the page has been refreshed. The aim is to get the ckeditor to automatically refresh so that the user doesn't have to do a manual refresh. enter image description here

Upvotes: 1

Views: 462

Answers (1)

ojovirtual
ojovirtual

Reputation: 3362

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]);
}

Upvotes: 1

Related Questions