CODEWITHSUNDEEP
javascriptjqueryhtml
James
James

Reputation: 1706

jQuery / JavaScript copy function getting an error

I'm trying to create a button to copy to clipboard some content from a textarea. I've managed to get together this code from working examples online but mine seems to not work for some reason. Does anyone know why? I know there are plugins but they use Flash, and I want to avoid that. If anyone knows of a better solution please share.

When I click the copy button, I get in console:

Uncaught TypeError: Failed to execute 'selectNodeContents' on 'Range': parameter 1 is not of type 'Node'.

Fiddle: http://jsfiddle.net/L1o8qz8w/2/

JS:

$(document).ready(function() {
    // show examples
    $(document).on("click",".show-syntax",function(e){
        $next = $(this).parents(".parentcontainer").find('.render-syntax');
        $next.show();
        //$('.render-syntax').show();
        $('html,body').animate({ scrollTop: $next.offset().top},'slow');
        e.preventDefault();
    });

    $(document).on("click",".copy-syntax",function(e){
        var code = $(this).parent().next(".render-syntax textarea");
        // "Optional" Select some text
        var range = document.createRange();
        range.selectNodeContents(code);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);

        // Use try & catch for unsupported browser
        try {
            // The important part (copy selected text)
            var successful = document.execCommand('copy');

            // "Optional" remove selected text
            sel.removeAllRanges();

            if(successful){
                code.val();
                alert('copied!');
            } else {
                alert('Unable to copy!');
            }
       } catch (err) {
           alert('Unsupported Browser!');
       }
    });
});

HTML:

<pre><a href="#" class="btn copy-syntax">Copy to clipboard</a>
          <a href="#" id="copy-button" class="btn show-syntax">Show below's output</a>
          <code data-language="html" class="rainbow">

            <span class="comment html">&lt;!-- .container is main centered wrapper --&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">container</span><span class="string quote">"</span><span class="support tag close">&gt;</span>

              <span class="comment html">&lt;!-- columns should be the immediate child of a .row --&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>One<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">eleven columns</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Eleven<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

              <span class="comment html">&lt;!-- just use a number and class 'column' or 'columns' --&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">two columns</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Two<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ten columns</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Ten<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

              <span class="comment html">&lt;!-- there are a few shorthand columns widths as well --&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one-third column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>1/3<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">two-thirds column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>2/3<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one-half column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>1/2<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one-half column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>1/2<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

            <span class="comment html">&lt;!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) --&gt;</span>

          </code></pre>

<div class="render-syntax">
          <textarea id="code">            &lt;!-- columns should be the immediate child of a .row --&gt;
            &lt;div class="row"&gt;
              &lt;div class="one column"&gt;One&lt;/div&gt;
              &lt;div class="eleven columns"&gt;Eleven&lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- just use a number and class 'column' or 'columns' --&gt;
            &lt;div class="row"&gt;
              &lt;div class="two columns"&gt;Two&lt;/div&gt;
              &lt;div class="ten columns"&gt;Ten&lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- there are a few shorthand columns widths as well --&gt;
            &lt;div class="row"&gt;
              &lt;div class="one-third column"&gt;1/3&lt;/div&gt;
              &lt;div class="two-thirds column"&gt;2/3&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="one-half column"&gt;1/2&lt;/div&gt;
              &lt;div class="one-half column"&gt;1/2&lt;/div&gt;
            &lt;/div&gt;
          </textarea>
          <h3>Example output of the syntax above</h3>
          <div class="container demo">
            <!-- columns should be the immediate child of a .row -->
            <div class="row">
              <div class="one column">One</div>
              <div class="eleven columns">Eleven</div>
            </div>

            <!-- just use a number and class 'column' or 'columns' -->
            <div class="row">
              <div class="two columns">Two</div>
              <div class="ten columns">Ten</div>
            </div>

            <!-- there are a few shorthand columns widths as well -->
            <div class="row">
              <div class="one-third column">1/3</div>
              <div class="two-thirds column">2/3</div>
            </div>
            <div class="row">
              <div class="one-half column">1/2</div>
              <div class="one-half column">1/2</div>
            </div>
          </div>

        </div>

Upvotes: 2

Views: 3923

Answers (3)

Jaromanda X
Jaromanda X

Reputation: 1

Here's a fiddle that seems to work (better anyway) http://jsfiddle.net/L1o8qz8w/3/

The changes to your code are as follows:

    var code = $(this).parent().parent().find(".render-syntax textarea");
                                ^^^^^^^^ ^^^^ go up one more level, and find what you are looking for
    // "Optional" Select some text
    var range = document.createRange();
    range.selectNodeContents(code[0]);
                                 ^^^ you want a NODE not some jquery garbage

Upvotes: 0

Rifai
Rifai

Reputation: 194

try change your code with this :

    //var code = $(this).parent().next(".render-syntax textarea");
    var code = $("#code").focus()[0];

or 

$(".render-syntax textarea").focus()[0]

[0] or [1] and so on, if your textarea more than 1

Upvotes: 1

taxicala
taxicala

Reputation: 21769

you have to go up another parent level because the parent of the button is the <pre> tag and the .render-syntax is not in there:

$(this).parent().parent().next(".render-syntax textarea");

and I believe you should be using find instead of next:

$(this).parent().parent().find(".render-syntax textarea");

Upvotes: 0

Related Questions