CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user3656165
user3656165

Reputation: 39

ckeditor not loading on element generated via ajax on popup dialog?

I am using custom form and generating form elements with ajax call but textarea is not loaded with ckeditor. this form load on popup dialog. Here is my code:

ajax code:

    jQuery.ajax({
    type: "POST",
    url: "reg_arz_ajax2.php",
    data: "book="+book_arzyabi,
    dataType : "html",
    success: function(response){

        $('#resp').html(response);
                    ckeditor.replace('fname'); 
        $("#fname").ckeditor();
    },
    error:function (xhr, ajaxOptions, thrownError){
        //On error, we alert user
        alert(thrownError);
    }
});

$( "#dialog-form" ).dialog( "open");

});

php code:

    echo '<textarea class="ckeditor" cols="80" id="fname" name="fname" rows="10" >test</textarea>';

html code:

  <html>
 <head>
 <script type="text/javascript" src="../include/ckeditor/ckeditor.js"></script>
 <script type="text/javascript" src="../include/ckeditor/sample.js" ></script>
 </head>

 <body>
 <form>
 <fieldset>
 <label for="name">Name</label>
 <div id="resp" ></div>
 </fieldset>
 </form>
 </body>
 </html>

Please help me for resolve problem.

Upvotes: 1

Views: 839

Answers (1)

Ulrich Thomas Gabor
Ulrich Thomas Gabor

Reputation: 6654

You need to convert the textarea to a CKEditor instance by hand, since replacing by assigning class names is only done once - on page load.

There are samples on how to convert a textarea to a ckeditor instance, which is basically just:

CKEDITOR.replace( 'textarea_id' )

so in your case you should add

CKEDITOR.replace( 'fname' )

to the ajax success callback.

Please notice that Javascript is case sensitive, so you should write CKEDITOR in uppercase. The function call ckeditor after the replace is also too much. See the examples for official guidelines.

Upvotes: 1

Related Questions