the_content() breaking innerHTML -- please help me out!

I am trying to recreate the functionality on this page in WordPress: http://iwearyourshirt.com/testimonials (click on the customers to see the content at the top of the page change)

I am close, and it works with this code:

<?php
/*
Template Name: Our Reviews
*/
?>

<?php include("header.php"); ?>
<?php include ('sidebar_ourreviews.php'); ?>

<div id="ourreviews">

<div id="expansion"> This is a test
</div>

<div class="reviews-column"></div>

<div class="reviews-row"><span class="reviews-first-row" style="font-style: italic;">Click to see the full review</span>             <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row" style="font-weight: bold;">Customer</span>         <span class="reviews-second-row" style="font-weight: bold;">Date</span></div>

<div id="reviews-leftcolumn">
    <?php $my_query = new WP_Query('cat=7');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;
    ?>
    <div class="reviews-row"><span class="reviews-first-row"><a href="#self" onclick="document.getElementById('expansion').innerHTML = '<?php the_title(); ?>';"><?php the_title(); ?></a></span>             <span class="reviews-second-row"><?php the_date(); ?></span></div>

    <?php endwhile; ?>
    </div>

<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>
<div class="reviews-row"><span class="reviews-first-row">&nbsp;</span>     <span class="reviews-second-row">&nbsp;</span></div>

</div>

</div>

<?php get_footer(); ?>

But when I try to add <?php the_content() ?> right after <?php the_title() ?> in the innerHTML portion the entire content is displayed, no links like they are supposed to be. Basically, <?php the_content() ?> breaks the innerHTML functionality.

The working example is up right now. I can put in the non-working example if you need me to. Thanks.

My page: http://billboardfamily.com/our-reviews/

ok, thanks. I actually just played with the posts a lot, and nothing seems to work with the <?php the_content() ?> call. It really makes the innerHTML mad. Maybe this could be done in some other manner than innerHTML…but I don’t know any other way (Jquery…but I don’t know that either, lol).

The bottom line is it has to work, and look EXACTLY like it does when the page works.

I think that we need to figure out how to build you a regular expression to take everything from"<script=" through to “</script>” and replace it with “”.
Regular expression is not a strong point for me, I haven’t even touched regex in years.
Maybe if we’re lucky, some guru will swoop in for us.
In the meantime, I’ll hunt around some, and try to refresh my regex brains enough to get this done.

While I do that, try putting just 3 plain text posts in cat=7 and 3 pic/text posts and see what your page gives you in each case.

Yes, 3 posts now.

I really need this to work. I hope you can help me get to the bottom of this. I can;t launch without everything working…and this is definitely not working, lol.

Yep, it’s trying to inject that script that seems to be causing your troubles.
That is really strange about it only returning 2 posts. How many are in the category now, 3?

I understand…multitasking, right? Anyway. I am using wordpress, so it actually generates the code for the posts. Both of those posts in that category, as far as what I did, are just an image and text…no script. I will try just a text post and see what happens.

If I can get this issue fixed, I am almost done with the site. Fingers crossed

-------------------UPDATE-------------------
I just added another post, just plain text, and the innerHTML is making it a link now, rather than just echoing the entire post, but it is a broken link. Also, for some reason, only 2 posts are showing. Here is the entire code for all of it:

<div id="reviews-leftcolumn">
    <?php $my_query = new WP_Query('cat=7');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;
    ?>
    <div class="reviews-row"><span class="reviews-first-row"><a href="#self" onclick="document.getElementById('expansion').innerHTML = 

'<?php the_content()?>';"><?php the_title(); ?></a></span>             <span class="reviews-second-row"><?php the_date(); ?

></span></div>
    

    <?php endwhile; ?>
    </div>
    

Hey, sorry, I’m trying to cook dinner at the same time.
See how your page is displaying the ';" before the title? The computer thinks the innerHTML was already closed. Same with the onClick. You can tell by the code coloring in the “view pagesource”
I have never ever seen a script injected as innerHTML before. It appears that that script is part of your content, so the_content will always return it.
Try putting a dummy post into your cat=7, make sure it has no script in it, and then test your innerHTML.

I need to eat, but hopefully we can get this solved so you can go live and get a bit better sleep tonight!

Did you see the page, and how it was supposed to work? Well, I tried your code, and the same issue happens. Any variation of the_content() that is used in the innerHTML area causes the innerHTML to stop working. No longer are there links to click on that show the content in the “expansion” div, but rather, the actual content just shows up literally in the innerHTML tag, and you can see parts of the innerHTML tag displayed in the output. Not sure what is happening, but I need a solution to this.

Go look at the page, and you can see what is happening with your code…which is the same any time I use the_content().

http://billboardfamily.com/our-reviews/

Please show me the exact …innerHTML=… line you are using.
If you look at your page source, your innerHTML injection is producing some extremely bizzare output. I only see the output, not your exact code.

