CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Marcus Tan
Marcus Tan

Reputation: 417

AJAX call for CKEDITOR visibility not working

I'm currently using AdminLTE template to do my project. It has a built-in CKEDITOR plugin which can be implemented in the textarea. But I'm trying to have a ajax http function to request the textarea from another php file call "GetTatacara.php". But when I select the option in selection box and move to the form which contains the textarea, the CKEDITOR did not show up.

I had correctly put the reference for the CKEDITOR plugin as i have tried to hard-code a textarea without AJAX call and it can be shown up, just that it won't show up when i'm trying to call it AJAX.

Here is my code for use the ajax call to request the textarea form:

<form class="form" id="form" action="" method="POST" enctype="multipart/form-data">

    <div class="form-group">
      <label>Tatacara</label>
      <select class="form-control" name="tatacaraType" id="tatacaraType" onchange="showTatacara(this.value)">
        <option value=""><small>Select a tatacara</small></option>
        <option value="1">Tatacara 1</option>
        <option value="2">Tatacara 2</option>
        <option value="3">Tatacara 3</option>
        <option value="4">Tatacara 4</option>

      </select>
    </div>

    <div id="txtHint"><b>Tatacara detail will be listed here.</b></div>
      <!-- /.form group -->
      <div class="checkbox">
        <button id="testing" type="submit" class="btn btn-primary"  disabled>Save </button>
      </div>

    </div><!-- /.box-body -->

</form>

Here is the JavaScript function code:

 <script>
function showTatacara(str) {
    if (str == "") {
      document.getElementById("txtHint").innerHTML = "";
      return;
    } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","getTatacara.php?q="+str,true);
            xmlhttp.send();
    } 
}
</script>

Here is code that have in GetTatacara.php :

<!DOCTYPE html>
<html>
<head></head>
<body>
<?php
include 'dbConnection.php';

global $dbLink;

$q = intval($_GET['q']);


$sql="SELECT * FROM tatacara_item WHERE tatacara_item_id = '".$q."'";
$result = mysqli_query($dbLink,$sql);

while($row = mysqli_fetch_array($result)) {

   if($row['tatacara_title']==''){
         echo 
    <<<EXAMPLE
    <input type="hidden" name="tatacara_id" value="$q">
    <div class="form-group">
                                            <label for="exampleInputEmail1">Title</label>
                                            <input type="text" class="form-control" name="tatacaraTitle" id="tatacaraTitle" placeholder="Tatacara Berurusan Dengan Sekolah" onChange="checkDisabled(testing);">
                                        </div>

                                <div class="form-group">
                                        <label>Activity Description</label>

                                 <span class="form-group">
                                        <textarea id="editor1" name="editor1" rows="10" cols="80">
                                            This is my textarea to be replaced with CKEditor.
                                        </textarea>  
                                </span>
                                </div>   
                                  <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);">
                                            <p class="help-block">Your picture size not more than 2MB. (Only JPEG or JPG is allowed).</p>
                                   </div><!-- /.form group -->

EXAMPLE;
   }
   else if ($row['tatacara_description']=='') {
         echo 
    <<<EXAMPLE
    <input type="hidden" name="tatacara_id" value="$q">
    <div class="form-group">
                                            <label for="exampleInputEmail1">Title</label>
                                            <input type="text" class="form-control" name="tatacaraTitle" id="tatacaraTitle" value="$row[tatacara_title]" onChange="checkDisabled(testing);">
                                        </div>

                                <div class="form-group">
                                        <label>Activity Description</label>

                                 <span class="form-group">
                                   <textarea id="editor1" name="editor1" rows="10" cols="80">
                                            This is my textarea to be replaced with CKEditor.
                                        </textarea>  
                                </span></div>   
                                  <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);">
                                            <p class="help-block">Your picture size not more than 2MB. (Only JPEG or JPG is allowed).</p>
                                   </div><!-- /.form group -->

EXAMPLE;
   }
   else{
        echo 
    <<<EXAMPLE
    <input type="hidden" name="tatacara_id" value="$q">
    <div class="form-group">
                                            <label for="exampleInputEmail1">Title</label>
                                            <input type="text" class="form-control" name="tatacaraTitle" id="tatacaraTitle" value="$row[tatacara_title]" onChange="checkDisabled(testing);"></input>
                                        </div>

                                <div class="form-group">
                                        <label>Activity Description</label>

                                 <span class="form-group">
                                    <textarea id="editor1" name="editor1" rows="10" cols="80">
                                            This is my textarea to be replaced with CKEditor.
                                        </textarea>  
                                </span></div>   
                                  <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);">
                                            <p class="help-block">Your picture size not more than 2MB. (Only JPEG or JPG is allowed).</p>
                                   </div><!-- /.form group -->

EXAMPLE;
   }

}
mysqli_close($dbLink);
?>
</body>
</html>

Where am I going wrong?

Upvotes: 0

Views: 215

Answers (1)

Salketer
Salketer

Reputation: 15711

You need to actually add the editor... 

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
         CKEDITOR.replace( 'editor1' );
    }
}

Upvotes: 2

Related Questions