JQuery get updated value of html element ()
In the code below, I am binding the click event on the range so that it will disable the checkTOC function.
In this function, I store a count of the matched elements in the count variable. This works great as long as the content doesn't change after the page has loaded. However, the count value has no effect on the post page load changes in the #content div.
How can I change the code so that the count displays the updated #content html value?
if(typeof jQuery!="undefined")
{
jQuery(document).ready(function($)
{
var checkTOC = function()
{
//find the count of <!--nextpage--> elements
var count = jQuery('#content').html().split("<!--nextpage-->").length - 1;
alert(count);//ALWAYS RETURNS THE INITIAL COUNT, REGARDLESS IF ACTUAL COUNT IS CHANGED AFTER PAGE LOAD VIA HTML EDITING
var pageurl = jQuery("#view-post-btn a").attr("href");
var htmlStrTOCpre = jQuery("#cb2_customTOC").text();
var htmlStrTOC = '<summary>Table of Contents</summary>\n';
htmlStrTOC += '<ol>\n';
htmlStrTOC += ' <li><a href="'+pageurl+'">Introduction</a></li>\n';
for (var i = 2; i < count+2; i++) {
htmlStrTOC += ' <li><a href="'+pageurl+i+'/">Page'+i+'</a></li>\n';
}
htmlStrTOC += '</ol>';
jQuery("#cb2_customTOC").val(htmlStrTOC);
}
jQuery("#cb-toc-click").bind("click", checkTOC);
});
}
Html code
<span id="cb-toc-click">Paste Table of Contents</span>
source to share
You can traverse the DOM with vanilla JS, or rather #content
child nodes recursively and check their element.nodeType
value. If it is equivalent Node.COMMENT_NODE
(or just 8
if you prefer magic numbers;) then it means that you are dealing with a comment. With this in mind, you can build any logic:
var commentCount = 0;
//anonymous function to be called recursively
(function(D) {
//if this is a comment, increment the counter
8===D.nodeType&&commentCount++;
//call the same function recursively for every child node
D=D.firstChild;
while (D) {
arguments.callee(D);
D=D.nextSibling;
}
})(document.getElementById('content'));//start with #content
That being said, I agree with the comments that there are better ways to accomplish this if you have control over the markup.
source to share
alert (count) always returns the same value. Same with alert (jQuery ('# content'). Html ()) -
The problem is that the content of the editor is not in jQuery('#content')
due to tinymce creating a contenteditable iframe when the editor is initialized, which is then used to edit the content. This contetn is written to multiple tinymce events.
To get the latest editor content you should use the following
$(tinymce.get('your_editor_id').getBody()).html();
source to share