Databases
StackOverflow2013
Postsdbo
POadd tinymce for new element loaded dynamicaly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POadd tinymce for new element loaded dynamicaly
    text
    copied!<p>My page is lodaed with 5 divs which can be edited by Tinymce inline editor. I've a peace of Jquery loding 5 new ones by clicking on a button (so dynamicaly). But of course the new ones are not affected by Tinymce, as the init has already been loaded... How can I manage to activate tinymce for new divs please?</p> <p>My HTML :</p> <pre><code>&lt;div id=\"billetdroit\"&gt; &lt;div id=\"divtitre\"&gt;&lt;h1 class=\"editable\"&gt;blablabla&lt;/h1&gt;&lt;/div&gt; &lt;div class=\"editable\" id=\"tiny_01\"&gt;blablabla2&lt;/div&gt; &lt;/div&gt; &lt;div id=\"billetdroit\"&gt; &lt;div id=\"divtitre\"&gt;&lt;h1 class=\"editable\"&gt;blablabla&lt;/h1&gt;&lt;/div&gt; &lt;div class=\"editable\" id=\"tiny_02\"&gt;blablabla2&lt;/div&gt; &lt;/div&gt; &lt;div id=\"billetdroit\"&gt; &lt;div id=\"divtitre\"&gt;&lt;h1 class=\"editable\"&gt;blablabla&lt;/h1&gt;&lt;/div&gt; &lt;div class=\"editable\" id=\"tiny_03\"&gt;blablabla2&lt;/div&gt; &lt;/div&gt; ... ... </code></pre> <p>And a button: when you click, it make appears 5 more divs "billetdroit" dynamicaly</p> <p>My tinymce init:</p> <pre><code>tinymce.init({ selector: "textarea", language: 'fr_FR', image_advtab: true, menubar:false, forced_root_block: false, plugins: ["link","code","media","image","textcolor", "emoticons"], toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons" }); tinymce.init({ selector: "h1.editable", language: 'fr_FR', inline: true, toolbar: "undo redo", menubar: false }); tinymce.init({ selector: "div.editable", language: 'fr_FR', image_advtab: true, menubar:false, inline: true, forced_root_block: false, plugins: ["link","code","media","image","textcolor", "emoticons"], toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons" }); </code></pre> <p>Any solution? Thanks</p> <p>EDIT:</p> <p>I tryied that:</p> <pre><code>$(document).ready(function() { var track_click = 1; //track user click on "load more" button, righ now it is 0 click var total_pages = Globals.total_pages; // $('#results').load("loadmore.php", {'page':track_click}, function() {track_click++;}); //initial data to load $(".load_more").click(function (e) { //user clicks on button $(this).hide(); //hide load more button on click $('.animation_image').show(); //show loading image if(track_click &lt;= total_pages) //user click number is still less than total pages { //post page number and load returned data into result element $.post('loadmore.php',{'page': track_click}, function(data) { $(".load_more").show(); //bring back load more button $("#results").append(data); //append data received from server //scroll page smoothly to button id $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500); //hide loading image $('.animation_image').hide(); //hide loading image once data is received track_click++; //user click increment on load button }).fail(function(xhr, ajaxOptions, thrownError) { //any errors? alert(thrownError); //alert with HTTP error $(".load_more").show(); //bring back load more button $('.animation_image').hide(); //hide loading image once data is received }); if(track_click &gt;= total_pages-1) //compare user click with page number { //reached end of the page yet? disable load button $(".load_more").attr("disabled", "disabled"); } } $.getScript('include/tinymce/tinymce.min.js', function() { tinymce.init({ selector: "textarea", language: 'fr_FR', image_advtab: true, menubar:false, forced_root_block: false, plugins: ["link","code","media","image","textcolor", "emoticons"], toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons" }); tinymce.init({ selector: "h1.editable", language: 'fr_FR', inline: true, toolbar: "undo redo", menubar: false }); tinymce.init({ selector: "div.editable", language: 'fr_FR', image_advtab: true, menubar:false, inline: true, forced_root_block: false, plugins: ["link","code","media","image","textcolor", "emoticons"], toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons" }); }); }); }); </code></pre> <p>But without success...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload