Trying to load a div with nested div's from a different file

Question

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-->

score 0 · Answer 1 · answered Nov 12 '13 at 02:51

0

One of the main issues I see is that having the same "ID" is not according to standard. Change one div from "content" to something else.

answered Nov 12 '13 at 02:51

Ela Buwa

1,652
3
22
43

ooo sorry I fumbled by swapping the class with id. For one thing, you have referred to a home.php where as the coding shows a home.html. Furthermore, it sounds like the new one is replacing the existing code. Have you looked at appending? Check – Ela Buwa Nov 12 '13 at 02:58

score 0 · Answer 2 · answered Nov 12 '13 at 03:21

0

As posted above, this example works when I run it locally.

The parent div retains id=first after loading the home.php file. You're not attaching any css to first and hiding it during this process are you?

The only way I can reproduce the behavior you're explaining is by removing class='content' from the home.php div, causing the jquery selector not to locate the div correctly. then it replaces the id='first' div with nothing.

If you change your jquery selector to:

$(".content").load("home.php");

Does that load the content? I realize this will create a nested set of divs with the class='content', and that's not what you want. Just asking to see if trying that gets the table to show or not.

It's kind of tricky to help because your example seems to work for me. Are there any other details you could provide? jQuery version, etc?

answered Nov 12 '13 at 03:21

Michael J. Anderson

479
2
6

Please use comments to critique or request clarification from OP. – Harry Nov 12 '13 at 03:42
Yeah, sorry. Need 50 rep apparently to add comments to a question, and I'm just starting up here. – Michael J. Anderson Nov 12 '13 at 04:18
@MichaelJ.Anderson, you made me realize that I forgot to link the second css style. However, like I said, I have tables that were populated with php that still aren't showing up. – Yehuda Gutstein Nov 12 '13 at 04:26
Are you seeing the 'My Schedule' header, and just not seeing the row with values from PHP? or is the entire div going blank when you push the button? Could you verify that $row has values by adding a in there? – Michael J. Anderson Nov 12 '13 at 04:38
I actually double checked my code and I was accidentally calling home.html and not home.php (I thought that was a typo on my part here only). I'm still having issues querying my info, as I am getting an error now, but I think that might be for another subject. Thanks – Yehuda Gutstein Nov 12 '13 at 04:41
Cool, should check Ela's answer then, as she suggested you review the filenames. Good luck! – Michael J. Anderson Nov 12 '13 at 04:52

Trying to load a div with nested div's from a different file

2 Answers2