CODEWITHSUNDEEP
javascriptjqueryhtml
Azad
Azad

Reputation: 5274

How to append current page contents to another page?

I have two HTML pages, one is source page and the other one is copy, I need to pass some div elements into other(copy) page body. I did half way, here I used setTimeOut function to achieve it How it can done without the timeout function? and browser should display the url.

source page:

<html>
    <head>        
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        
        <script>
            function copyCon(){
                
            var p = document.getElementById("1");
            var p_prime = p.cloneNode(true);
            var w    = window.open('printcopy.html');
            
            setTimeout(function(){ 
                w.document.body.appendChild(p_prime);
            }, 1000);
            }
            
        </script>
        
        <button onclick="copyCon()">copy </button>
        <div id = "1" style="width: 500px; height: 500px; border: 1px solid black; position: relative">
            
            <h3> this is a test heading </h3>
            <p style="top: 60px; left: 20px; position: absolute;"> test Paragraph</p>
            
            <input type="text" style="position: absolute; top: 40px; left: 20px"/>
            
        </div>
        
    </body>
</html>

copy:

<html>
    <head>
    </head>
    <body>        
    </body> </html>

and is there any way to access the elements and execute function of copy page?

Upvotes: 0

Views: 4729

Answers (2)

Azad
Azad

Reputation: 5274

I found solution myself

function copyCon(){


   var w    = window.open('printcopy.html');
   w.onload = function(){
     var p = document.getElementById("1");
     var p_prime = p.cloneNode(true);
     w.document.body.appendChild(p_prime);
   };
 }

thanks for supporting

Upvotes: 1

Ɛɔıs3
Ɛɔıs3

Reputation: 7853

You can achieve that by using the $.get function (documentation).

In the file you want to append elements from copying (assuming you have a div called div_you_want_to_be_append):

$.get('source.php', function (data) {
    $('#div_you_want_to_be_append').append(data);
});

The best way to avoid new HTML tags, is to include the content you want to copy to a new file in PHP and call include it in the source and call in $.get function (file : source.php in my example)

Upvotes: 0

Related Questions