How can I update pivot fields on Manage step with AJAX with OctoberCMS?

Question

I try to be able to get from a server some values for pivot data after linking a related record to the main one. Here's a step of entering pivot data and some of them should be generated (no problem to enter them manually, the problem is to make it through AJAX):

Here's an example of related fields.yaml

fields:
    pivot[sort]:
        label: Order
        type: number
        span: auto
    pivot[time_from_start_to_sight]:
        label: Time from start to the sight
        type: number
        span: auto
    pivot[add_route_time]:
        label: Add time
        type: number
        span: auto
    pivot[add_route_price]:
        label: Basic add. price
        type: number
        span: auto
    pivot[stay_time_default]:
        label: Default stay time
        type: number
        span: auto
    pivot[stay_time_min]:
        label: Min. stay time
        type: number
        span: auto
    pivot[stay_price]:
        label: Price per quarter of hour
        type: number
        span: auto
    _gmaps_sync:
        label: You may try to get data from Google Maps API
        type: gmapsroutesightsync
        commentAbove: Make sure you have entered Google Maps API key

As you can see I added a custom widget to be able to paint a button. I can even call an AJAX-handler of a widget and apply new values to the passed data saving them to DB inside the controller.

But I do not have the slightest idea how to push updated partial or update the partial with new values. Of course it's possible update every field by non-organized JS code - but I'm sure there's a smart way.

Please point to the best practices. Thank you.

Answer 1

May be you need to update your partial form, push it from controller where you are updating all data and saving it.

I guess for pivot data form you already defined the partial which will be rendering "relations" so you can update that partial.

when you do ajax call using October's ajax framework you can use something like

data-request-update="relation: '#Form-relationClassesManagePivotForm'

OR

if programmatically you are firing request you can do

$.request('onRefreshTime', {
    update: { relation: '#Form-relationClassesManagePivotForm' }
})

you can check api in detail here : https://octobercms.com/docs/ajax/update-partials

here my pivot relation name is "classes" so id is generated like this, but you can inspect element to get proper id it will be inside "modal-body".

now from controller you just need to push updated partial and it will be updated automatically.

function onRefreshTime()
{
    return [
        '#Form-relationClassesManagePivotForm' => $this->renderPartial('pivot_form')
        // or 'relation' => $this->renderPartial('pivot_form')
    ];
} 

here its better to write this method on same controller you are rendering page as it will be already defined definitions for relation so relation widget is already build.

if any confusion please let me know in comments.

UPDATE

you need to add this code inside controller where you updating fields

return ['#myform' => $this->asExtension('RelationController')->onRelationClickManageListPivot()];

and you need to add one partial its override from the relation manger. you can see i am adding custm id = 'id'=>"myform"

_relation_pivot_form.htm (copy from relation manager and paste in your controller folder)

<?php if ($relationManageId): ?>

    <?= Form::ajax('onRelationManagePivotUpdate', [
        'data' => ['_relation_field' => $relationField, 'manage_id' => $relationManageId],
        'data-popup-load-indicator' => true,
        'id'=>"myform"
    ]) ?>

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="popup">&times;</button>
            <h4 class="modal-title"><?= e(trans('backend::lang.relation.related_data', ['name'=>trans($relationLabel)])) ?></h4>
        </div>
        <div class="modal-body">
            <?= $relationPivotWidget->render(['preview' => $this->readOnly]) ?>
            <button
                type="button"
                data-request="onPivotRefresh"
                class="btn btn-primary">
                Refresh Partial
            </button>

        </div>
        <div class="modal-footer">
            <?php if ($this->readOnly): ?>
                <button
                    type="button"
                    class="btn btn-default"
                    data-dismiss="popup">
                    <?= e(trans('backend::lang.relation.close')) ?>
                </button>
            <?php else: ?>
                <button
                    type="submit"
                    class="btn btn-primary">
                    <?= e(trans('backend::lang.relation.update')) ?>
                </button>
                <button
                    type="button"
                    class="btn btn-default"
                    data-dismiss="popup">
                    <?= e(trans('backend::lang.relation.cancel')) ?>
                </button>
            <?php endif ?>
        </div>

    <?= Form::close() ?>

<?php else: ?>

    <?= Form::ajax('onRelationManagePivotCreate', [
        'data' => ['_relation_field' => $relationField, 'foreign_id' => $foreignId],
        'data-popup-load-indicator' => true
    ]) ?>

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="popup">&times;</button>
            <h4 class="modal-title"><?= e(trans('backend::lang.relation.related_data', ['name'=>trans($relationLabel)])) ?></h4>
        </div>
        <div class="modal-body">
            <?= $relationPivotWidget->render() ?>
        </div>
        <div class="modal-footer">
            <button
                type="submit"
                class="btn btn-primary">
                <?= e(trans('backend::lang.relation.add')) ?>
            </button>
            <button
                type="button"
                class="btn btn-default"
                data-dismiss="popup">
                <?= e(trans('backend::lang.relation.cancel')) ?>
            </button>
        </div>

    <?= Form::close() ?>

<?php endif ?>

I think it should do your work. if its not working then i need your code ;)