Im still learning PHP and Javascript. I display my cart item using modal but I don't have any idea how to disable the modal button if the displayed cart item is empty.
<div class="modal fade bd-example-modal-lg" id="cartmodal" tabindex="-1" data-target=".bd-example-modal-lg" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Lihat Bahan Arkib</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-secondary" id="cart_table" style="width: 100%;">
<thead class="">
<tr class="">
<th>No.Rujukan & No.Penerimaan</th>
<th>Tajuk</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody id='cartBody'>
<?php if (isset($_SESSION['cart'])) {
foreach($_SESSION['cart'] as $k => $v){ ?>
<tr id="view-cart">
<td><?php echo $v['id_arkib'] ?> </td>
<td><?php echo $v['tajuk']?> </td>
<td><button class="btn btn-danger mdi mdi-delete deleteitem" required>Padam</button></td>
</tr>
<?php }
}?>
</tbody>
</table>
</div>
<div class="modal-footer">
<a type="submit" class="btn btn-primary" id="btn-mohon-cart" name="mohonbtn" href="<?php echo ROOT_PATH; ?>pusat_sumber/penyelidik/permohonan_penyelidik.php">Mohon</a>
</div>
</div>
</div>
</div>
in javascript:
<button type="button" class="close" data-dismiss="modal" aria-label="Close" disabled={cart.length > 0 ? false : true}>
Related
I have a jquery modal button, where I want to display information from my database.
I have a field in the database where I want everything to be identified by it is called "number"
The modal button is displayed in a table which is already being looped from a SQL query displaying all entries
while ($row = getarray($res)){
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?
$row["number"])">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)>Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '$number' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
Ideally, the information should be changed based on the different items that are being clicked. but it is staying the same.
Please try to use following code , there are so many typo mistakes you have in your code.
<?php while ($row = getarray($res)){ ?>
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?=
$row["number"]) ?>">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)">Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '".$number."' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
So I checked a lot of topics about this title but couldn't find a good answer to it.
So basically I have this table:
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered tablesorter">
<thead>
<tr>
<th>Email <i class="fa fa-sort"></i></th>
<th>Akcje <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<?php
$subs = $conn->prepare("SELECT * FROM sub_permission WHERE id_bota=:id");
$subs->bindParam(":id",$ID);
$subs->execute();
?>
<form method="post">
<?php foreach($subs as $sub){ ?>
<tr>
<td>
<?php echo $sub['adminEmail']; ?>
</td>
<td>
<input type="hidden" name="id">
<button type="button" value="<?php echo $sub["adminEmail"]; ?>" class='btn btn-danger btn-xs' data-toggle="modal" data-target="#modal_DELETE" data-id="<?php echo $sub["adminEmail"]; ?>"> <span class="fa fa-times"> </span> </button><a> </a>
<button type="button" class='btn btn-warning btn-xs' data-toggle="modal" data-target="#myModalE"><span class="fa fa-edit"></span></button>
</td>
</tr>
<?php } ?>
</form>
</tbody>
</table>
</div>
</div>
So this is basically the table with users that have sub-admins and there's 1 action "Delete".
When someone clicks button delete, this modal will show:
<div class="modal fade" id="modal_DELETE" tabindex="-1" role="dialog" aria-labelledby="modal_nameDELETE">
<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="modal_nameDELETE">Sure?</h4>
</div>
<div class="modal-body">
Are you sure you want to remove sub-admin <label><?php echo $sub['adminEmail'];?></label> ?
<br>
</div>
<form method="post">
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary" name="delete">Yes</button>
</div>
</form>
</div>
</div>
</div>
The problem is when there's for example 3 people in the table and I click the delete button for user 3, the modal pops-up but the email is wrong.
Here is my screenshot of this modal, its showing but hiden
Could you please check the below line.where it append exactly(inside your modal content or outside).
actually it should be in outside of your modal content
<div class="modal-backdrop fade in"></div>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Manage All Category</h2>
<div class="box-icon">
<i class="halflings-icon wrench"></i>
<i class="halflings-icon chevron-up"></i>
<i class="halflings-icon remove"></i>
</div>
</div>
<div class="box-content">
<div id="flash" style="display: none;">
<img style="margin: 15% 0 0 50%; position: absolute;" src="<?php echo base_url(); ?>admin/img/ajaxloader.gif"/>
</div>
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if (isset($links)) {
foreach ($all_category as $category) { ?>
<tr>
<td><?php echo $category->category_id; ?></td>
<td class="center"><?php echo $category->category_name; ?></td>
<?php if ($category->status == 1) { ?>
<td class="center">
<a id="btnpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-important">Unpublish</a>
</td>
<?php } else { ?>
<td class="center">
<a id="btnunpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-success">Publish</a>
</td>
<?php } ?>
<td class="center">
<a class="btn btn-small btn-inverse" href="#" data-toggle="modal" data-target="#myModal<?php echo $category->category_id; ?>">View</a>
<a class="btn btn-small btn-info" href="#">Edit</a>
<a id="deleteCat" class="btn btn-small btn-danger" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);">Delete</a>
<!--Start View Modal-->
<div class="modal fade" id="myModal<?php echo $category->category_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $category->category_id; ?>">
<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<?php echo $category->category_id; ?>">Category View</h4>
</div>
<div class="modal-body">
<p><b>Category ID:</b> <?php echo $category->category_id; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End View Modal-->
</td>
</tr>
<?php }
} ?>
</tbody>
</table>
<div class="pagination pagination-centered">
<?php echo $links; ?>
</div>
</div>
</div><!--/span-->
</div>
Which version of Bootstrap are you using?
There was a ticket for that on GH in an earlier version of Bootstrap.
https://github.com/twbs/bootstrap/issues/16148
Every thing is good just one thing...put modal div outside to the td of the table, keep it inside body but out side to the table.
Modal is not displaying because you are repeating modal with same id of the modal in for each loop(like buttons are repeating).
I have answered this the way you can achieve it at link below.
dynamically created bootstrap3 modals do not work
On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code:
The html table:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
The fam_id is the primary key.
Then, below is the code for modal popup window
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Moreover, Im doing them in one file. In conclusion, it is like below:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter; $counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td>
<center>
<a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
<button class="btn btn-primary btn-sm">
Edit Attendance Status
</button>
</a>
</center>
Place this code in footer.php or end of this page.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.
<script>
$('.modalLink').click(function(){
var famID=$(this).attr('data-id');
var famAddr=$(this).attr('data-addr');
var famPhone=$(this).attr('data-phone');
var famName=$(this).attr('data-name');
$.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
somepage.php
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
<form id="form1" method="post">
<b>Details</b>
<hr></hr>
Address: <p><?php echo $famAddr;?></p>
Phone_num: <p><?php echo $famPhone;?></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
When I click edit, 'id' should pass to own page and modal should pop up. But it doesn't work. Please help me
PHP and Bootstrap
<tr>
<td><?php echo $row['name']; ?></td>
<td><a data-toggle="modal" data-target="#myModal" href='?id=<?php echo $row['id']; ?>'>Edit</a> </td>
</tr>
Modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
------
-----
-----
</div>
</div>
Create a class Edit in <a></a> tag. Use this class to call modal. And, add data-Id="<?echo $row['id'];?>"
<tr>
<td><?php echo $row['name']; ?></td>
<td>
<a class='Edit' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['id'];?>">Edit</a>
</td>
</tr>
Place this code in footer
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
JS
<script>
$('.Edit').click(function(){
var Id=$(this).attr('data-Id');
$.ajax({url:"SomePage.php?Id="+Id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
SomePage.php
<?php
$Id=$_GET['Id'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id"></h4>
</div>
<div class="modal-body">
<?php echo $Id;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click Show data based of selected id on modal popup