[FIXED] AJAX post always saving in last data entry rather than selected data entry

Issue

In CakePHP 3 on the View for the index function, I'm using a modal that allows users to edit specific attributes for each of the data entries in a table. When they submit those attributes, an AJAX post occurs.

This is the table I view the data entries from:

<table>
    <thead>
        <tr>
            <th scope="col"><?= $this->Paginator->sort('name', 'Name') ?></th>
            <th scope="col"><?= $this->Paginator->sort('email', 'Email') ?></th>
            <th scope="col"><?= $this->Paginator->sort('phoneno', 'Phone Number') ?></th>
            <th scope="col" class="actions"><?= __('Actions') ?></th>
        </tr>
    </thead>
    <tbody>
    <?php foreach ($users as $user): ?>
        <tr>
            <td><?= h($user->name) ?></td>
            <td><?= h($user->email) ?></td>
            <td><?= h($user->phoneno) ?></td>
            <td class="actions" style="color: #0f4bac">
                <?= $this->Html->link(__('View'), ['action' => 'popup', $user->id], ['class' => 'view', 'data-id' => $user->id]) ?>
                <?= $this->Html->link(__('Change Photo'), ['action' => 'popup', $user->id], ['class' => 'managephoto', 'data-id' => $user->id]) ?>

            </td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

This is the corresponding script that is triggered when I click Change Photo for a data entry:

<script type="text/javascript">
    $(function () {
        $('.managephoto').click(function (ev) {
            ev.preventDefault();
            var userId = $(this).attr('data-id');
            $('#photoModal').modal('show');
            $.ajax({
                url:"localhost/project/users/details/"+userId+".json",
                type:'POST',
                success:function(res) {
                    if(res) {           
                        $('#photo').val(res.photoLink);                                                  
                        $('#text').val(res.text);
                    }
                }
            });
        });
    });
</script>

url:"localhost/project/users/details/"+userId+".json" references this function, to fetch any data for the fields in the modal (if any):

public function details($id = null)
    {
        $details = $this->Users->get($id);
        $this->set(array(
            'output' => $details,
            '_serialize' => 'output',
            '_jsonp'=>true
        ));
    }

The modal then opens up:

<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="photoModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="photoModalLabel">Change Photo</h3>
                <br>
                <div>
                    <div class="col-sm-12">
                        <?= $this->Form->input('photoLink', ['class' => 'form-control', 'label' => 'Photo Link', 'placeholder' => 'Link to photo', 'id' => 'photoLink]); ?>
                    </div>
                    <div class="col-sm-12">
                        <?= $this->Form->input('text', ['type' => 'textarea', 'class' => 'form-control', 'label' => 'Photo Caption', 'placeholder' => 'Description', 'id' => 'text']); ?>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                </button>
                <button id="savebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes
                </button>
            </div>
        </div>
    </div>
</div>

When I click the Save Changes button, this script is triggered and the AJAX post occurs:

<script>
    $(document).ready(function () {
        $("#savebutton").click(function () {
            $.post("localhost/project/users/edit/<?= $user->id ?>.json", {
                photoLink: $("#photo").val(),
                text: $("#text").val()
            });
        });
    });
</script>

However, while the AJAX post does work and it does edit only the fields in the modal (everything else is untouched and fields not in the modal don't go blank), the data entry being edited is always the last data entry, and not the selected entry (eg. if I have 2 data entries in the Users table, entry 2 will always be edited, even if I selected data entry 1 to Edit).

Edit: Added the table, the script which opens up the modal and the modal itself.

Solution

That is always going to edit last row of the user table unless you pass correct user_id from the post request.

Look at the script:

<script>
$(document).ready(function () {
    $("#savebutton").click(function () {
        $.post("localhost/project/users/edit/<?= $user->id ?>.json", {
            photoLink: $("#photo").val(),
            text: $("#text").val()
        });
    });
});
</script>

$user->id will always take last record of your foreach loop.

Try something like this:

<script type="text/javascript">
$(function () {
    $('.managephoto').click(function (ev) {
        ev.preventDefault();
        var userId = $(this).attr('data-id');
        $('#photoModal').modal('show');
        $('#photoModal').attr('userId',userId);
        $.ajax({
            url:"localhost/project/users/details/"+userId+".json",
            type:'POST',
            success:function(res) {
                if(res) {           
                    $('#photo').val(res.photoLink);                                                  
                    $('#text').val(res.text);
                }
            }
        });
    });
});

At the post request:

<script>
$(document).ready(function () {
    $("#savebutton").click(function () {
        var userId = $("#photoModal").attr('userId');
        $.post("localhost/project/users/edit/"+userId+".json" , {
            photoLink: $("#photo").val(),
            text: $("#text").val()
        });
    });
});
</script>

Answered By - Manohar Khadka