How do I use multiple buttons with ons.notification.prompt?

  • I’m looking to use ons.notification.prompt with a “Cancel” button. I realize you can set “cancelable” and allow an off-object tap or click, but I would like an intuitively available “Cancel” button that performs the same function. As it stands, all buttons added behave the same with no way to return an index.

  • @humblecoder Check out the code here in the tutorial. Dialog 2 has that buttong.

  • @munsterlander That’s for the “alert” panel, not the “prompt”. And while the “prompt” panel supposedly extends “alert”, it doesn’t resolve in the same way. It resolves to the entered string value, rather than the index of the button pressed. I need both. Perhaps I’m missing something?

  • Onsen UI

    @humblecoder I think you’re right, we should add something like an option to provide a cancel button on prompts. Maybe you can request the feature by creating an issue on our GitHub?

  • Onsen UI

    We could add a “cancel” button to the prompt if it’s common on iOS and Android.
    For now, you can simply make your own ons-alert-dialog with an input and 2 buttons:

    <ons-alert-dialog modifier="rowfooter" cancelable>
      <div class="alert-dialog-title">Hi there!</div>
      <div class="alert-dialog-content">
        We need your input
        <ons-input modifier="underbar"></ons-input>
      <div class="alert-dialog-footer">
        <button class="alert-dialog-button" onclick="...">Cancel</button>
        <button class="alert-dialog-button" onclick="...">OK</button>

  • @Fran-Diox Yup, my point.

  • @Fran-Diox:

    Aaaaaah, understood. I was using JS strictly for “simplicity” sake. I’ll check this out. Apologies @munsterlander, I thought you were simply pointing to the “mult-ibutton” aspect of “alert” rather than being able to add a custom “input”.

  • @humblecoder No problem. I could have been clearer as I was just showing that they are all basically the same and you can custom build them out however you want.

Log in to reply