dbr dbr - 28 days ago 11
jQuery Question

Materialize CSS - passing data to sideNav

I'm using materializeCss for my latest project and I have a problem.

I use sideNav to open a 'modal' inside of which is a contact form.

This contact form should be used in multiple occasions and different informations should be prefilled depending on which button does user click.

Let me explain it in an example:

If user clicks on

Send Message
then the forms input title should be something like

<input type='text' id='title' name='title' readonly value="General message">


and if user clicks on button
Request Candy
then this input should be something like

<input type='text' id='title' name='title' readonly value="I want candies!">


Since the
sideNav
opens by clicking on an element of type

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>


I had an idea to react on the click as

$(document).on('click', '.button-collapse', function() {
console.log('got it!');
$('#title').val('My custom message from data-* or something..');
})


but this doesn't work since probably materialize hijacks click events on these
a.button-collapse
's. I don't even get the console log
got it!
.

Does anybody know a way to pass some data to the newly open sideNav?

UPDATE:

jsfiddle

Answer

<input> is a "head only" tag - has no closing </input> and yet element has no content.

So you markup shall look like

<input type='text' id='title' name='title' value='General message' readonly></input>

UPDATE:

Change to this:

$('.button-collapse').on('click', function() {
    $('#title').val($(this).data('title'));
    console.log('I have been clicked');
  })

and it will work. Seems like document or framework is consuming the event so you cannot handle it on that level.