How to pass parameter from stimulus JS controller back to modal window defined in twig template?

Question

In short: I've got grid of purchases, once I click on any purchase, I see links detail and approve purchase. When I click on 'approve purchase', modal window appears and I should be able to approve purchase (change status parameter of any purchase). Problem is, that I don't know how to pass row._id (purchase ID) to this modal window.

This is how important part of my code looks like:

template:

<div{{ attributes.add(stimulus_controller('purchases/purchases')) }}>
    {% set debounceMs = 'debounce(1000)' %}
    {% set foundCount = this.purchasesCount %}

    {% component 'bootstrap_modal' with {targetId: 'approve-purchase-modal'} %}
    {% block modal_header %}
{#            {{ dump(app.request) }}#}
    <div class="modal-header">
        <h6>Purchase approval #{{ purchaseId }}</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    {% endblock %}
    {% block modal_body %}
        <div class="filter-wrap">
            <form id="approve-purchase-form" class="f-column">
                <div class="form-group center">
                    <button type="button" class="btn btn-primary btn-sm agree d-flex"
                            data-action="live#action"
                            data-live-action-param="prevent|approvePurchase"
                            data-live-index-param="{{ purchaseId }}"
                            data-bs-dismiss="modal"
                    >Approve
                    </button>
                </div>
            </form>
        </div>
    {% endblock %}
{% endcomponent %}

purchases_controller.js

window.detailFormatter = function (index, row) {
let html = []
html.push('<ul class="actions edit-actions ' + row._class + '">'
    +'<li><a class="blue" data-app-folder-type="purchase-detail" data-app-folder-title="'+row.desc+'" data-app-folder-id="'+row._id+'">Detail</a></li>'
    +'<li><a id="approve-purchase" title="" data-bs-purchase-id="'+row._id+'" data-bs-toggle="modal" data-bs-target="#approve-purchase-modal" data-toggle="tooltip" data-placement="top"'
    +'</ul>'
)
return html

How to process that

data-bs-purchase-id="'+row._id+'"

back to twig to pass it to modal as purchaseId

This is not possible as Twig(/Symfony) is rendered server-side - You'll need to resort to JavaScript, if you need extra information from Symfony, you can always create an AJAX request — DarkBee
– DarkBee, Commented Nov 8, 2024 at 9:55
i'm missing a lot of code to see what your exactly try todo. Can u share te full stimulus controller en de div. With sum assumptions i think you need a custom stimulus controller, to pass some arguments to a modal — jpvdw
– jpvdw, Commented Nov 11, 2024 at 13:39
I'm not sure I understand the whole problem, but wouldn't adding a stimulus_target('purchases/purchases', 'approveButton') to the button and adding the 'targetId' dataset from your 'purchases_controller' solve this? — Erwan Haquet
– Erwan Haquet, Commented Nov 15, 2024 at 14:08
@ErwanHaquet thanks for your answer, but solving this issue at button is too late for this situation. I need to know the purchaseId when opening modal window already. My problem is how to pass that row._id from purchases_controller.js to twig — MartinC
– MartinC, Commented Nov 19, 2024 at 9:38

MartinC · Accepted Answer · 2024-11-19 09:47:23Z

-2

so, this is the whole purchases_controller.js code

import {Controller} from '@hotwired/stimulus';
import {getComponent} from "@symfony/ux-live-component";
import '../bootstrapTableAll';

window.detailFormatter = function (index, row) {
    let html = []

    let text1 = "<ul class=\"actions edit-actions " + row._class + "\">";
    let text2 = "<li><a class=\"blue\" data-app-folder-type=\"purchase-detail\" data-app-folder-title=\""+ row.desc+ "\" data-app-folder-id=\"" + row._id + "\">Detail</a></li>";
    let text3 = ""
    if (row.status === "completed") {
        text3 = "<li><a id=\"approve-purchase\" title=\"\" data-bs-toggle=\"modal\" data-bs-purchase-id=\"" + row._id + "\" data-bs-target=\"#approve-purchase-modal\" data-toggle=\"tooltip\" data-placement=\"top\">Approve purchase</a></li>"
    }
   
    let text4 = "</ul>"
    let result = text1.concat(text2).concat(text3).concat(text4);

    html.push(result)
    return html
}

export default class extends Controller {
    static targets = ['dataTable']
    async initialize() {
        this.component = await getComponent(this.element).then((component) => {
            component.on('render:finished', (component) => {
                $(this.dataTableTarget).bootstrapTable()
            })
        })
    }
}

answered Nov 19, 2024 at 9:47

MartinC

5510 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarkBee Over a year ago

Is this an actual answer? If so then please edit the answer and explain what you've actually changed in order to solve the issue. If this is not an answer then should edit the question and add this new information in it.

Collectives™ on Stack Overflow

How to pass parameter from stimulus JS controller back to modal window defined in twig template?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related