I need to have my index.php load some content from home.php. Within index.php, there is a div class="content" which contains a dialog box (for a user login). Within home.php, there is also a div class="content" which contains some p's and tables (tables are created dynamically with php by querying a database). When the user clicks submit on index.php, I would like to replace the the contents of div class="content" with the same div (including all tables, etc.) from home.php. The problem is when I load the new div, I lose all of the nested divs (including the php created rows and columns), which I need. Any help would be tremendously appreciated. Thanks in advance.
This is the html from index.php:
<div class="content" id="first">
<div id="login">
<p>Username:
<input type="text" id="loginName" Required>
</p>
<p>Password:
<input type="password" id="loginPass" Required>
</p>
<span id="loginError">Please enter a username AND password</span>
</div>
</div><!--content=first-->
jquery from index.php:
$("#regButton").on('click',function(){
$(".content").load("home.php .content >*");
});
html from home.php:
<div class="content" id="home">
<div id="left">
<div id="top">
</div>
<div id="bottom">
<h2>Grades</h2>
</div>
</div>
<div id="center">
<h2>My Schedule</h2>
<table>
<tr>
<td>Course ID</td>
<td>Course Name</td>
</tr>
<?php
echo "<tr>";
echo "<td>" . $row['courseDept']. $row['courseNumber']. " - ". $row['courseSection']."</td>";
echo "<td>" . $row['courseName']."</td>";
echo "</tr>";
?>
</table>
</div>
</div><!--content#home-->