Passing PHP variable to Html link for modal and AJAX

问题

In CakePHP 3, baked controllers have 4 functions that have their own views: Index, Add, Edit and Delete. I'm trying to move the Edit and View functions to modals, but I need the PHP variable to determine the specific data entry that is to be modified or viewed.

Eg. I have a table called Users.

In the Index function of the UsersController, I would define the following variable:

$users = $this->paginate($this->Users);

$this->set(compact('users'));
$this->set('_serialize', ['users']);

Then on the Index view (Index.ctp), inside the table I would have the following actions:

<?php foreach ($users as $user): ?>
<tr>
    <td class="actions">
        <?= $this->Html->link(__('View'), ['action' => 'view', $user->id]) ?>
        <?= $this->Html->link(__('Edit'), ['action' => 'edit', $user->id]) ?>
    </td>
</tr>
<?php endforeach; ?>

I want the above actions to pass $user->id into a HTML tag that would open up a modal as follows:

View Edit

And use JavaScript to open up the model.

$(function () {
   $('#view').click(function () {
        $('#viewModal').modal('show');
   });
});

$(function () {
   $('#edit').click(function () {
        $('#editModal').modal('show');
   });
});

Alternatively, just pass it straight to the modal, and then fetch data for each of the form fields based on that.

Then for the Edit modal, when saving, I would use AJAX PUT to save.

Edit Modal:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
               <h4 class="modal-title" id="myModalLabel">Edit</h4>
               <div>
                   <div class="col-sm-6">
                       <?= $this->Form->input('firstname', ['class' => 'form-control', 'label' => 'First Name', 'id' => 'firstname']); ?>
                   </div>
                   <div class="col-sm-6">
                       <?= $this->Form->input('lastname', ['class' => 'form-control', 'label' => 'Last Name', 'id' => 'lastname']); ?>
                   </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>

回答1:

pass an id to your link as follows:

<?php foreach ($users as $user): ?>
<tr>
    <td class="actions">
        <?= $this->Html->link(__('View'), ['action' => 'view', $user->id]), ['id' => 'view', 'data-id' => $user->id]) ?>
        <?= $this->Html->link(__('Edit'), ['action' => 'view', $user->id]), ['id' => 'edit', 'data-id' => $user->id]) ?>
    </td>
</tr>
<?php endforeach; ?>

then within your modals define user id as follows:

it isn't clear how do you implement your modals, so i will assume the following

$(function () {
   $('#view').click(function (ev) {
        ev.preventDefault();
        var userId = $(this).attr('data-id');
        $('#viewModal').modal('show');
   });
});

$(function () {
   $('#edit').click(function (ee) {
        ee.preventDefault();
        var userId = $(this).attr('data-id');
        $('#editModal').modal('show');
   });
});

you will need to pass the userid to your modal you using

来源：https://stackoverflow.com/questions/42808723/passing-php-variable-to-html-link-for-modal-and-ajax

标签

php

html

cakephp

bootstrap-modal