jQuery ajax call incorrectly nesting php generated html

Question

I'm using jQuery to hijack a link pointing to a php file. This php file is mostly html, but calls two php functions that each use a for loop to output html. The problem I'm running into is that the ajax call is incorrectly nesting the html generated by the php for loop.

Including the php file directly onto the page works fine, but when trying to grab it via ajax the html content of each sequential pass through the loop is inserted inside the previously generated html. For example:

<div>Content1</div>
<div>Content2</div>
<div>Content3</div>

becomes:

<div>Content1<div>Content2<div>Content3</div></div></div>

This is the relevant code for the php file:

<div class="publishedPosts">
  <h3>Published</h3>
  <?php displayPublishedBlogPosts(); ?>
</div>
<div class="verticalDivider"></div>
<div class="draftPosts">
  <h3>Saved Drafts</h3>
  <?php displayBlogPostDrafts(); ?>
</div>

And this is the jQuery code:

function adminPanelTabs() {
  $('#adminPanelTabs ul li a').click(function(e) {
    $('#adminPanelTabs ul li a.current').removeClass('current');
    $(this).addClass('current');
    $('#adminPanelContent').load($(this).attr('href'));
    e.preventDefault();
  });
}

Would appreciate any input or suggestions on how to fix this.

alt text

What does an actual response look like, not PHP code but fully rendered? I would wager that your issue is in there. — Nick Craver
– Nick Craver, Commented Dec 3, 2010 at 11:59
Appreciate the response, Nick. I've posted some screenshots here:Normal - nimblehost.com/test/normal.png — Jonathan Head
– Jonathan Head, Commented Dec 3, 2010 at 12:05
Incorrectly Nested - nimblehost.com/test/incorrectlyNested.png — Jonathan Head
– Jonathan Head, Commented Dec 3, 2010 at 12:05
Btw, the "normal" screenshot is from just using a regular php include. — Jonathan Head
– Jonathan Head, Commented Dec 3, 2010 at 12:06

Jonathan Head · Accepted Answer · 2010-12-03 12:26:25Z

1

Go figure - spend hours researching how to fix this, post here as a last resort, then I figure out what the problem is 30 minutes later.

For the record, the problem was in the php functions being called. They included sections where the closing div tag was enclosed in an if statement.

The if statement simply checked to see if the user was logged in, and even though this was true apparently making an ajax call in this way fails such an if statement, hence the closing div tag was never added.

I'd like to thank Nick for responding, as that helped trigger an idea about where the problem might be.

answered Dec 3, 2010 at 12:26

Jonathan Head

4283 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

+1 for putting in a detailed answer rather than just abandoning the question once you'd solved it. :)

Collectives™ on Stack Overflow

jQuery ajax call incorrectly nesting php generated html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related