Как получить url для htmx get из события SSE, которое само вызывает вызов hx-get?

Я использую django с django-channels и htmx.

В некоторых случаях мои представления django будут отправлять событие SSE пользователю, подписанному на соответствующий канал, например, уведомление. Некоторые из этих событий (в зависимости от имени события) должны вызвать модальное всплывающее окно (например, модальное окно оценки после завершения заказа электронной коммерции или услуги).

Я реализовал требования по генерации событий и данных на стороне сервера. Я хочу использовать расширение htmx sse на фронтенде (шаблон django).

Моя проблема заключается в том, что я хочу получить событие, скажем order_complete, и использовать его для запуска hx-get вызова определенного url, который будет отправлен событием sse. Затем ответ hx-get будет помещен в placeholder, где существует логика модального представления.

У меня очень мало знаний по JavaScript и не так много по htmx. Я рассматривал варианты замены вне группы, но не уверен, что это то, что мне нужно.

Буду признателен за любые мнения или предложения по дальнейшим действиям, включая не-htmx решение, если оно лучше работает или проще.

Спасибо.

Вы можете добавлять параметры к (фиксированному) url.

На стороне клиента javascript обрабатывает событие sseMessage.


    document.body.addEventListener('htmx:sseMessage', function (evt) {

        //* check if this event is the one you want to use
        if (evt.detail.type !== "order_complete") {
            return;
        }

        //* If a JSON string was sent, leave it as it is 
        //evt.detail.elt.setAttribute("hx-vals", evt.detail.data);

        //* if not
        var msg = {};
        msg.orderId = evt.detail.data;   
        evt.detail.elt.setAttribute("hx-vals", JSON.stringify(msg));
    });

смотрите https://htmx.org/attributes/hx-vals/

результат url, если evt.detail.data был 123:

/orders/showmodal?orderId=123

html:

    <div hx-ext="sse" sse-connect="/sse-something">
        <div hx-get="/orders/showmodal"
                hx-trigger="sse:order_complete"
                hx-swap="innerHTML"
                hx-target="#idModalPlaceholder">
        </div>
    </div>

Update
. Вы также можете использовать слушатель событий только для order_complete.


    document.body.addEventListener('sse:order_complete', function (evt) {

        //* If a JSON string was sent, leave it as it is 
        //evt.detail.elt.setAttribute("hx-vals", evt.detail.data);

        //* if not
        var msg = {};
        msg.orderId = evt.detail.data;   
        evt.detail.elt.setAttribute("hx-vals", JSON.stringify(msg));
    });
Вернуться на верх