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?
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>
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>
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>
$(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 CDN (getting started).
</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">
Agree
</div>
</div>
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>
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!
Related
In Chrome version 72.0.3626.96, I have a simple example where I set up an anchor <a> (styled as a button using bootstrap) and I also setup an <input type="file">. I hide the <input type="file"> using CSS and then use some JavaScript to trigger the file selection dialog when the anchor is clicked.
For example:
$('#upload-button').on('click', function(e) {
if (confirm('Are you sure?')) {
$('#upload-file').trigger('click');
}
});
#upload-file {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<a id="upload-button" class="btn btn-primary">
<span>Upload Something!</span>
</a>
<input type="file" id="upload-file">
</div>
</div>
</div>
The way it should work is that the user clicks on the <a> button, this launches a confirmation dialog, then, the user clicks "OK" and this opens the file selection dialog.
This works in Firefox and in earlier versions of Chrome, and oddly enough it even works in Chrome version 72.0.3626.96, as long as you click the "OK" button in the confirm message fast enough after it opens.
The bug is that if you wait 2-4 seconds after the confirm message opens and then click "OK" it will not open the file selection dialog.
Any ideas about how to make this work? Does it look like this is a legitimate bug in this release of Chrome that should be submitted?
UPDATE: I have come to the conclusion this is probably somehow related to security updates for User Activation (although I am not sure specifically why)... however it seems easier and cleaner in the long run anyway to just replace the old school confirm() with a more modern modal approach. Clicking an actual button within a bootstrap modal seems to always work correctly.
New Example Here:
$('#upload-button').on('click', function() {
$('#upload-confirm-modal').modal();
});
$('#upload-confirm-button').on('click', function() {
$('#upload-file').trigger('click');
$('#upload-confirm-modal').modal('hide');
});
#upload-file {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<a id="upload-button" class="btn btn-primary">
<span>Upload Something!</span>
</a>
<input type="file" id="upload-file">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="upload-confirm-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h4>Are you sure?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="upload-confirm-button">Yes</button>
</div>
</div>
</div>
</div>
The Chrome team has resolved this issue as By Design with the note that this was an intentional change made to prevent a user-activation flag from remaining set for too long. crbug.com/936505
I've asked them to consider adding a console warning for this scenario to aid future debuggers.
On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
I dont understand why modal is not working:
<a class="modal-trigger" href="#modal1"><i class="material-icons icn_profile waves-effect">person</i>
</a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
I try many solution like put the modal div outside the header section, and vary jquery script like:
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
and more..
I can not be able to reach the solution here on stack overflow. I have also loaded jquery library before materialize.js at the end of the body section. The js console doesn't show any error.
thanks
There could be an error with the sequence of the scripts that you are bringing to your HTML.
NOTE: Since I don't know the relative paths of your css and js files, I gave them myself. Make sure to give them the correct path. Make sure that they are loaded on correctly to your DOM.
See if the following works for you.
<html>
<head>
<link rel="stylesheet" href="css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<a class="modal-trigger" href="#modal1"><i class="material-icons icn_profile waves-effect">person</i></a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script src="materialize.min.js"></script>
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
Please follow the order. Jquery must come before materialize.js . Otherwise your code seems to work fine.
If the error persists, please tell me.
Also, I would like to add that the following piece of code:
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
will open the modal as soon as the page opens. Do you really want that behavior? The code I posted above works fine; when you click on the person icon the modal opens. That's the intended behavior desired usually. But otherwise also, if you want the modal to open as soon as the page loads, that will work fine as well.
Hope this helps. Thanks.
I kept trying until I got it. I don't know if this is what you want, but it works for me:
I have this in the header
declare let $: any;
after
openit(){
$('#modal1').modal('open');
}
and in my html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" data-target="modal1" (click)="openit()">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal"materialize="modal" >
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
Try adding this in your .js file:
//Modal trigger
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
I was looking through the docs of materializecss. But the modal seems not working. I just used the code that was in the docs http://materializecss.com/modals.html
Html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- 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">
Agree
</div>
</div>
JS
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
I had put a pen as well
Codepen link
According to the docs - initialising .modal() allows on-click to function properly on the anchor.
$('#modal1').modal()
you'll get the modal to show onclick - (trying to debug for on ready)
--- update ---
on Codepen, there's a weird delay:
I got it work in $(document).ready by using
$('#modal1').modal().modal('open');
(It's not an elegant solution, but it seems to work);
CODEPEN
use .show() for displaying elements with jQuery.
$(document).ready(function(){
$('#modal1').show();
});
OR on click
<a class="waves-effect waves-light btn">Modal</a>
$('.btn').on('click', function(){
$('.modal').show();
});
I created a button that references a modal but it doesn't open the modal at all. This area of code isn't my realm, SQL is. This code actually lives in an SQL procedure that is called when interacting with a website.
Thoughts?
--Remove package item, Modal Popup
<div id="delete_btn_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class=modal-body>
<h3><font color="red" align="center">Are you sure?</h3></font></br>
<p>Deleting a package item will remove the entire package</br></br>
<button type="button" class="btnStyle" data-dismiss="modal">Close</button>
<button type="button" class="btnStyle" onclick=location.href="http://wowfestival.lajollaplayhouse.org/cart/precart.aspx?p=499">Delete Package</button>
</p>
</div>
</div>
</div>
--button
<button type="button" class="btnStyle" data-toggle="modal" data-target="#delete_btn_modal">Delete</button>
Seems you have not added bootstrap javascript
Your code is perfect and fine
Check the bootply for your code. : http://www.bootply.com/zOa8UJ4Vfb
Also check you you have jQuery included as well .
If not use below cdn for quick test.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>