pass specific element of array to ajax in joomla 3 module

Question

I'm sure this is really simple but I have been trying to get this for ages. I have a foreach loop which iterates over an array of objects and displays them in an html table with a submit button which when clicked makes an ajax call to display some data in the same page.

This all works fine except it only passes the value of the last object from the array in the foreach loop instead of the value as displayed in that table row. I have tried to use a counter or to set and id for the but unsure how to get that specific value and pass it through.

Here is what is in my code:

<?php 
// No direct access
defined('_JEXEC') or die; ?>

<div class="status shelterbuddydog" >
<table class="profile_table">
   <?php foreach ($animalDetails as $profile):?>
    <tr>
        <td><?php echo $profile->photo;?></td>
        <td><span class="profile">Name:<?php echo $profile->name;?></span><br/>
            <span class="profile">Sex: <?php echo $profile->sex;?></span></<br/>
            <span class="profile">Age: <?php echo $profile->age;?></span><br/>
            <span class="profile">Breed: <?php echo $profile->breed;?></span><br/>
            <span class="profile">Animal Id: <?php echo$profile->animalId;?></span><br/>
            <span class="profile">Location: <?php echo $profile->shelter;?></span><br/>
            <?php $profile->summary;?>
            <input type="submit" id="summary" name="summary" value="VIEW MY PROFILE">
            </input></td>
    </tr>
    <?php endforeach;

</table>
<?php 
// Instantiate global document object

$doc = JFactory::getDocument();

$js = <<<JS

(function ($) {
 $(document).on('click', '#summary', function () {

    var profileSummary = {};
        profileSummary['photo'] = '$profile->photo';
        profileSummary['name'] =  "$profile->name";
        profileSummary['sex']  = "$profile->sex";
        profileSummary['age']  =  "$profile->age";
        profileSummary['breed']  = "$profile->breed";
        profileSummary['shelter']  = "$profile->shelter";
        profileSummary['animalId']  =  "$profile->animalId";
        profileSummary['summary'] =  "$profile->summary";

        request = {
                'option' : 'com_ajax',
                'module' : 'shelterbuddydog',
                'data'   : profileSummary,
                'format' : 'raw'
            };
    $.ajax({
        type   : 'GET',
        data   : request,
        success: function (response) {
            $('.status').html(response);
        }
    });
    return false;
});
})(jQuery)
JS;
$doc->addScriptDeclaration($js);    
?>
</div>

Thanks for any help with this.

Answer 1

add hidden fields like this

<?php foreach ($animalDetails as $profile):?>
<tr>
    <td><?php echo $profile->photo;?></td>
    <td><span class="profile">Name:<?php echo $profile->name;?></span><br/>
        <span class="profile">Sex: <?php echo $profile->sex;?></span></<br/>

        <input type="submit" class="summary" name="summary" value="VIEW MY PROFILE">
        </input>

         <input type="hidden" class="name" value="<?php echo $profile->name;?>" />
        <input type="hidden" class="sex" value="<?php echo $profile->sex;?>" />

    </td>
</tr>

then

$(document).on('click', '.summary', function () {

var $tr=$(this).parents('tr');

var profileSummary = {};

    profileSummary['name'] =  $tr.find('.name').val();
    profileSummary['sex']  = $tr.find('.sex').val();

    request = {
            'option' : 'com_ajax',
            'module' : 'shelterbuddydog',
            'data'   : profileSummary,
            'format' : 'raw'
        };

alternatively you can bind info with button as well with html5 data attribute

<input class="summary" data-name="<?php echo $profile->name;?>" />