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