OnClick, displaying div of page1 into page2

Question

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

@Qqwy: I tried your code. no success. Also I tried $('page2.html#myDiv').html('page1.html#r1'); , still no success. — MIM, Sep 02 '13 at 07:28

score 1 · Accepted Answer · answered Sep 02 '13 at 07:57

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())
    }); 
});

Thanks a lot for providing the fix. This Works great. But Using iframes, I am not able to resize(move) the frames using sash which is possible using frames. — MIM, Sep 03 '13 at 07:55
This should be a solution to that problem http://stackoverflow.com/questions/6194302/how-can-i-cleanly-resize-an-iframe-with-dragging-functionality — DGS, Sep 03 '13 at 08:08
Thanks for the solution. It worked. Also I found that, for frames, using top.frames["frameID"].document.getElementById('divID'), we can access the element of other page. Thanks again for providing resolution. — MIM, Sep 05 '13 at 09:30

OnClick, displaying div of page1 into page2

1 Answers1