Fw7 dynamic Dialog + dynamic event DMX

I use Fw7 ver 4.5.2 local

I create a dynamic dialog with a select:

$('.mediatek_filter').on('click', function () {
    app.dialog.create({
        title: 'Фильтр мероприятий',
        text: '<div class="row" style="align-items: center;"><div class="col-auto"><div class="list media-list" style="margin: 0;"><ul><li class="item-content item-input"><div class="item-inner"><div class="item-title item-label">Формат мероприятия</div><div class="item-input-wrap input-dropdown-wrap"><select name="selectFilter" placeholder="Выберите формат мероприятия..." readonly="true"><option value="0">Все мероприятия</option><option value="1">Интервью</option><option value="2">Процедура</option><option value="3">Событие</option><option value="4">Интерьер</option><option value="5">Препарат</option></select></div></div></li></ul></div></div></div>',
        buttons: [
            {
                text: 'Отмена',
            },
            {
                text: '<a href="#" dmx-on:click="nameProduct.setValue(selectFilter.value)">Применить</a>',
            },
        ],
        on: {
            opened: function () {
                if (window.dmx && dmx.app) {
                    dmx.app.$parse(page.el);
                    dmx.app.$update();
                }
            }
        }
    }).open();
});

As you can see from the code, I trigger an event after the dialog openned so that dmx updates the links to the page elements. However, the dynamic event associated with the dialog button does not work.

Variable nameProduct works correctly. If I use the above code not in a dynamic dialog, but just place it on the page, then everything will work correctly. The problem only occurs when using a dynamic dialog.

What my mistake?

Thank you in advance.

Instead of creating a link, can you just use onClick?

{
    text: 'Применить',
    onClick: function() {
        dmx.parse("nameProduct.setValue(selectFilter.value)");
    }
 }

Thanx @mebeingken

No, this causes an error:

The fact is that the dailog window itself and the button work stably. If I put a route in the link, when I click on the button, I can go to the specified page. This means that the link works.

The problem occurs with the binding of the dynamic dmx-on:click event. This is why I created a special event at the modal window itself:

on: {
    opened: function () {
       if (window.dmx && dmx.app) {
           dmx.app.$parse(page.el);
           dmx.app.$update();
        }
      }
    }

For dmx to update the elements that were created when creating the dialog window. The event also works stably, made a check on the console.

I can't understand why dmx can't see this link after updating and can't apply the dynamic dmx-on:click event to it.

I think you grabbed my code while I was editing…sorry about that!

The error you show does not have a closing parenthesis.

Hmm, very interesting…

After the fix, the function really started working.

But there is a problem with the select. For some reason, the value is not set in the select when I make a selection. Whatever I choose, the function will always send an empty value to in nameProduct variable.

Very strange behavior. Can it be that the values of the select do not have time to be passed, because the dialog is destroyed first after the button is clicked?

Try this:

{
    text: 'Применить',
    close: false,
    onClick: function() {
        dmx.parse("nameProduct.setValue(selectFilter.value)");
        setTimeout(function() {
            $(this).close; //I'm guessing on this line 
        }, 100);
    }
 }

Basically, remove the default close, and then close on click.

Should be: $(this).close(); Close is a method.

Sorry for the thrash on this, but I’m finally where I can test!

{
    text: 'Применить',
    close: false,
    onClick: function() {
        dmx.parse("nameProduct.setValue(selectFilter.value)");
        setTimeout(function(dialog) {
            dialog.close(); 
        }, 100);
    }
 }

Not sure it solves your problem, but setting a value and closing the dialog works for me.

This causes an error for me:

But even though the window does not close, the value from the select is not passed to the nameProduct variable.

The dialog component just puts me in a stupor. Apparently I don’t understand the logic of its operation, because I didn’t have such problems with other Fw7 components. :slightly_frowning_face: