Question

I have the following html code for my php page.

<span id="edit_button_<?php echo $row[$id]; ?>" style="display:block;" onClick="editRow(this, '');"><img src="images/edit.png" />
<span id="edit_save_<?php echo $row[$id]; ?>" style="display:none;" onClick="saveRow(this,'');"><img src="images/green_check.png" />
<span id="edit_cancel_<?php echo $row[$id]; ?>" style="display:none;" onClick="cancelEdit(this, '');"><img src="images/red_cross.png" />

In the editRow() function, I added the following lines to make the #edit_save_ and #edit_cancel_ elements visible:

$('#edit_save_'+id).show();
$('#edit_cancel_'+id).show();

But they are not getting displayed. I then added the following lines as well, but it didn’t work either:

document.getElementById('edit_save_'+releaseTable+relPid).style.display = 'block';
document.getElementById('edit_cancel_'+releaseTable+relPid).style.display = 'block';        

Strangely, the issue is only with some of the records. Like row 1 is showing green_check and red_cross images, but row 2 doesn’t.

Answer 1

The reason the first row is working but the subsequent rows are not is because you can’t have multiple rows with the same IDs. Unlike jQuery class selectors, ID selectors will find the 1st match and only that match, which in your case is that first row.

Also, it is preferable not to have your JavaScript inline with your HTML. This is what people call “separation of concerns” or “separation of presentation and logic” or any permutations of that. It is best to put the Javascript within a <script> tag either on the same page as your PHP or preferably as an external script.

so instead of this inline function call:

<span onclick="editRow()"></span>

you would do this:

<script>
      $('span').on('click', function(){
           //call editRow(); 
           // or make other javascript which performs editRow function (toggle display)
       });           
</script>

To get back to your scenario and overcome this issue with using an ID-based selector, add a class to each clickable button, edit_button, like this:

HTML:

<span class="edit_button" data-id="<?php echo $row[$id]; ?>" id="edit_button_<?php echo $row[$id]; ?>" style="display:block;" ><img src="images/edit.png" /></span>
<span id="edit_save_<?php echo $row[$id]; ?>" style="display:none;" onClick="saveRow(this,'');"><img src="images/green_check.png" /></span>
<span id="edit_cancel_<?php echo $row[$id]; ?>" class="cancel_button" data-id="<?php echo $row[$id]; ?>" style="display:none;" ><img src="images/red_cross.png" /></span>

this is then what the JS looks like:

$('.edit_button').on('click', function(){
    var id=$(this).data('id');
    $(this).toggle();
    $('#edit_save_'+id).toggle();
    $('#edit_cancel_'+id).toggle(); 
});

$('.cancel_button').on('click', function(){
    var id=$(this).data('id');
    $(this).toggle();
    $('#edit_save_'+id).toggle();
    $('#edit_button_'+id).toggle(); 
});

Please see this JSfiddle where I’ve taken the PHP out of it. I believe it shows the behavior that you’re interested in: http://jsfiddle.net/trpeters1/vLMCh/14/

Lastly, please add closing </span> tags.