loaded element changing the content of a div

loaded element changing the content of a div

I have a page, containing 2 boxes.

A the start of the page 1 of the boxes is loaded with a page, the page has a button.

What a would like: pressing the button the second box loads an file.

the page:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2. <head>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
     <meta name="author" content="janbe" />
     <title>Untitled 1</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />



  3. <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/general.js"></script>
  4. </head>
     <body>
       <div id="box1">
       </div>
       <div id="box2">
       </div>
     </body>
    </html>






 

the general.js

  1.  $(document).ready(function() { 
      //initial
      $('#box1').load('test1.php');
     


  2. });

and test1.php

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2. <head> 
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
     <meta name="author" content="janbe" />
     <title>Untitled 1</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />



  3. </head>
    <body>
      <button id="button1" >test11</button>
    </body>
    </html>



 

What do I have to change/add so when I press button1 (test11) the box2 will be filled which test2.php