CKEDITOR to dynamically get data from ajax - CKEDITOR doesn't show on ajax data content

Here is my ajax code:

  function showData(str)
            {
                if (str == "")
                {
                    document.getElementById("ajax-content").innerHTML="";
                    return;
                } 

                // Code for IE7+, Firefox, Chrome, Opera, Safari
                if (window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();
                }

                // Code for IE6, IE5
                else
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("ajax-content").innerHTML=xmlhttp.responseText;
                    }
                }
				
                xmlhttp.open("GET","showData.php?id="+str,true);

                xmlhttp.send();
            }

and here is the showData.php where I get the content for the CKEDITOR.

<?php


// Receive variable from URI
    $id = $_GET["id"];

$qry = "select * from tbl_services where service_id = $id";
include_once('db_con.php');
$result = mysqli_query($con,$qry);
		$row = mysqli_num_rows($result);
		$service = mysqli_fetch_array($result);
$content = $service['content'];
$title = $service['title'];
// <textarea name="editservicecontent" id="content" rows =  "12"></textarea>   



?>

<textarea name="editservicecontent" class ="ckeditor" rows =  "12"><?php echo $content;?></textarea>   

and here is my html file:
 

  <select name="news" onchange="showData(this.value)">
            <option value = "">Select ID:</option>
           <?php
			while($row = mysqli_fetch_array($result))
			{
				echo "<option value = '".$row['service_id'] . "'>". $row['title'] . "</option>";
			}
		   ?>
        </select>

	<form action = "<?php $_SERVER['PHP_SELF'];?>" method = "POST">
	<div id="ajax-content"></div>
</form>

the textarea is showing the contents from the database but the CKEDITOR is nowhere to be found. Ive tried the CKEDITOR.append but is not working..
please help me..
 

I hope the developers of CKEDITOR will make the ckeditor easy to use on simple ajax applications on future updates..