CODEWITHSUNDEEP
javascriptjqueryhtml
MIM
MIM

Reputation: 519

OnClick, displaying div of page1 into page2

I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.

<html>
   <frameset frameborder="1" rows="50%, *">
        <frame src="page1.html" />
        <frame src="page2.html"/>
    </frameset>
</html>

page1.html code

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="myjs.js"></script>
   </head>
   <body>
         <table id="resultDetails">
               <th>Result Details</th>
               <tr>
                  <td>Row 1</td>
                  <div id="r1">
                       <p> R1 data</p>
                  </div>
               </tr>
        </table>
    </body>
</html>

And Page2.html code

<html>
   <body>
         <div id="myDiv">
              <p> Testing.... </p>
         </div>
    </body>
</html>

My JavaScript myjs.js

 $(document).ready(function () {
            $('table tr').on('click', function () {
                $('#r1').load('page2.html#myDiv');
        }); 
        });

With this code, on click on table row, i am able to display the "myDiv" content in "r1". But I want reverse behavior. i.e., on clicking row, content of div "r1" of page1 should be displayed in div "myDiv" of page2. I tried $('page2.html#myDiv').html('#r1'); but no success. Any thoughts

Upvotes: 0

Views: 500

Answers (1)

DGS
DGS

Reputation: 6025

If possible change the frames to iframes. You are then able to access the elements in each of the iframes by using the .contents() function assuming the two iframes are on the same domain.

You would then do something like the following.

main.html

<html>
    <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="myjs.js"></script>
   </head>
    <iframe id="page_1" src="page1.html"></iframe>
    <iframe id="page_2" src="page2.html"></iframe>
</html>

page1.html

<html>
   <body>
         <table id="resultDetails">
               <th>Result Details</th>
               <tr>
                  <td>Row 1</td>
                  <div id="r1">
                       <p> R1 data</p>
                  </div>
               </tr>
        </table>
    </body>
</html>

page2.html

<html>
   <body>
         <div id="myDiv">
              <p> Testing.... </p>
         </div>
    </body>
</html>

myjs.js

$(window).on('load',function () {
    $('#page_1').contents().bind('click','tr', function () {
        $('#page_2').contents().find('#myDiv').html($('#page_1').contents().find('#r1').html())
    }); 
});

Upvotes: 1

Related Questions