I can do that. Here you go:

<div class="reviews-row"><span class="reviews-first-row"><a href="#self" onclick="document.getElementById('expansion').innerHTML = 

'<?php the_content()?>';"><?php the_title(); ?></a></span>             <span class="reviews-second-row"><?php the_date(); ?

></span></div>

As you can see from the code in the first post…this works fine when replacing <?php the_content()?> with <?php the_title()?>, or almost any other php call

I’m confused.
Could you put up your non-working example? I’m not sure what you mean “not links like they are supposed to be”

Oops…sorry, The now that you see the working example…

I now have the non-working example up.

I have tested this innerHTML deal with some php calls, and it works fine…except for on the one I need it to work on. I have to get this to work. This is one of the very last issues on the site and I need to launch immediately! Thanks!

I am trying to recreate the functionality on this page in WordPress: http://iwearyourshirt.com/testimonials (click on the customers to see the content at the top of the page change)

I am close, and it works with this code:

<?php $my_query = new WP_Query('cat=7');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;
    ?>
    <div class="reviews-date">
    <?php the_date(); ?>
    </div>
    <a href="#self" onclick="document.getElementById('expansion').innerHTML = '<?php the_title() ?>';">This is an example</a>
    </div>
    <?php endwhile; ?>

But when I try to add <?php the_content() ?> right after <?php the_title() ?> in the innerHTML portion the entire content is displayed, no links like they are supposed to be.

The working example is up right now. I can put in the non-working example if you need me to. Thanks.

The site: http://billboardfamily.com/our-reviews/

anyone? I really need this to work, but nothing I come up with is working…please help me out!

OK, now I see what you mean.

<div id="reviews-leftcolumn">
    <?php $my_query = new WP_Query('cat=7');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;
    ?>
    <div class="reviews-row">
		<span class="reviews-first-row">
			<a href="#self" onclick="document.getElementById('expansion').innerHTML = '<?php the_content(the_title('', '', false)); ?>';"><?php the_title(); ?></a>
		</span>
		<span class="reviews-second-row"><?php the_date(); ?></span>
	</div>

    <?php endwhile; ?>
</div>

should put both the_title and the_content into the expansion div.

And it works fine as long as its only the_title, But not when you try the_content (with the_title in it).

Can you post an example of the mark-up that the_content(the_title) is returning?

I think this is what you’re looking for?

http://codex.wordpress.org/Function_Reference/get_the_content

lol. I have been stepping away for 2 weeks now. I appreciate all the help. I have this code I just tried, as well…but still no dice:

<a href="#self" onclick="document.getElementById('expansion').innerHTML = 

'<?php addslashes(str_replace(PHP_EOL, '', the_content())); ?>';"><?php the_title() ?></a>

Well, as Mittineague said, it keeps thinking that your innerHTML is not being terminated. It looks good to me, but I must be missing something.
I’m not even sure why your “Please work” link didn’t work.

I must sleep.
They say that printed code is several times better for debugging. Maybe you’ll have a Eureka moment if you step away for a bit…

At any rate, I must sleep.

The error console shows an “unterminated string literal” message.

<a href="#self" 
onclick="document.getElementById('expansion').innerHTML = 
'<p><a href="http://www.billboardfamily.com/our-reviews">

That is, the string being assigned is missing the closing ’

Also it appears the_content is only returning an excerpt.

How does it do if you add
global $more;
$more = 1;

<div id="reviews-leftcolumn">
    <?php $my_query = new WP_Query('cat=7');
    global $more;
    $more = 1;
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;
    ?>
    <div class="reviews-row">
        <span class="reviews-first-row">
            <a href="#self" onclick="document.getElementById('expansion').innerHTML = '<?php the_content(the_title('', '', false)); ?>';"><?php the_title(); ?></a>
        </span>
        <span class="reviews-second-row"><?php the_date(); ?></span>
    </div>

    <?php endwhile; ?>
</div>

The content that is being displayed is correct, that is the entire post…it is just not supposed to be displayed at all, until you click on the link…then it is supposed to display in the “expansion” div tag.

I am not sure why the error console is saying that…if you look at the code you can see that there is nothing missing. Also, it works fine with <?php the_title() ?> in place of the_content.

I added your suggested code … no change.

This is really crazy.

I changed the code back to make it simple: here it is as of now:

v id="reviews-leftcolumn">
    <?php $my_query = new WP_Query('cat=7');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;
    ?>
    <div class="reviews-row"><span class="reviews-first-row"><a href="#self" onclick="document.getElementById('expansion').innerHTML = '<?php the_content()?>';"><?php the_title(); ?

></a></span>             <span class="reviews-second-row"><?php the_date(); ?></span></div>
    

    <?php endwhile; ?>
    </div>