CODEWITHSUNDEEP
javascriptjqueryeventsmodal-dialogmaterialize
user9162623
user9162623

Reputation:

Modal not opening on click (materialize, jquery)

I am playing around with a sample note manager app built using meteor/materialize/jquery.

I am having problems with my modal not popping up like it should when a button is clicked.

Here is the code for my modal:

<template name="add">
 <div id="addNote" class="modal">
  <div class="modal-content">
   <h3>Add Note</h3>
   <form class="add-form">
    <input type="text" name="text" placeholder="Add note...">
   </form>
  </div>
 </div>
</template>

This is the button that then when pressed should open the modal.

<li class="nav-item">
 <button id="addNote" class="waves-effect waves-light btn" href="#addNote">Add Note</button>
</li>

I also have this jquery code which is apparently to initialize the modal.

<script>
 $(document).ready(function(){
 $('.modal').modal();
});
</script>

When I click on the button, the modal does not pop up like I believe it should.

When I add this one line of code, the modal is open by default upon reloading the page.

<script>
 $(document).ready(function(){
  $('.modal').modal();
  $('#addNote').modal('open');
});
</script>

Therefore I would think that by doing something such as 

<script>
  $('#addNote').click(function() {
   $('#addNote').modal('open');
});
</script>

or by doing 

<button onclick="myFunction()"></button>

However, neither one of them are working as expected and the modal will not open. Does anyone know what I am doing wrong here?

Upvotes: 0

Views: 2772

Answers (6)

Keegan Fisher
Keegan Fisher

Reputation: 360

If following the guide on materialize css, I ran into this error for awhile, only to find out that it was the import order, you have to import jQuery before importing materialize.js!

Upvotes: 0

Mike
Mike

Reputation: 61

It's already an old question and with found solution (despite no accepted answer?), but been playing with this right now. I think some clarifications will help.

Was that your whole code? If not, check the line if having .modal initiated first.

$('.modal').modal();

You have omitted that part when describing details in your further steps. 

<script>
  $(document).ready(function(){
    $('.modal').modal();
    $('#addNote').click(function() {
      $('.modal').modal('open');
    });
  });
</script>

Upvotes: 1

Rudra
Rudra

Reputation: 555

opening model using materialize css

I think you must have to specify a modal-trigger on your trigger button as bellow. just try it.

HTML

<li class="nav-item">
 <button type="button" id="addNote" class="waves-effect waves-light btn modal-trigger" href="#addNote">Add Note</button>
</li>

JS

<script type="text/javascript">
    $(function(){
      //the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $(".modal").modal();
    });
</script>

Upvotes: 0

user8477089
user8477089

Reputation: 

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });
<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.7/js/materialize.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 
<div class="row section">
  <div class="col">
    <!-- Modal Trigger -->
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
    <p>You have to include jQuery and Materialize JS + CSS for the modal to work. You can include it from <a href="http://materializecss.com/getting-started.html">CDN (getting started)</a>.
  </div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

Upvotes: 0

user9162623
user9162623

Reputation:

Was able to fix by using the following code

<li class="nav-item">
 <button name="addNoteButton" class="waves-effect waves-light btn" href="#addNote" onclick="$('#addNote').modal('open');">Add Note</button>
</li>

Upvotes: 0

Alex Sirbu
Alex Sirbu

Reputation: 21

This is probably happening because the button and the div have the same id of "addNote". Try changing the id of the button and then the jQuery script.

<button id="addNoteButton" class="waves-effect waves-light btn" 
href="#addNote">Add Note</button>

<script>
 $('#addNoteButton').click(function() {
   $('#addNote').modal('open');
  });
</script>

Upvotes: 2

Related Questions