X-editable: Smarty Loop Array

Question

The page I am trying to create is an edit page for different labtests. Each labtest has different results that fall under it and different normal ranges (hence the Min/Max) so the values are from a SQL SELECT statement in PHP then sent to Smarty. I am using BootStrap hence why I went with X-editable.

I want to use X-editable to edit these lab test values, but am running into issues in the foreach statement. The edit function works for the first row, but not the following rows. My understanding is it is because they have the same id (I.E. a id=""). Is there any way around this? I am quite new to JS so I am struggling to come up with solutions.

Shooting in the dark here, but I could try using the PK in addition as part of the id and send the array to the JS to loop through as well to make the link editable in JS? It seems a bit silly logically though so hopefully there is a better way?

Here is what I have done.

<table class="table table-striped">
<thead>
    <th>Test Type</th>
    <th>Measurement Unit</th>
    <th>Min. Male</th>
    <th>Max. Male</th>
    <th>Min. Female</th>
    <th>Max. Female</th>
    <th>Min. Child</th>
    <th>Max. Child</th>
</thead>
{foreach from=$alltests item=alltests}
    <tr>
        <td><a href="#" id="valuename" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Test Type">{$alltests.valuename}</a></td>
        <td><a href="#" id="Units" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Unit of Measurement">{$alltests.Units}</a></td>
        <td><a href="#" id="MaleMin" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Minimum Male Range Value">{$alltests.MaleMin}</a></td>
        <td><a href="#" id="MaleMax" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Maximum Male Range Value">{$alltests.MaleMax}</a></td>
        <td><a href="#" id="FemaleMin" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Minimum Female Range Value">{$alltests.FemaleMin}</a></td>
        <td><a href="#" id="FemaleMax" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Maximum Female Range Value">{$alltests.FemaleMax}</a></td>
        <td><a href="#" id="ChildMin" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Minimum Child Range Value">{$alltests.ChildMin}</a></td>
        <td><a href="#" id="ChildMax" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Maximum Child Range Value">{$alltests.ChildMax}</a></td>
    </tr>
{/foreach}

{literal}
<script>
$(document).ready(function() {
    $('#TestName').editable();
    $('#TestPrice').editable();
    $('#valuename').editable();
    $('#Units').editable();
    $('#MaleMin').editable();
    $('#MaleMax').editable();
    $('#FemaleMin').editable();
    $('#FemaleMax').editable();
    $('#ChildMin').editable();
    $('#ChildMax').editable();
});
</script>
{/literal}

Thank you for your time!

Answer 1

Have you tried doing it with one class instead of id?

<td><a href="#" class="is_editable" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Test Type">{$alltests.valuename}</a></td>
<td><a href="#" class="is_editable" data-type="text" data-pk="{$alltests.ID}" data-url="labtest-edit-post.php" data-title="Enter Unit of Measurement">{$alltests.Units}</a></td>

and so on, and then:

$('.is_editable').editable();