Geek Answers Handbook

Pass a specific array element to ajax in joomla 3 module

I am sure it is really simple, but I have been trying to get it for ages. I have a foreach loop that iterates over an array of objects and displays them in an html table with a submit button that, when clicked, calls an ajax call to display some data on one page.

All this works fine, except that it skips the value of the last object from the array in the foreach loop instead of the value displayed on this row of the table. I tried to use the counter or set and id for, but I don’t know how to get this particular value and pass it.

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.

+5
source share
1 answer

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' };

In addition, you can bind information using the button with the html5 data attribute

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

More articles:


All Articles