Question

在用于索引功能的View的CakePHP 3中，我使用了一个模式，允许用户编辑表中每个数据条目的特定属性。当他们提交这些属性时，就会发生一个AJAX帖子。

这是我查看以下数据条目的表：

<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>

这是我单击“更改照片”以获取数据条目时触发的相应脚本：

<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"引用此函数，以获取模态中字段的任何数据（如果有）：

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

然后打开模态：

<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>

当我单击Save Changes按钮时，将触发此脚本并发生AJAX帖子：

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

然而，虽然AJAX帖子确实有效并且它只编辑模态中的字段（其他所有内容都未触及，而且模式中的字段不会变为空白），正在编辑的数据条目始终是最后一个数据输入，而不是所选条目（例如，如果我在Users表中有2个数据条目，则始终会编辑条目2，即使我选择数据条目1进行编辑）。

编辑：添加了表格，该脚本打开了模态和模态本身。

Answer 1

除非您从发布请求中传递正确的user_id，否则总是会编辑用户表的最后一行。

查看脚本：

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

$ user-＆gt; id将始终记录您的foreach循环的最后一条记录。

尝试这样的事情：

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

在发布请求时：

<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>

AJAX帖子始终保存在最后一个数据条目而不是选定的数据条目

1 个答案: