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.

munsterlander

@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

Fran Diox

@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:

munsterlander

@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!

Fran Diox

@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)

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

messageHTML in ons.notification.confirm