CODEWITHSUNDEEP
javascriptjqueryhtmlajaxtinymce
dsynkd
dsynkd

Reputation: 2145

TineMCE doesn't initiate ajax-loaded textarea

I use $.ajax() to load this piece of html into a div

<div class="board-container">
    <form method="post" action="functions.php">
        <input type="hidden" name="function" value="set_boards">
        <div class="row-fluid">
            <div class="span6">
                <h3 class="dark">Student Board</h3>
                <textarea id="board_students" name="board_students">

                </textarea>
                <br>
            </div>
            <div class="span6">
                <h3 class="dark">Instructor Board</h3>
                <textarea id="board_instructors" name="board_instructors">

                </textarea>
                <br>
            </div>
        </div>
        <a href="#" class="btn btn-inverse btn-large btn-center">Update Boards</a>
    </form>
</div>

<script src="libs/tinymce/tinymce.min.js"></script>
<script src="js/board.js"></script>

And in the board.js, there's simply a TinyMCE initiation function.

$(function()
{
    tinymce.init({
        menubar : false,
        height: 700,
        selector: "#board_students"
    });
});

The ready() function should be called automatically due to ajax request. I've tested with alert and I know the function gets called.
The code works if the html is in the div by default, but when loaded through ajax, nothing happens. Why is that?

Upvotes: 0

Views: 431

Answers (3)

Andrew Ice
Andrew Ice

Reputation: 841

The reason this is happening is because, The ajax adds your content AFTER --page load--. Therefore, it's not reading and adding your code to the DOM, because you're adding this after the page is already loaded.

As many said, you can preload this info, or if you want to use AJAX.

The easiest way to initialize your code would be to add a .complete function at the end of your ajax call. This says that when the ajax function is done running, continue with this action. 

$.ajax({
  type: "POST", #GET/POST
  url: "some.url",
  data: {}
})
.complete(function() {
    tinymce.init({
    menubar : false,
    height: 700,
    selector: "#board_students"
  }
});

Jquery Ajax Call

Upvotes: 2

Sathya Raj
Sathya Raj

Reputation: 1089

This happens because your ajax loads content asynchronously and your tiny initialization function happens synchronously, may be the initialization happens before the content is placed into your dom. The another thing is you shouldn't load scripts in html data . To solve this

If you want to load script async means you have to create a script tag element using js like

    var jsonp = document.createElement("script");
    jsonp.type = "text/javascript";
    jsonp.src = "libs/tinymce/tinymce.min.js";
    document.getElementsByTagName("body")[0].appendChild(jsonp);

or You can include tinymce.min.js in page itself and initialize the div after the content is loaded like

$.ajax({
         url: url,
         type: type,
         data: data,
         success: function(htmlData){
              $('#DivId').append(htmlData);
              //here internalize tiny mice when its available in dom   
              tinymce.init({
                 menubar : false,
                 height: 700,
                 selector: "#board_students"
              });
         }
   });

Try this and let me know if this works ... !!!

Upvotes: 4

Ruben Kazumov
Ruben Kazumov

Reputation: 3872

The <script> blocks in your case will start execute in the same moment asynchronous, and just because tinymce is the biggest script, tinymce.init will fail.

You need load the scripts as additional cascade of ajax call:

$.get(...., function (){// first level, getting the html
    $.getScript(...., function (){// second level, getting <script src="libs/tinymce/tinymce.min.js"></script>
         // executing or loading js/board.js 
    });
});

Upvotes: 0

Related Questions