php - ドキュメント対応のajaxのjQueryがhtmlを挿入し、htmlがすぐに消える

原文 php jquery html mysql ckeditor

アイデアは、本文のdivをループし、クラスが「編集可能」のdivを使用して、データベース内の対応するIDからスクリプトがHTMLを挿入することです(後で、送信の変更を実装します。)を挿入するタイミングに問題があるようです。 html。

フッターには2つのスクリプトがあります。最初は、このdivを変更して、管理者がログインしている場合はインライン編集可能領域になります。(CKeditorを使用)

2番目のスクリプトは、ドキュメントの準備ができたスクリプトです。divのhtmlコンテンツをデータベースからプルします。ログイン状態に関係なく起動します。

    <script>
    $(document).ready(function(){

        $(".editable").each(function(){

            var div = $(this).attr('id');
            var divstring = "#" + div;

        $.post("getdbhtml.php", 
                {
                id:div
               }).done(function( html ) {
        $(divstring).html(html);

                });
        });
    });

    </script>

これは、divのコンテンツを返す単純なgetdbhtml.phpドキュメントです

    $id = $_POST['id'];


    $query = "select * from edit where div_id='$id' limit 1";

    $result = $db->doQuery($query) or die(mysql_error());

    while($row = $result->fetch_object()) {

        $content = $row->content;   
    }

     echo $content;

何が起きるかは、ページが読み込まれ、挿入されたHTMLコンテンツがちらつき、そしてちらつきます。約10ページの読み込みごとに、実際に貼り付けられます。
私の直感は、おそらく2番目のスクリプトが起動したときにckeditorがまだそれ自体を生成していることですが、「ドキュメントの準備ができている」ようにして修正しようとしました。ただし、管理者がログインしていない場合、つまりckeditorがトリガーされていない場合でも、点滅し続けます。 2番目のスクリプトに時間遅延を設けるのはばかげたことでしょう。 2番目のスクリプトを最初のスクリプト.done(html {});の拡張として試してみました。私もこれを特殊な投稿の代わりに通常の$ .ajax()呼び出しで試してみましたが、同じように動作します。

なぜこれを行うのか、それを修正する方法はありますか？

編集:

ウェブページはかなりシンプルです、ターゲットdivはこれです:

<div id="inner" style="padding-top: 0; margin-top: 0;">
                <div contenteditable="true" id="editor1" class="editable" style="padding: 0; margin: 0;">
        </div>    
 </div>

Chromeデバッガーでは、ckeditorは＃editor1のクラスにかなりの量を追加します

    <div contenteditable="true" id="editor1" class="editable cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" style="padding: 0px; margin: 0px; position: relative;" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_44"></div>

現在挿入されているコードにはまだHTML文字がありません。HTMLタグの問題を修正する前に挿入を機能させたいだけです。
「XYZに登録するチャンスです」のようになります。引用符なし。

答え

私は解決策を思いつきました、そしてこれは基本的にフッターがレイアウトされる方法です

まず、ライブラリスクリプト

<script src="path/ckeditor.js"></script>

2つのckeditorスクリプトはそれほどうまく機能しなかったので、インスタンススクリプトをドキュメントで囲みました。

   <script>
   $(document).ready(function(){
    ...ckeditor instance...
   });
   </script>

そして、ajaxデータベースコンテンツスクリプトにはdocument.readyがあり、最後に若干の遅延が追加されています。

  <script>
    $(document).ready(function(){
   });
   setTimeout(
        function()
        {  
                  $(".editable").each(function(){

                      var div = $(this).attr('id');
                      var divstring = "#" + div;

                  $.post("getdbhtml.php", 
                          {
                          id:div
                         }).done(function( html ) {
                  $(divstring).html(html);

                          });
                  });

                }, 100);
   </script>

すでに数回キャッチされていたので、少し100遅延するとタイミングの問題が解決したようです。この編集目的では、ほとんど認識できず、問題ありません。

これが発生する理由は、ckeditorインスタンスがdivを変更してしまうためです。divの内容が何らかの形で切り詰められたり変更されたりするためです(デフォルトではpタグが追加されていますが、オフにしています)。 ajaxは既に実行されました(完了順に並べられた場合でも)。

関連記事