Dialog with more inputs

Questions
1

Hello,

How would I make a dialog with two input boxes? This is what I have so far but it doesn’t work as expected.

    let dialogContent = '<div class="dialog-input-field item-input">' +
                      '<div class="dialog-text">Name</div>' +
                      '<div class="item-input-wrap">' +
                        '<input type="text" class="dialog-input" placeholder="(optional)">' +
                      '</div>' +
                      '<div class="dialog-text">Calories</div>' +
                      '<div class="item-input-wrap">' +
                        '<input type="number" class="dialog-input">' +
                      '</div>' +
                    '</div>';


let dialog = f7.dialog.create({
  title: "Quick Add",
  text: "",
  content: dialogContent,
  buttons: [{text: "Cancel", keyCodes: [27]}, {text: "Ok", bold: true, keyCodes: [13]}],
  onClick(dialog, index) {
    const inputValue = dialog.$el.find('.dialog-input').val();
    if (index === 0 && callbackCancel) callbackCancel(inputValue);
    if (index === 1 && callbackOk) callbackOk(inputValue);
  },
  destroyOnClose: true,
}).open()

Also, how can I define a dialog in a separate HTML file and bring this into my current page at run-time?

Thanks.

2

Hi
same code worked for me

  1. changes

let dialog = app.dialog.create({})

  1. also have a look at https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/dialog.html

Capture
Capture1352×451 55.6 KB

3

When I use it clicking in the top input box highlights the bottom input box with a blue line, is this the same for you?