Guys I am stack for two days, I have two bootstrap models the first one is showing with outside button called submit, the other which the button is inside the table is not showing. Probably the problem could be the inclusion js library I am not sure and I don't have a lot of experience with that so i need your help below is my code! thanks in advance.
[![<div class="modal fade" id="editmodel" tabindex="-1" role="dialog" aria-labelledby="editmodell" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cdsViewformLabel">Informaçao do assunto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group col-lg-12">
<label for="exampleFormControlInput1">ID</label>
<input type="email" class="form-control" id="idedit" placeholder="name#example.com">
</div>
<!-- removed some code to show the textfields just to save space-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
below my table data and button
?>
<tbody class="ttdody">
<tr>
<td><?php echo $row\['ID'\];?></td>
<td><?php echo $row\['valor'\];?></td>
<td>
<button class="btn btn-success btn-xs-view"><i class="fa fa-check"></i></button>
<button class="btn btn-primary btn-xs-edit"><i class="fa fa-pencil"></i></button>
<button class="btn btn-danger btn-xs-delete"><i class="fa fa-trash-o "></i></button>
</td>
</tr>
</tbody>
<?php
below is my js to display the modal
<script>
$(document).ready(function () {
$('.btn-xs-edit').on('click', function () {
$('#editmodel').modal('show');
});
});
</script>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/jquery-ui-1.9.2.custom.min.js"></script>
<script src="lib/jquery.ui.touch-punch.min.js"></script>
<script class="include" type="text/javascript" src="lib/jquery.dcjqaccordion.2.7.js"></script>
<script src="lib/jquery.scrollTo.min.js"></script>
<script src="lib/jquery.nicescroll.js" type="text/javascript"></script>
<!--common script for all pages-->
<script src="lib/common-scripts.js"></script>][1]][1]
Related
I have a modal in my html file that I want to trigger with a button.
My button is inside a table. This is the code of my button:
<button type="button" class="btn btn-outline-primary"
data-toggle="modal" data-target="#squarespaceModal" >
<!-- [routerLink]="['/function', bfunc.AName]" -->
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
And this is my modal-code in the same html-file:
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
When I hit the button nothing happens.
I checked the console but there are no errors
Can anyone help me please?
EDIT:
I have imported these scripts in my index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You need to import the bootstrap css https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
As was mentioned you need to ensure that all resources (js, css, jquery) are imported in order to get the modal to work. Here's a simple html file with the modal code and all resources in the head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body"> ... </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
I can not get my modal to open. I tried just the plain HTML found on the Bootstrap 4 site and then used some Javascript. I really can not figure out what I am doing wrong. Any help would be very much appreciated!
enter code here<
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
`enter code here`<script type="text/javascript">
enter code here $("#box1modal").click(function(event){
enter code here$('#myModal').modal('show');
enter code here )};
If You are using bootstrap no need of extra scripting.bootstrap itself provides its scripts to run different animations and actions. I checked your code.
The error lies in line
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See you've set data target as #exampleModal while id of your modal is "myModal". Just change above code to
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#myModal">
And it will work fine without any other script.
Hope this Helps...
You have given the data target as examplemodal and the id of div as mymodal. Both should have been the same, thats the issue.
i test your code , every things fine just you have to make sure
1) add references
2) your code must be inside $(document).ready(function(){ ---- }
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</hmtl>
<script>
$(document).ready(function(){
$('#box1modal').click(function(){
alert("btn click")
$('#myModal').modal('show')
});
});
</script>
I am using this Javascript
Varying modal content based on trigger button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});
If I click on Send Message, nothing happens.
How do I enable Submit?
Change line of button for
<button id="buttonSend" type="button" class="btn btn-primary">Send message</button>
Change tag form Line
<form id="frm">
Define event for button
$(document).on("click", "#buttonSend", function (event) {
// Your ID Form
$("#frm").submit();
});
Just try to put your <form> after the <div class="modal-content"> having all the form elements, including buttons, inside it like this:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</form>
</div>
</div>
</div>
Working in Chrome Version 95.0.4638.54 (Official Build) (64-bit).
Using Bootstrap's default starter html template and Bootstrap varying modal data example. Functions as intended as of 11/3/2021.
All dependencies for Jquery, Popper, and Bootstrap JS are retrieved through jsdelivr.
Sources:
Bootstrap 4 Modal Documentation
https://getbootstrap.com/docs/4.0/components/modal/
Bootstrap 4 Starter HTML Template
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Tip for bootstrap developers: Ensure you look at the link to bootstrap documentation to see which version you are reviewing before adopting code changes.
(docs/4.0 vs docs/5.0, etc.)
Source Code Full:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 4.2.1 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<!--JQuery 3.6.0-->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap 4.2.1 Bundle with Popper 2.9.2 -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script>
$(function(){
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});
});
</script>
</body>
</html>
In this scenario I would like to preserve bandwidth by when a modal opens then it loads the import_audit_table into a Div in the Modal. Is this possible?
<script>
$(document).ready(function(){
$('#import_audit_div1').click(function(){
$('#import_audit_table').load("edit_audits.php?action=import");
});
});
</script>
<input type="button" class="btn btn-default" value="Modal Opener" id="import_audit_div1" data-toggle='modal' data-target='#import_audit_div'/>
<div class="modal" id="import_audit_div" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<h3>
<div id="import_audit_table">
</div></h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
I have 2 bootstrap models on the same page, the first modal opens and runs as expected. After saving the form data in the first modal, a button is visible to open up the second modal. The button however is not clickable:
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
I've found a few that have had similar problems with two modals on the same page but there appears to be no common causes. How can I fix this? Preferably I would like the button to work. Iif for whatever reason it's not possible, I'm ok with JS automatically opening the second modal after the 1st one closes. I have also been unsuccessful with getting that to work. I've triple checked that all my tags are closed and correctly spaced. I've omitted a lot of the form content within the modals in the code below for purposes of brevity. I've also included my JS at the end of the page that directs the visibility of the modals.
<div class="add_left">
<div id="crop-avatar" class="container">
<div class="bigpicture"> <img src="" > </div>
<div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
<!-- modal 1 -->
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
<div class="modal-header"> </div>
<div class="modal-body">
<div class="avatar-body">
<div class="row"> </div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
</div>
</form>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
</div>
</div>
</div>
<div class="add_right">
<h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<!-- modal 2 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<h2>Listing Designation</h2>
<fieldset style="padding-left:5px;">
<legend> Designation </legend>
</fieldset>
</div>
<div class="modal-footer">
<input class="avatar-src" name="avatar_src" type="hidden">
<input type="hidden" name="id" value="">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$("#avatarInput").on("change", function() {
$("#nxtbutt").prop('disabled', !$(this).val());
});
$(document).ready(function(){
$(".add_right").hide();
$(".add_display").hide();
$(".bigpicture").hide();
$(".instructiondata").hide();
});
$( "#nxtbutt" ).click(function () {
$(".add_right").show();
$(".bigpicture").show();
$(".add_display").hide();
$(".avatar-view").hide();
$(".instruction").hide();
$(".instructiondata").show();
});
$( "#nxtbutttwo" ).click(function () {
$(".add_right").show();
$(".add_display").show();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Thank you in advance!
Don't use show() and hide() here.
You can close and open using the modal method:
$("#secondModalButton").click(function() {
$("#firstModal").modal('hide');
$("#secondModal").modal('show');
});
Or (I just noticed) you can do it purely with bootstrap attributes:
<button type="button" class="btn btn-primary" id="secondModalButton"
data-dismiss="modal"
data-toggle="modal"
data-target="#secondModal">Second modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
Launch first modal
</button>
<!-- First Modal -->
<div class="modal fade" id="firstModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
First Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
</div>
</div>
</div>
</div>
<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Second modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>