A newbie would like to ask for a little help.
I want to do something with the content of the modal when it is open, But how can I get id from the opened modal?
My code:
<a class="pdfId btn btn-success" data-id="{{ $value['id'] }}" data-toggle="modal" data-target="#myModal">view</a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">view</h4>
</div>
<div class="modal-body">order number: {{ $value['id'] }}</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS/Jquery:
$('a').click(function(){
$(this).attr('data-id') ;
});
Please help me with this situation. Appreciate all of your help!
Using jquery you can use the $().on('click', function() { function
Example:
$('[data-target="#modal-one"').on('click', function() {
alert('data-id: ' + $('#modal-one').attr('data-id'));
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-one">Modal One</button>
<!-- Modal -->
<div id="modal-one" data-id="100" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">data-id attribute: 100</div>
</div>
</div>
</div>
Here is more simple and dynamic approach which will help not to repeat or write code again and again
You can simply use relatedTarget function to see which button you clicked on the then from their just get the data-id of that clicked button.
Also, in your modal show function you can use $(this) and get the orderID element apply the order id to your modal dynamically and show the order-id in your modal
Using this approach will let you have as many button you want but you will reusing the same modal again without having to write more code.
Live Working Demo:
$('#myModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var getID = button.data('id')
var getAdd = button.data('adress')
var getCity = button.data('city')
var getPostCode = button.data('postcode')
var modal = $(this)
modal.find('#orderID').text('Order ID = ' + getID)
modal.find('#Address').text('Address = ' + getAdd + ' , ' + getCity + ' , ' + getPostCode)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<a class="pdfId btn btn-success" data-id="1" data-adress="123 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View</a>
<a class="pdfId btn btn-success" data-id="2" data-adress="100 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View 2</a>
<a class="pdfId btn btn-success" data-id="3" data-adress="150 example street" data-city="Earth" data-postcode="46000" data-toggle="modal" data-target="#myModal">View 3</a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">View</h4>
</div>
<div class="modal-body">
<span id="orderID"></span>
<br>
<span id="Address"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I want to display modal on button click. I've followed bootstrap documentation, but for some reason the modal isn't popping up.Here is my code:
Modal:
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal"> View Details</button>
Jquery:
$(document).ready(function(){
$('button.btn-view-details').on('click', function () {
$('#commonModal').modal('show');
})
})
On your button, you can add data-target attribute and you don't need to trigger the popup via jQuery:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal" data-target="#commonModal"> View Details</button>
You need to add just bootstrap cdns
$(document).ready(function() {
$('button.btn-view-details').on('click', function() {
$('#commonModal').modal('show');
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details" data-toggle="modal"> View Details</button>
I'm using squarespaceModal from this site
I would like to know if is it possible to pass the id to the code of the modal ?
This is the button who's calling the modal :
<div class="center">
<button id="<?php echo $i; ?>" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">
update
</button>
</div>
This is the first line of the modal :
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
That is just a standard Bootstrap Modal I dont see anything special about it. Therefore you have all the events you would like from the modal.
So you "could" write an event to trap everytime a modal is opened.
$(function() {
$('#myModal').on('shown.bs.modal', function() {
alert($(this).attr('id'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<button id="myButton" data-target="#myModal" data-toggle="modal" class="btn btn-primary">Open</button>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
<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="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is my modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
On your button click set the require value into your input fields of modal and then show modal using below code.
$(".update_pro").click(function () {
$('#txtYourTexbBoxWithinModal').val($(this).data('id')); // or something eslse.
$('#squarespaceModal').modal('show');
});
If come across issue of displaying modal then remove
data-target="#squarespaceModal"
Cheeerssss
Here you go with a solution https://jsfiddle.net/32jsq6aL/
$('button[data-toggle="modal"]').click(function(){
$($(this).data('target')).attr('btn-id', $(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<button id="test 1" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">update</button>
</div>
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
</div>
OnClick on the button, get the data-target and attach an attribute btn-id as button id to the targeted modal.
Hope this will help you.
I am a beginner in programming i'm stuck with a problem..my modal is not working the modal is displaying in the page not in the popup..I desperately need the solution..it would be great if someone can help me get out of this problem.Here is my code snippet..
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>`enter code here`
<h4 class="modal-title">M Saifur Rahman,PMP</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And I am putting the links and scripts here..
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Change the position of the jquery importing in your html page,that is import jquery first then the bootstrap js because Bootstrapjs require jquery to run.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">M Saifur Rahman,PMP</h4>
</div>
<div class="modal-body">
<p>Here goes the body content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Just place the https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js before https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js. you You should load jquery first because bootstrap use jquery features.
Saif,
U have to define java script for opening the modal. For ex: if u want to open modal on button click then u will define commands to open on button
$('#online_exam').click(function(){
$("#myModal").modal('show');
})
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>
myModal displays an image. After I close, it doesn't clear the data from previous modal. Here is what i have done so far.
<a href="#myModal" class="btn btn-default" data-toggle="modal" data-remote-image="resources/uploads/<?= $s->photo_url; ?>">
<i class="fa fa-image"></i>
</a>
Modal body :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Slide</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Javascript :
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (e) {
$('<img class="img-responsive" src="'+ e.relatedTarget.dataset.remoteImage+ '">').load(function() {
$(this).appendTo($('#myModal .modal-body'));
});
});
$('#myModal').on('hidden.bs.modal', function (e){
$(this).removeData();
});
</script>
Try:
$(this).removeData('bs.modal');
Without seeing more of the surrounding code it is hard to tell. But you could just empty the modal:
$('#myModal .modal-body').empty()