I'm trying to add a modal in my system that when you click it a modal will appear and ask you a confirmation if you want to delete that certain data.
But in my present code, when you click the button, it will direct you to a blank page without modal. The id is passing correctly but how can I output the modal?
Here's my code for PHP:
<?php
while(mysqli_stmt_fetch($stmt)) {
echo "<tr>";
echo "<td class=\"col-md-2\" onclick=\"document.location = 'modal_delete.php?id=$id';\"><button type=\"button\" class=\"btn btn-primary btn-md\" data-toggle=\"modal\" data-target=\"#myModal\">Delete</button></td>";
echo '</tr>';
}
?>
Here is the code for the modal (modal_delete.php):
<?php
include '../session.php';
include 'header.php';
?>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="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">Delete</button>
</div>
</div>
</div>
</div>
I hope guys you help me. Thank you
On modal_delete.php you need to trigger the modal using javascript after the DOM is ready.
<script>
$(function () {
$('#myModal').modal('show');
});
</script>
Related
How to show details data(using popup) when I click the view button in table in each rows?
button code
echo '<button href="student.php?id="'.$row['mactrixNo'].'" onclick=document.getElementById("id02").style.display="block">View</button>';
popup code
<div id="id02" class="logform">
<table border="1" class="tg w-100">
<tr>
<?php if(isset($_GET['id'])){
$query='select *
from student
where mactrixNo="'.$_GET['id'].'"';
}
?>
I can't get the 'id' when popup
Bootstrap provides the HTML, CSS, and JavaScript you need to achieve this.
This is from v4 https://getbootstrap.com/docs/4.1/components/modal/
<!-- 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>
So long as you have the CSS and JS in your <head> section, all you need to do is edit the content!
Any idea how I can prevent page from scrolling back to top of page when modal window is closed? I need it to stay in the same positing as page full of text and you end up losing where you were. I had this working but for some strange reason no longer works.
Thanks.
Page calls a PHP request that goes through a while loop and displays sentences that when clicked shows additional info. This is displayed in the modal window.
while ($row = $result->fetch_assoc())
{ ?>
<a href="#" class="nojump" id="mymodal" onclick="showModal(this)"
style="font-size:16px;" title="<? echo $row ['title'] ?>
by
<? echo $row ['author'] ?>" ><? echo $row ['first_line'] ?> </a>
<script>
function showModal(el) {
jQuery("#myModalLabel").text(el.title);
jQuery("#myModal").modal()
}
</script>
<script>
jQuery('a.nojump').click(function(e)
{
// Cancel the default action
e.preventDefault();
});
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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>
</div>
<div class="modal-body">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Updated:
I update the JSBin here is this what you want?
HTML:
click me
Javascript:
jQuery('a.nojump').click(function(e) {
e.preventDefault();
console.log('do something here')
});
So I'm fairly new to jquery and I'm trying to get the dynamically generated ID's of my modals. So this is what my code looks like:
<?php
$sql = "SELECT * FROM currentstatus";
$res = mysql_query($sql);
while($r = mysql_fetch_assoc($res)) {
echo '<div class="modal fade" id="'.$r['rackName'].'" role="dialog">
<div class="modal-dialog modal-lg" 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="myModalLabel">'.$r['rackName'].'</h4>
</div>
<div class="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">Print</button>
</div>
</div>
</div>
</div>';
}
?>
.$['rackName'] is my dynamic ID
I call this modal, using the following code:
'.$r['rackName'].'
You can capture the show event and get the ID like so:
$(function(){
$('.modal').on('show.bs.modal', function () {
console.log( $(this).prop('id') );
});
});
I want to pass a variable value to a modal box I call on the same page but have not been able to do it.
Code to open modal box is as below
<li style="font-style:bold" title="rate on skill" class="skill_rating">
<a data-toggle="modal" title="Add this item" class="open-AddBookDialog" href="#addBookDialog" data-id='<?php echo $skill_id2[$q]?>'>
<i class="fa fa-anchor" aria-hidden="true"></i> </a><?php echo $skilltemp2[$q2] ?></li>
Modal Box code as below
<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="addBookDialog"><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="myModalLabel">Search</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"><span>Search</span></button>
</div>
</div>
</div>
Javascript before the closing body tag is as below
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
</script>
I saw a couple of answers at stackoverflow (like:Passing data to a bootstrap modal )but I have not been able to customize it as per my requirement.
Pardon me if its is too simple. I am a noob
This is working in my case. Yes it is not in PHP but i have put static value for Data-Id.
$('body').on('click', '.open-AddBookDialog', function() {
var myBookId = $(this).data('id');
$("#addBookDialog #bookId").val( myBookId );
});
Example JSFIDDLE
Javascript variables and modal box's value of bookId need to be re-defined. A possible use case as below.
Body Code
Modal Box
<div class="modal fade" id="takeaction" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Display Apply Id in modal box in a dynamic way? </h4>
</div>
<div class="form-inline container hidden-xs hidden-sm">
<input type="number" value="<?php echo $apply?>" class="form-group" placeholder="Job Code">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span>Confirm</span></button>
</div>
</div>
</div>
</div>
Javascript Code
<script type="text/javascript">
$('#takeaction').on('show.bs.modal', function(e) {
var apply = $(e.relatedTarget).data('apply');
$(e.currentTarget).find('input[name="apply"]').val(apply);
});
</script>
I am trying to do something which i think many people have done; and have read some examples etc; and have tried to piece together what i need but not having any luck. What I am trying to do is have a button pass a variable to a bootstrap modal. And then somehow echo or print the variable within the modal so i know it is working. I built some code from examples I found
here is my button:
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
I was not sure if i could echo the image id for the variable to be passed but have done a lot of stuff like that before so seems like it would be ok (this could be an issue though)
Secondly - here is my modal:
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<script>
$('#upload-images-modal').on('show.bs.modal', function(e) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
A couple of notes on this. I was really uncertain where the script should be "placed" in relation to the modal. So I just placed in the modal body.
I tried to do an alert to see the variable that was passed. Nothing is happening though. So I am hoping someone can give me some pointers on what I am doing wrong.
Thanks so much,
Gerard
Your issue could be down to using a early version of bootstrap where relatedTarget is not passed.
As in regards to your js, put it in the bottom of the body or in a separate js file reference from the bottom of the body and after any libraries, ie jquery and bootstrap.
Here is your code working with the latest bootstap version
$('#upload-images-modal').on('show.bs.modal', function(e, f, g) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="test">Upload Images
</button>
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>