Copy Html content to popup using Jquery/javascript

Advi
August 10, 2022
171 views
2 votes
3 Answers

I have a popup icon onclick, it should copy Html content to popup window using jquery/javascript. I tried several things but max ended up creating popup window, as i’m new to this . Any help would be appreciated.
Below is my code. Due to some error the code is not working in snippet. please help

$(document).ready(function () {
            $("#OpenDialog").click(function () {
                var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                var $w = $(w.document.body);
                $w.html("<textarea></textarea>");
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <a  href="#">Click here to open dialog
      <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/></svg>
    </a>    

      <br> 
      </br>
    <div class="data_copy">
      <p>html data to copy</p>
      <p>test</p>
      <input type="text" />
      <button type="button">testing </button>
    </div>

Tags: javascript jquery

Answers

try this jquery

<script type="text/javascript">

    $(document).ready(function () {
            $("#OpenDialog").click(function () {
                var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                var $w = $(w.document.body);
                var clone = $('.data_copy').clone();
                $w.html(clone);
            });
        });
    
    
</script>

The window.open would not work here please try my code in a JSFiddle.

$(document).ready(function () {
            $("#OpenDialog").click(function () {
                var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                var $w = $(w.document.body);
                var htmltocopy = $('.data_copy').html();
                $w.html('<div class="data_copy">' + htmltocopy + '</div>');
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <a  href="#">Click here to open dialog
      <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/></svg>
    </a>    

      <br> 
      </br>
    <div class="data_copy">
      <p>html data to copy</p>
      <p>test</p>
      <input type="text" />
      <button type="button">testing </button>
    </div>

You miss the script tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a  href="#">Click here to open dialog
    <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/></svg>
  </a>    

    <br> 
    </br>
  <div class="data_copy">
    <p>html data to copy</p>
    <p>test</p>
    <input type="text" />
    <button type="button">testing </button>
  </div>
<script>
$(document).ready(function () {
    $("#OpenDialog").click(function () {
        var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
        var $w = $(w.document.body);
        $w.html("<textarea></textarea>");
    });
});
</script>

Please signup or login to give your own answer.

Click here to cancel reply.