Using a jQuery function inside a PHP foreach loop

Question

I have a PHP array of elements

Now I would like to create a link or a button for each of the array elements, when clicked, the array value should appear inside a specific div.

here is my code:

<?php
$array = array('apple', 'banana', 'orange');
foreach($array as $element) {
?>
    <a href="#" onclick="return false;" id="showElement"><?php echo $element; ?></a><br />
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#showElement").click( function() {
            $("#hot").append('<?php echo $element; ?><br />');
        });
    });
    </script>

    <?php
    }
    ?>
    <div id="hot"></div>

This just doesn't work the way I'd like it to. It displays the separate links for each of the array elements, but when I click on the first one it just displays all the three array elements, instead of just the intended one. The other two links do nothing.

Any help would be appreciated guys, my approach may even be completely the wrong way to do it, so please lead me to the correct way.

Thanks

Answer 1

I don't know what you want to achieve actually, but you should separate concerns [ie don't let php mess with js directly at least].

Consider injecting your values via data-* attributes, and retrieve them later via jQuery like this:

<?php foreach($array as $element): ?>

    <a href="#" class="yourClass" data-value="<?php echo $element; ?>"><?php echo $element; ?></a>

<?php endforeach; ?>

<div id="target"></div>

<script>

$(function(){

    var $target = $('#target')

    $('.yourClass').click(function(e){

        e.preventDefault()

        $target.append( $(this).data('value') )

    })

})

</script>

Remember then that id attribute should be unique, and cannot be repeated throughout DOM.

Answer 2

Try this

<?php
$array = array('apple', 'banana', 'orange');
foreach($array as $element) {
?>
    <a href="#" onclick="return false;" id="showElement-<?php echo $element; ?>"><?php echo $element; ?></a><br />
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#showElement-<?php echo $element; ?>").click( function() {
            $("#hot").append('<?php echo $element; ?><br />');
        });
    });
    </script>

    <?php
    }
    ?>
    <div id="hot"></div>

The problem is that you're binding the same id's to your append function. I've changed your id names. You can simply change them using

$("#showElement-<?php echo $element; ?>")

So they get a different id name anyway.

Answer 3

What about:

<?php
$array = array('apple', 'banana', 'orange');
$i=0;
foreach($array as $element) {
    echo '<a href="#" class="showElement" id="showElement'.$i.'">'.$element.'</a><br />';
    $i++;
}
?>

Then

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    var $target = $('#target');
    $(".showElement").click( function(e) {
        e.preventDefault();
        $target.append( $(this).text() );
    });
});
</script>