Question

我目前正在使用 AdminLTE 模板来完成我的项目。它有一个内置的 CKEDITOR 插件，可以在textarea中实现。但我尝试使用 ajax http 函数从另一个php文件调用请求textarea＆＃34; GetTatacara.php ＆＃34;。但是当我在选择框中选择选项并移动到包含textarea的表单时， CKEDITOR 没有显示。

我已经正确地为 CKEDITOR 插件添加了参考，因为我试图在没有 AJAX 调用的情况下对textarea进行硬编码并且它可以显示出来，只是它当我试图将其称为AJAX时，它不会出现。

以下是我使用ajax调用来请求textarea表单的代码：

<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>

这是JavaScript函数代码：

 <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>

以下是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>

我哪里错了？

Answer 1

您需要实际添加编辑器......

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

AJAX调用CKEDITOR可见性不起作用

1 个答案: