October CMS resources and help articles

Simple and to the point. Optimized by the community.

Update backend list records in a popup

24
by larryb, last modified on August 12th, 2019

Have you ever needed or wanted to update a record from the list view by opening a popup, rather than navigating to the update page? This trick will help you do just that!

  1. Update the recordOnClick property of your config_list.yaml inside your controller's folder:
# Link URL for each record
recordOnClick: "$.popup({ handler: 'onUpdateForm', extraData: { record_id: ':id' } })"
  1. Register the onUpdateForm handler in your controller class:
public function onUpdateForm()
    {     
        $this->asExtension('FormController')->update(post('record_id'));
        $this->vars['recordId'] = post('record_id');
        return $this->makePartial('update_form');
    }
  1. Create the _update_form.htm partial inside your controller's views directory (i.e. /plugins/author/controllers/controllerName):
<?= Form::open(['id' => 'updateForm']) ?>
    <input type="hidden" name="record_id" value="<?= $recordId ?>" />
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="popup">×</button>
        <h4 class="modal-title"><?= e($this->pageTitle) ?></h4>
    </div>

    <?php if (!$this->fatalError): ?>

        <div class="modal-body">
            <?= $this->formRender() ?>
        </div>
        <div class="modal-footer">
            <button
                type="submit"
                data-request="onUpdate"
                onclick="$(this).data('request-data', {
                    redirect: 0
                })"
                data-hotkey="ctrl+s, cmd+s"
                data-popup-load-indicator
                class="btn btn-primary">
                <u>S</u>ave
            </button>

            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.form.cancel')) ?>
            </button>
        </div>

    <?php else: ?>

        <div class="modal-body">
            <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
        </div>
        <div class="modal-footer">
            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.form.close')) ?>
            </button>
        </div>

    <?php endif ?>

    <script>
        setTimeout(
            function(){ $('#updateForm input.form-control:first').focus() },
            310
        )
    </script>

<?= Form::close() ?>
  1. Register the onUpdate handler in the controller class:
public function onUpdate()
    {
        $this->asExtension('FormController')->update_onSave(post('record_id'));
        return $this->listRefresh();
    }

Discussion

1 comment

0
pgarnek
Post on November 16th, 2021 10:28 PM

im trying to make something similar.... but much more complicated, and i'm stuck :-( In my situation:

Offer (Model) has many Products (Model) (many to many relation with pivot data) Product has attributes like "cost" and "price" Pivot table has Offer_id, Product_id, cost, price Products in Offer have displayed, using RelationRender in my partial

and i want to 1) make new button, like "batch edit" in relation render 2) open popup with new form from: best option would be same form, as displaying when product is added to offer, but when showCheckboxes option is set to true, for this relation list, form shows, but when i place any values there, products (multiple or single) wouldn't have set this value into pivot table.... so i think, i can totally remove this form from relation_config, and create my own form... 3) after button "update all" in popup is clicked, set desired values of cost/price for each product, which was selected...

i know, how to make new relation button (solution found @this page :) - thanks!) i know, how to call an ajax handler and pass selected id's of products

now i don't know, how to render form, open popup and make rest of process which i described above.

can You send any clues/details, how to force that?

We use cookies to measure the performance of this website. Do you want to accept these cookies?