I have a laravel datatable the following:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css"/>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap.min.css"/>
</head>
This is the table:
<td><button
type="button"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#favoritesModal">
Add to Favorites
</button></td>
and here I have created the modal:
<div class="modal fade" id="favoritesModal"
tabindex="-1" role="dialog"
aria-labelledby="favoritesModalLabel">
<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="favoritesModalLabel">The Sun Also Rises</h4>
</div>
<div class="modal-body">
<p>
Please confirm you would like to add
<b><span id="fav-title">The Sun Also Rises</span></b>
to your favorites list.
</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close</button>
<span class="pull-right">
<button type="button" class="btn btn-primary">
Add to Favorites
</button>
</span>
</div>
</div>
</div>
</div>
Can anyone please help me how do I implement this modal in a datatable row?
Basically I want everytime the user clicks a button show Image to open a modal with the image inside
Thanks in advance
Probably easiest if you add a unique class (say... 'imageButton') as well as a data-image-id to the button to identify which image you want. If you want individual title, you may wish to add a data-img-title on the same button.
So - sort of like this:
<td><button
type="button"
class="btn btn-primary btn-lg imageButton"
data-toggle="modal"
data-img-title ="{{$looped->title}}"
data-img-id = "{{$looped->id}}"
data-target="#favoritesModal">
Add to Favorites
</button></td>
Then, some jquery AJAX to get the image data from your controller and then place that HTML inside the modal. Something like this:
$('.imageButton').on('click', function () {
var imgTitle = $(this).data('img-title');
var imgId = $(this).data('img-id');
$.ajax({
url: "{{url('url_for_your_image_returning_controller_method)}}" + "/" + imgId,
type: "GET",
success: function (h) {
$(".modal-title").text(imgTitle);
$(".modal-body").html(h);
$('#modal').modal();
},
error: function () {
swal("Error", "Unable to bring up the creation dialog.", "error");
}
})
});
Depending on what you are sending through that would work. You can also chose to create an image tag, and send through the new src instead of photo data something like this if you want to show thumbnails as well:
<img id="modalImage" src="{{url('images')."/".(isset($image->thumb)?$image->thumb:$image->image)}}"
class="picToModal">
Then replace the src within the $("#modalImage") element with your new source and trigger. There are lots of options and branches, and you'll need to re-work to suit, but this should get you started.
Related
please help, i have a bootstrap template with this footer , i trying to add a modal but when i click the modal button,the modal doesnt show up , is there any plugin that have not been added in my template ?
<script src="<?= base_url('template/assets/vendor/bootstrap/js/bootstrap.bundle.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/aos/aos.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/php-email-form/validate.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/swiper/swiper-bundle.min.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/purecounter/purecounter.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/isotope-layout/isotope.pkgd.min')?>"></script>
<script src="<?= base_url('template/assets/vendor/glightbox/js/glightbox.min.js')?>"></script>
<!-- Template Main JS File -->
<script src="<?= base_url('template/assets/js/main.js')?>"></script>
and this the modal button
<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>
Thank you
Make sure your code contains bootstrap CSS and Bootstrap Js.
Like,
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
If you are using Bootstrap5 than change data-toggle to data-bs-toggle and data-target to data-bs-target.
I am having difficulties getting this part of my html/php page working, everything else works fine except the modal.
I am using Bootstrap 4.3.1 in the template I am using, i have followed a lot of other post's on SOF but none seem to work. The following code is where it gets called from
<a data-toggle="modal" href="vehicles.php#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
and the modal section;
<? if ($_SESSION['admin_level']>=3) { ?>
<div class="modal fade" id="vehicle_delete_<? echo $row->id;?>" 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" aria-hidden="true">×</button>
<h4 class="modal-title"><span class="fa fa-pencil"></span> Delete <? echo $row->classname;?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<form method="post" action="vehicles.php#vehicles_delete_<? echo $row->id;?>" role="form">
<input type="hidden" name="type" value="delete" />
<input type="hidden" name="id" value="<? echo $row->id;?>" />
<p>Do you really want to delete the Vehicle "<? echo $row->classname;?>" from the User <? echo $row->name;?>?</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-light" data-dismiss="modal" type="reset">Cancel</button>
<button class="btn btn-light" type="submit">Delete Vehicle</button>
</form>
</div>
</div>
</div>
</div>
<? } ?>
I have the same exact code on an version v3.3.5 of Bootstrap and it works quiet fine, but since upgrading to the version I am currently using in this template, it no longer works.
The following is the footer
<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- simplebar js -->
<script src="assets/plugins/simplebar/js/simplebar.js"></script>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- loader scripts -->
<script src="assets/js/jquery.loading-indicator.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
<!-- Chart js -->
<script src="assets/plugins/Chart.js/Chart.min.js"></script>
<!-- Index js -->
<script src="assets/js/index.js"></script>
The following is the header
<!-- loader-->
<link href="assets/css/pace.min.css" rel="stylesheet"/>
<script src="assets/js/pace.min.js"></script>
<!--favicon-->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Vector CSS -->
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet"/>
<!-- simplebar CSS-->
<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
<!-- Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<!-- animate CSS-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
<!-- Icons CSS-->
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<!-- Sidebar CSS-->
<link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
<!-- Custom Style-->
<link href="assets/css/app-style.css" rel="stylesheet"/>
Regards.
You shoud add data-target instead of href
from this to
<a data-toggle="modal" href="vehicles.php#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
This
<a data-toggle="modal" href="" class="btn btn-light" data-target="#vehicle_delete_<? echo $row->id;?>"><span class="fa fa-trash"></span></a>
Then after you have to pass the URL to Delete vehicle button
Can you try to add data-target on the buttons?
<a data-toggle="modal" data-target="#vehicle_delete_<? echo $row->id;?>" class="btn btn-light"><span class="fa fa-trash"></span></a>
Could be Bootstrap 3 prevents the default behavior on the href, but Bootstrap 4 doesn't.
i have a modal which opens when the Edit button is clicked now i want that the value of data-href in with which the modal opens on clicking to echo inside of modal body how can i do that
Edit
You can use event.relatedTarget function have more dynamic approach to get the data-attributes.
You do not need to use an inline onclick function here this can be done easily using the native jQuery bootstrap function like show.bs.modal and get the a data attributes on click and to be displayed in the modal.
$("#editModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var getHref = button.data('href') //get button href
$('#href').text(getHref) //show in the modal
})
Live Working Demo:
$("#editModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var getHref = button.data('href') //get button href
console.log(getHref) //{{ url('admin/product_edit/'.$cat->id) }}
$('#href').text(getHref) //show in the modal
})
<!-- 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>
Edit
<!-- Modal -->
<div class="modal fade" id="editModal" 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">
<span id="href"></span>
</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>
You can do it like
<a href="javascript:void(0);" data-href="/sample/url" class="edit_product btn btn-sm btn-primary" data-toggle="modal" data-target="#editModal" onclick='process(this)'> Edit</a>
function process(inp) {
console.log(inp.getAttribute('data-href'));
}
if you are using jQuery, then you can do this
let hrefVal = null
$('.edit_product').click(function () { hrefVal = $(this).data('href') })
I'm having a hard time in this one. I want to add data to a column in my database.
If there is an existing type in the database, then it not going to add, and if not it is going to add. However, it seems that my $validate is always empty.
Thanks in Advance. I really Appreciate your Help Thanks again.
this my add_item_type.php
$newi = $_GET["newi"];
$dept = $_GET["dept"];
$connection = mysqli_connect("localhost","root","","fumc");
$sql = mysqli_query($connection," SELECT * FROM items WHERE type = '".$newi."' ");
while($data=mysql_fetch_array($sql)){
$validate = $data['department'];
}
if($validate=="")
{
}
else
{
mysqli_query($connection," INSERT INTO items (type,department)VALUES('".$newi."','".$dept."') ");
echo mysqli_affected_rows($connection);
}
?>
My database name is fumc, my table name is items and inside my table i have type And Department .... One of my type is keyboard and department is IT..
this is my main.php
<html>
<body>
<head>
<link rel="icon" type="image/png" href="fumc.png">
<link href="css123/bootstrap.min.css" rel="stylesheet">
<link href="css123/simple-sidebar.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<input type="button" name="modal" value="Add Item Type" class="btn btn-primary" style="margin-left:100px;" data-toggle="modal" data-target="#myModal">
<center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style='top:0px;'>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:400px;">
<div class="modal-header " style='background:#ddd;'>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-family:Arial Black;color:green;"><center><b>ADD ITEM TYPE</b></center></h4>
</div>
<div class="modal-body">
<br>
<form action="#" method="post">
<input type='hidden' value='<?php echo $department?>'name ='dept' id='dept'>
<center>
<font class='text-success' ><b>NEW ITEM TYPE</b>
<input type='text' name ='newi' id='newi' style='margin-left:10px;border:1px solid gray;text-align:center;background:Transparent;'>
</font>
</center>
</div>
<br>
<div class="modal-footer" style='background:#ddd;'>
</form>
<button type="button" class="btn btn-info " name="add" id="add" >Add Item Type</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</center>
<script>
$(function(dd){
$("#modal").on("click",function(dd){
var dept = $("#dept").val();
var newi = $("#newi").val();
});
$("#add").on("click",function(tt){
var dept = $("#dept").val();
var newi = $("#newi").val();
$.get("add_item_type.php?newi="+newi+"&dept="+dept,function(values){
location.reload();
});
});
});
</script>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="plugins/fastclick/fastclick.min.js"></script>
<script src="dist/js/app.min.js"></script>
<script src="dist/js/demo.js"></script>
</body>
</html>
Need help Please..! Thanks.
The easiest way to do this is to use MySQL's built in UNIQUE attribute. Set the department column of your database table to be unique, then you can use a query like this:
"INSERT IGNORE INTO items (type,department) VALUES ('".$newi."','".$dept."')"
This query will only insert a new row if the $dept value doesn't match any of the other values in the department column.
I have below code with href link that will open the popup form. How can I pass the parameters to this popup form??
echo "<a class=\"btn btn-primary btn-xs\" href=\"#contactAdvertiser\" data-toggle=\"modal\" ><i class=\"fa fa-edit\"></i> Reply </a></p>";
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
this is a simple way only
i make use of bootstrap and jquery
<br/>
this are buttons generated by the php
<br/>
you can create a element data attribute where in you can put
<br/>
your php contents to be transfer to the modal or popup
<br/>
<button type="button" class="btn btn-primary clickbutton" data-toggle="modal" data-target=".bs-example-modal-sm" data-transfer="This is a data that i am holding generated by the php">Small modal</button>
<button type="button" class="btn btn-primary clickbutton" data-toggle="modal" data-target=".bs-example-modal-sm" data-transfer="This is a data that i am holding generated by the php sample 2">Small modal1</button>
<div id="popup" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<p>Sample Test Data</p>
</div>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// bind on click event on the button once it was open
// change the contents of modal or the popup
// contents
$('.clickbutton').on('click', function() {
// get the data-transfer attribute and
// send it to modal/popup data
var data = $(this).attr('data-transfer');
// change the content of the modal using javascript
// jquery dom manipulation
$('#popup').find('.modal-content p').html(data);
});
});
</script>
</body>
</html>