messageHTML in ons.notification.confirm



  • Hey all. I’m using Onsen 2 + React and I’m wondering how I can get my component to interact with the messageHTML I give to ons.notification.confirm()?

    class Example extends Component
    {
    ...
       func1()
       {
       }
    
       func2()
       {
          ons.notification.confirm(
          {
             messageHTML: '<div><input onChange=????/></div>'
         } );
      }
    }
       
    

    Specifically, I’m trying to figure out how I can get the onChange handler for an input to call func1() on my React component.



  • @sherscher Well, I am new to React, but I would assume it would be something like:

    <input onChange={this.func1} />
    

    Based on this documentation here: https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html


  • Onsen UI

    @sherscher I’m not completely sure if I understood your usecase. ons.notification.confirm will display 2 buttons, “cancel” and “ok”. The message you pass there is supposed to be just text (you can use HTML to style it). If you want an input you can use ons.notification.prompt instead. Check this tut to see the differences. They return promises, it’s shown in the second page.

    @munsterlander I think that won’t work since messageHTML expects HTML, not JSX :sweat_smile:



  • @Fran-Diox Ah. Yeah, this react stuff makes me scratch my head.



  • @Fran-Diox Thanks for the response. I actually want two inputs. Can I do that with ons.notification.prompt? I didn’t see how.

    In any event, I got it to work using confirm.

    window.usernameChanged = (value) =>
    {
        username = value;
    }
    
    window.passwordChanged = (value) =>
    {
        password = value;
    }
    
    ons.notification.confirm(
    {
        title       :  title + " for \"" + this.props.service.name + "\"",
        messageHTML : `<div
                            style="margin: 15px 0px 10px 0px;"
                         >
                            <input oninput="window.usernameChanged(this.value)" style="width: 90%;" placeholder="Username"/>
                            <input oninput="window.passwordChanged(this.value)" style="width: 90%;" placeholder="Password" type="password"/>
                         </div>`,
        callback    : ( index ) =>
        {
                    ...
        }
    } );
    

    Is there a better way of doing this?

    Thanks!


  • Onsen UI

    @sherscher Even if you do it that way, you won’t be able to read the second input since notification.prompt only resolves to the content of the default input. You can show 2 different prompts one after another or simply make your own ons-alert-dialog template. In the same tutorial there is an example made from a template.

    Edit: Just modified that tut: https://codepen.io/frankdiox/pen/JRPkwy?&editors=101 (Second list item)


Log in to reply