CK editor doesn't work when using it inside ajax popup

My project uses CKEditor for richtext interface. the problem is: - I have a jquery popup. before showing this popup i made an ajax call to server to fetch records after fetching records, it shows edit interface to edit record, there is a textbox that i need to integrate CKEditor. when i integrate the editor the text area changes to the editor successfully, but no text inside the text area is displayed. i see the textarea is being filled with text in firebug, but the editor is empty and cannot edit.

Here is my code

This is the home page

<?php $this->load->view('menu'); ?>
<div id="rightContent">
    <h3>Events&nbsp;&&nbsp;News</h3>
    <div align="right">
    <?php echo anchor('eventsandnews/add','ADD NEW',array('class'=>'button')); ?>
    </div>
        <div class="sukses" style="display:none;">

        </div>
        <table class="data">
            <tr class="data">
                <th class="data" width="30">No</th>
                <th class="data">Text</th>
                <th class="data">Date</th>
                <th class="data" width="75">Actions</th>
            </tr>
            <?php 
            $i=1;
            foreach ($query->result() as $row){ ?>
            <tr class="data" id="an<?php echo $row->id; ?>">
                <td class="data" width="30"><?php echo $i; ?></td>
                <td class="data"><?php echo substr($row->newstxt,0,30); ?></td>
                <td class="data"><?php echo $row->ndate; ?></td>
                <td class="data" width="75">
                <center>
                <a href="<?php echo $row->id; ?>" id="edit" class="edit" name="edit"><img src="<?php echo base_url(); ?>mos-css/img/edit.png"></a>&nbsp;&nbsp;&nbsp;
                <a href="<?php echo $row->id; ?>" id="delete" class="delete" name="delete"><img src="<?php echo base_url(); ?>mos-css/img/delete.png"></a>
                </center>               </td>
            </tr>
            <?php
            $i++;
             } ?>
        </table>
        <div id="paging">
        <?php echo $paging; ?>
        </div>
</div>
<script>
  $(function() {  
  $( "#dialog" ).dialog({
      autoOpen: false,
      height: 350,
      width: 500,
      show: {
        effect: "slide",
        duration: 500
      },
      hide: {
        effect: "slide",
        duration: 500
      }
    });
    $(".edit").click(function(event){
        event.preventDefault();
        var id = $(this).attr("href");      
        $.ajax({
            url: '<?php echo site_url().'eventsandnews/edit/'; ?>'+id,
            success: function(data) {
            $("#dialog").html(data);
            $( "#dialog" ).dialog( "open" );
            debugger;
            CKEDITOR.replace( 'update' );

            }
        });
    });

    $(".delete").click(function(event){
        event.preventDefault();
        var v = confirm('Are you sure to delete?');
        if(v==true){
            var id = $(this).attr("href");      
            $.ajax({
                url: '<?php echo site_url().'eventsandnews/delete/'; ?>'+id,
                success: function(data) {
                    $('.sukses').html('Deleted successfully');
                    $('#an' +id).remove();
                    $('.sukses').show('slow');
                     setTimeout(function() {
                        $('.sukses').hide('slow');
                      }, 2500);
                }
            });
        }

    }); 


  });
  </script>

<div id="dialog" title="Edit">

</div>

      

        
        
        
      

    

This is the Ajax page

<script>
$(document).ready(function(){
    $( "#eventsandnewsdate" ).datepicker();
    $( "#eventsandnewsdate" ).datepicker( "option", "dateFormat", "dd/mm/yy" );

    $("#sub").click(function(){
     var a =    $("#update").val();
        if($.trim(a)==''){
            $('.gagal').html('Must enter a announcement !');
            $('.gagal').show('slow');           
        }else{
            var hiddenid = $('#id').val();
            var text = $('#update').val();
            $.ajax({
              type: "POST",
              url: "<?php echo site_url().'announcements/update/'; ?>",
              data: { id: hiddenid, announce: text }
            }).done(function( msg ) {
                if(msg==1){
                    $( "#dialog" ).dialog( "close" );
                    setTimeout(function() {
                        document.location.reload();
                     }, 600);

                }
            });

            ;
        }       
    });
});
</script>
<div class="gagal" style="display:none;">

</div>
<table width="95%">         
            <tr>
              <td><strong>Annoucement</strong></td>
              <td><textarea onclick="$('.gagal').hide('slow');" name="update" id="update" ><?php echo $query[0]['atext']; ?>
              </textarea></td>
  </tr>
            <tr>
            <td width="125">Date</td><td>&nbsp;</td></tr>
            <tr><td></td><td><input type="button" class="button" id="sub" name="sub" value="Submit">
            <input type="hidden" name="id" id="id" value="<?php echo $id; ?>">
            </td></tr>
        </table>

      

        
        
        
      

    

Can anyone help me?