Develop Reference

Javascript DOM click() does not work to open modal

if the page is loaded with GET parameter status=deleteSuccess (ex. localhost/index.php?status=deleteSuccess) php will insert script containing javascript DOM click() to a hidden button to open a modal. but it does not work.
I'm using bootstrap 4.3.1, I'm new at and set it up using https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
I've checked the javascript on console, it worked. I've checked the html generated by PHP, it successfully inserted the script. I've added console.log("test") on the script, it can run.
<button type="button" id="deleteSuccessBtn" style="display: none;" data-toggle="modal" data-target="#deleteSuccess"></button>
<div class="modal fade" id="deleteSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<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" align="center">
<i class="fa fa-check-circle-o" style="font-size:48px;color:green"></i>
<h5>Data Telah Dihapus</h5>
</div>
</div>
</div>
</div>
<?php
if (isset($_GET['status'])) {
?>
<script type="text/javascript">
document.getElementById("deleteSuccessBtn").click();
</script>
<?php
}
?>
I expect to see a modal on page loaded, but it doesn't open

You can manually show or toggle the modal:
<?php
if (isset($_GET['status'])) {
?>
<script>
// assuming jQuery is available
$('#deleteSuccess').modal('show'); // or 'toggle'
</script>
<?php
}
?>
text/javascript is also the default type for script tags, so you don't need to add that.
See: https://getbootstrap.com/docs/4.0/components/modal/#methods for more information on the Modal events.

how to get the dynamically generated IDs of Modal

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') );
});
});

Passing variable's value to modal box in PHP

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>

How to modal in PHP with delete confirmation

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>

pass a variable to a bootstrap modal

this title seems pretty common, but i can't find a correct answer for my problem from them.
I have a bootstrap template, and what i want to do is to pass some variable to a modal.
I'm using codeigniter and also smarty..
this is the code from my template:
<td><a class="btn mini red-stripe" href="#myModal3" data-id="{$frontuser->id}" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario "{$frontuser->username}"?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
i tried to find a JS file in order to analize it and see if i have to make some moedifications in there, but i didn't find a js that controls this. So, is this meaning that my modal is entirely managed by html?
if that's so..where do i put the variable in order to make the modal show this info?
thx

These look like PHP variables which you have to wrap in <?php [...] ?>.
Try this version
<td>
<a class="btn mini red-stripe" href="#myModal3" data-id=<?php echo $frontuser->id; ?>" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario <?php echo $frontuser->username; ?>?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
If you are using a specific template and wish to stick to the templates syntax, you may do so accordingly. The above snippet should work regardless.
Cheers