Question

In the script below, I want to keep the initial value of htmlStrTOCpre static so that it does not change. However, once I edit the text area, the undo will no longer paste the original text back into the textarea. I believe its because the htmlStrTOCpre is based on the html() of textarea at the time the undoTOC function is called, and not the initial value on page load.

How can I store that initial value, so that I can always paste it back into the textarea (via the undoTOC function)?

<script>
jQuery(document).ready(function()
    {
        var pageurl = jQuery("#sample-permalink").text();
        var htmlStrTOCpre = jQuery("#cb2_customTOC").html();
        var htmlStrTOC  = '<h3>Table of Contents</h3>\n';
        htmlStrTOC += '<ul>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'">Introduction&nbsp;</a></li>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'2/">Introduction&nbsp;</a></li>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'3/">Conclusion&nbsp;</a></li>\n';
        htmlStrTOC += '</ul>';

        var checkTOC = function()
        {
            jQuery("#cb2_customTOC").html(htmlStrTOC);
        }

        jQuery("#cb-toc-click").bind("click", checkTOC);

        var undoTOC = function()
        {
            jQuery("#cb2_customTOC").html(htmlStrTOCpre);
        }

        jQuery("#cb-toc-undo").bind("click", undoTOC);

</script>

<div id="post_TOC" class="postbox ">
    <h3 class="hndle"><span>Table of Contents</span></h3>
    <div class="inside">
        <style>
        .cb-toc{color:blue;text-decoration:underline;cursor:pointer;}
        </style>
        <div class="inside">
            <textarea name="cb2_customTOC" id="cb2_customTOC">Some initial value</textarea>
            <span class="cb-toc" id="cb-toc-click">Paste TOC</span> | <span class="cb-toc" id="cb-toc-undo">Undo</span></p>
        </div>
    </div>
</div>

<span id="sample-permalink">http://localhost:8888/test/</span>

Answer 1

Here You will find my solution: http://jsfiddle.net/EBqZy/, btw I will corect Your code bellow.

jQuery(document).ready(function()
{
    var pageurl = jQuery("#sample-permalink").text();
    var htmlStrTOCpre = jQuery("#cb2_customTOC").text();

    var htmlStrTOC  = '<h3>Table of Contents</h3>\n';
    htmlStrTOC += '<ul>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'">Introduction&nbsp;</a></li>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'2/">Introduction&nbsp;</a></li>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'3/">Conclusion&nbsp;</a></li>\n';
    htmlStrTOC += '</ul>';

    var checkTOC = function()
    {
        jQuery("#cb2_customTOC").val(htmlStrTOC);
    }

    jQuery("#cb-toc-click").bind("click", checkTOC);

    var undoTOC = function()
    {
        jQuery("#cb2_customTOC").val(htmlStrTOCpre);
    }

    jQuery("#cb-toc-undo").bind("click", undoTOC);

})


<div id="post_TOC" class="postbox ">
<h3 class="hndle"><span>Table of Contents</span></h3>
<div class="inside">
    <style>
    .cb-toc{color:blue;text-decoration:underline;cursor:pointer;}
    </style>
    <div class="inside">
        <textarea name="cb2_customTOC" id="cb2_customTOC">Default text</textarea>
        <span class="cb-toc" id="cb-toc-click">Paste TOC</span> | <span class="cb-toc" id="cb-toc-undo">Undo</span></p>
    </div>
</div>

http://localhost:8888/test/