CODEWITHSUNDEEP
phpjavascriptjquery
user1763032
user1763032

Reputation: 427

javascript inside php while loop

i have this code:

<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
  <tr>
    <td>
    <button id="button">Show comments</button>
    </td>
  </tr>
  <tr>
    <td id="comments" style="display:none;height:300px;width:100%;"></td>
  </tr>
</table>

<script type="text/javascript">
$("#button").toggle(
    function (){
        $("#button").text("Hide Comments");
        document.getElementById("comments").style.display="inline";
    },function (){
        $("#button").text("Show Comments");
        document.getElementById("comments").style.display="none";
    }
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';

$i--;

}
?>

When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?

Upvotes: 0

Views: 6618

Answers (2)

Ohgodwhy
Ohgodwhy

Reputation: 50777

I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.

<?php
$i=5;
while($i > 0):
?>
    <table width="500px" border="1">
       <tr>
          <td><button class="button" data-clicked="0">Show comments</button></td>
       </tr>
       <tr>
          <td class="comments" style="display:none;height:300px;width:100%;"></td>
       </tr>
    </table>
<?php
$i--;
endwhile;
?>

I don't know what the element with an ID of show is, but we'll just assume it was the button.

$(".button").click(function (){
    var $this = $(this);
    if(!$this.data('clicked')){
        $this.text("Hide Comments");
        $this.closest('table').find('.comments').css('display', 'inline');

        $this.data('clicked', 1);
    }else{
        $this.text("Show Comments");
        $this.closest('table').find('.comments').css('display', 'none');

        $this.data('clicked', 0);
    }

});

Don't print that javascript in a while loop in php, just include it in the head of the page, or in a separate file.

Edit

As indicated in a comment below,in jQuery 1.9 the toggle no longer works as you're intending to use it, as a work around, you can add a data attribute to the button, and check it each time we click.

<button class="button" data-clicked="0">

As you can see we've added the new data-clicked attribute.

In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else to check the data-clicked state.

Upvotes: 5

Carl
Carl

Reputation: 509

It is generally good practice to separate code, markup and style declarations. As a matter of style, I prefer numbered IDs. I find they help with debugging. ymmv I also like to animate changes so people can more easily follow a change.

<!doctype html>
<html>
    <head>
        <title>Button Testing 1 2 3</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <style>
            .comment {
                display: none;
                height: 0px;
                width: 500px;
            }
            td  {
                width: 500px;
                border: 1px solid #555;
                border-collapse: collapse;
            }
        </style>
    </head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
    <table>
      <tr>
        <td>
        <button id="button_<?= $j ?>" class="button">Show comments</button>
        </td>
      </tr>
      <tr>
        <td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
      </tr>
    </table>
<? 
    $j++;
} ?>

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

    $(".button").click(function(){
        var id = $(this).attr('id');
        var j  = id.substr(id.indexOf('_') +1);

        if ($(this).hasClass('revealed')) {
            $(this).removeClass('revealed').text('Show Comments');
            $('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
        } else {
            $(this).addClass('revealed').text('Hide Comments');
            $('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
        }
    });
});
</script>
</body>
</html>

Upvotes: 0

Related Questions