Looping through PHP array in JS

[Tinnin]

Hi All,

I'm trying to put together a "fade in", "fade out" segment for user comments on a website. The array of comments with key=>value (memberName=>comment) comes from php. I'm looping through using jQuery like so;

$(document).ready(function(){

        function swap() {
            <?php foreach ($memberTestimonials as $member=>$testimonial) : ?>
                $('#testimonialMessage').fadeIn(5000);
                $('#testimonialMessage').html("<p><?php echo $testimonial; ?></p>");
                $('#testimonialMessage').fadeOut(5000);
            <?php endforeach; ?>
            swap();
        }

        swap();
    }); 

The array $memberTestimonials is;

array (size=3)
'Michael Burrells' => string 'This was a lot of fun!' (length=22)
'Homer Simpson' => string 'Mmmmmm. Donuts.' (length=15)
'Albert Einstein' => string 'E=MC^2' (length=6)

The only issue is, only the E=MC^2 record is showing (repeatedly). It shows three times without recursion.

Does anyone have any ideas why this might be happening?

Thanks for any help offered.

[urtrivedi]

check your query in phpmyadmin, does it gives proper result?

[Tinnin]

My query gives the result as printed above in ther array.

[Alberto Bucur]

Try this:

<?php foreach ($memberTestimonials as $member=>$testimonial) { ?>
    $('#testimonialMessage').fadeIn(5000);
    $('#testimonialMessage').html("<p><?php echo $testimonial; ?></p>");
    $('#testimonialMessage').fadeOut(5000);
<?php } ?>

[Fernando_4]

I'm guessing it has to do with the array_pointer keep in mind they don't recommend reset on associative arrays, but it might give you an idea.

Edit
Take a peek at the resulting jQuery function to see if the problem comes from PhP or if it's jQuery we have to adress.

[Tinnin]

This is the output from source:

<script type="text/javascript">
    $(document).ready(function(){

        function swap() {
                            $('#testimonialMessage').fadeIn(5000);
                $('#testimonialMessage').html("<p>This was a lot of fun!</p>");
                $('#testimonialMessage').fadeOut(5000);
                            $('#testimonialMessage').fadeIn(5000);
                $('#testimonialMessage').html("<p>Mmmmmm. Donuts.</p>");
                $('#testimonialMessage').fadeOut(5000);
                            $('#testimonialMessage').fadeIn(5000);
                $('#testimonialMessage').html("<p>E=MC^2</p>");
                $('#testimonialMessage').fadeOut(5000);
                        swap();
        }

        swap();
    }); 
</script>

[Tinnin]

Here's what I think is happening. Tell me if this sounds stupid.

The .html() call is being looped through to the end before the first .fadeIn() has even finished. The other calls to fade then follow.

Which means that I would have to delay the calls to .html()....

That's all I can come up with, as ridiculous as it sounds to me.

[Tinnin]

Or I suppose it could be that the php is happening server-side and hitting the end of the array before the javascript has even begun.

[Tinnin]

I decided to just print the php to standard html and went with this:
http://jsfiddle.net/mplungjan/bWD4V/
works fine now. live and learn.