CODEWITHSUNDEEP
javascriptjquerycsshtmlmaterialize
dbr
dbr

Reputation: 1047

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

Upvotes: 0

Views: 567

Answers (2)

skav
skav

Reputation: 1460

Theres a bug in your event handler, this will work.

$('.button-collapse').sideNav({
  menuWidth: 200, // Default is 240
  edge: 'right', // Choose the horizontal origin
  //closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
  //draggable: true // Choose whether you can drag to open on touch screens
});


$(".button-collapse").click((e) => {
  $('#title').val($(e.target).data('title'));
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>



<ul id="slide-out" class="side-nav">
  <input type="text" id="title" name="title" value="my Title">
</ul>

<a href="#" data-activates="slide-out" class="button-collapse" data-title="Option one title">Option 1</a>
<a href="#" data-activates="slide-out" class="button-collapse" data-title="Option two title">Option 2</a>

Upvotes: 0

c-smile
c-smile

Reputation: 27460

<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.

Upvotes: 1

Related Questions