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') );
});
});
Related
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')
});
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'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>
The requirement-My applicaiton has a button which when clicked a modal is supposed to pop-up where there will contain some data.
Architecture-I want the modal data to be contributed from some another application(some url),through a php file.How can this be done?
What I have tried-In the php file i have placed
<?php echo ' <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">...</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>
In the html I am using this
<div id="prerequisites-container" class="container-fluid">
<a href="http://localhost/Experiment/main/prereq.php"
data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal </a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
</div>
Place your HTML code, as follows:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
inside your Echo.
<?php echo ' HERE <div class="modal-dialog">
UPDATED:
<div id="prerequisites-container" class="container-fluid">
Launch Modal
</div>
<?php echo '<div class="modal fade" id="trymodalbootstrap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<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">...</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>'; ?>
place the modal html in your html, and fetch modal content data dynamically through ajax call from server. and add that data to modal before displaying
while($row = mysqli_fetch_array($result_from_query)){
<a class="modal-trigger" href="#basicModal" data-toggle="modal" data-target="#basicModal" data-id="<?php echo $row['invoice_no']; ?>"><?php echo $row['invoice_no']; ?>
</a>
}
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Invoice Item</h4>
</div>
<div class="modal-body">
<input type="text" name="invoice" id="invoice" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".modal-trigger", function () {
var invoiceNO = $(this).data('id');
$(".modal-body #invoice").val( invoiceNO );
});
</script>
so i have this code that send data to modal and put it in a <input name="invoice" />
now my question is i want to put it in a php variable to use it in a query inside the #basicModal div.
something like this
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Invoice Item</h4>
</div>
<div class="modal-body">
<?php
$result = mysqli_query($conn, 'SELECT item from invoice_tab where invoice no = ' $invoice_no);
$data = mysqli_fetch_assoc($result);
echo $data['item'];
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
but i have no idea on how to put the data in a php variable...can u pls guys help me in this...tnx
Why don't you use your:
$row['invoice_no'];
in your first example to fill the SQL query in the modal?