My goal is to open the details of a link in the loop $viewhh with an ID in a modal. I have tried so many different ways through jquery, etc and have not been able to get anything to work. Just calling the page works fine, but trying to load in a modal has been futile for me.
<div class="row">
<div class="col-md-12">
<p><a class="btn btn-default" href="add_praise.php" role="button">Add a Praise</a></p>
<h2>Praises</h2>
<p><?php
$query = "SELECT praise.id, praise.title, praise.description, praise.created, member.username FROM praise INNER JOIN member ON praise.member_id=member.id ORDER BY praise.created desc;";
$stmt = $db->query($query);
printf('<table class="table">');
printf('<thead><tr><th>Title</th><th>Posted By</th><th>Posted</th></tr></thead>');
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$created = date('m-d-Y', strtotime($row['created']));
$viewhh = '<a href="view_praise.php?id=' .
urlencode($row["id"]) . '">' . ($row["title"]) . '</a>';
printf("<tbody><tr><td> %s </td> <td> %s </td><td> %s </td><td> %s </td></tr></tbody>", $viewhh, htmlentities($row["username"]), $created, $viewbutton);
printf("</table");
}
?> </p>
</div>
This is the page being called
<?php
$praiseid = urldecode($_GET['id']);
$sth = $db->prepare("select * from praise where id = '$praiseid'");
$sth->execute();
$result = $sth->fetch(PDO::FETCH_ASSOC);
$title = $result['title'];
$description= $result['description'];
?>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2><?php echo $title; ?></h2>
<div><?php echo $description; ?></div>
</div>
</div>
I have tried adding this but only get the first record now.
<script>
$(function () {
$("#loadpraise").colorbox({ iframe: true, width: "90%", height: "90%", closeButton: false });
$("#events").colorbox({
onOpen: function () { alert("Colorbox onOpen"); },
onLoad: function () { alert("Colorbox onLoad"); },
onComplete: function () { alert("Colorbox onComplete"); },
onCleanup: function () { alert("Colorbox onCleanup"); },
onClosed: function () { alert("Colorbox onClosed"); }
});
$("#childForm").colorbox({ closeButton: false, onClosed: function () { alert($.colorbox.popupResult) } });
});
</script>
I got it working using BootStrap 3 modal.
The link calling the record: just added data-toggle="modal" and data-target="#myModal"
$viewpraise = '<a data-toggle="modal" href="view_praise.php?id=' . urlencode($row["id"]) . '" data-target="#myModal">' . ($row["title"]) . '</a>';
included the modal for remote call on the same page. The remote page is loaded into the "modal-content" div.
<!-- Modal -->
<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> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
Then on the page called add the rest of the modal content:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Remote file for Bootstrap Modal</title>
<script>
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});</script>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div> <!-- /modal-header -->
<div class="modal-body">
<h2><?php echo $title; ?></h2>
<div><?php echo $description; ?></div>
</div> <!-- /modal-body -->
<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> <!-- /modal-footer -->
</body>
</html>
Related
I have a modal script that I created in php and the script works fine but the php closing tag ?> is not closing at the end, tried putting the script in the header using echo but then the script dose not work at all also tried using just php removing the Script tags that did not work been working on for a while any help would be greatly appreciated.
<?php
include("db_config.php");
include('includes/session.inc');
$Title = _('Check Inquiry');
$ViewTopic = 'AccountsPayable';
$BookMark = 'AccountsPayable';
include('includes/header.inc');
include('includes/SQL_CommonFunctions.inc');
echo '<link href="' . $RootPath . '/css/bootstrap.min.css" rel="stylesheet" type="text/css" />';
echo '<script src = "'.$RootPath.'/javascripts/jquery.min.js"></script>';
echo '<script type="text/javascript" src = "'.$RootPath.'/javascripts/bootstrap.min.js"></script>';
$query = "select * from banktrans where type=".'22';
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_array($result)){
$transID = $row['transno'];
echo "<tr>";
echo "<td><button data-id='".$transID."' class='btn btn-info btn-sm btn-popup'>Details</button></td>";
echo "</tr>";
}
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</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).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>
HTML;
include('includes/footer.inc');
?>
Yes it dose appear I added the HTML in a separate php file and it works but the closing tag ?> is still not working as expected normally it shows up in NP++ in red when closed but shows as normal text but does not appear on page I am just wondering if it will create any issues that way.
Here is the code for the include modal.php
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</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).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>";
HTML;
?>'''
This is my index on showing the report of the inventory system
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Inventory Management System</title>
<?php
session_start();
if(!isset($_SESSION['login_id']))
header('location:login.php');
include('./header.php');
// include('./auth.php');
?>
</head>
<style>
body{
background: #80808045;
}
</style>
<body>
<?php include 'topbar.php' ?>
<?php include 'navbar.php' ?>
<div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body text-white">
</div>
</div>
<main id="view-panel" >
<?php $page = isset($_GET['page']) ? $_GET['page'] :'home'; ?>
<?php include $page.'.php' ?>
</main>
<div id="preloader"></div>
<i class="icofont-simple-up"></i>
<div class="modal fade" id="confirm_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
</div>
<div class="modal-body">
<div id="delete_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='confirm' onclick="">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uni_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='submit' onclick="$('#uni_modal form').submit()">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</body>
<script>
window.start_load = function(){
$('body').prepend('<di id="preloader2"></di>')
}
window.end_load = function(){
$('#preloader2').fadeOut('fast', function() {
$(this).remove();
})
}
window.uni_modal = function($title = '' , $url=''){
start_load()
$.ajax({
url:$url,
error:err=>{
console.log()
alert("An error occured")
},
success:function(resp){
if(resp){
$('#uni_modal .modal-title').html($title)
$('#uni_modal .modal-body').html(resp)
$('#uni_modal').modal('show')
end_load()
}
}
})
}
window._conf = function($msg='',$func='',$params = []){
$('#confirm_modal #confirm').attr('onclick',$func+"("+$params.join(',')+")")
$('#confirm_modal .modal-body').html($msg)
$('#confirm_modal').modal('show')
}
window.alert_toast= function($msg = 'TEST',$bg = 'success'){
$('#alert_toast').removeClass('bg-success')
$('#alert_toast').removeClass('bg-danger')
$('#alert_toast').removeClass('bg-info')
$('#alert_toast').removeClass('bg-warning')
if($bg == 'success')
$('#alert_toast').addClass('bg-success')
if($bg == 'danger')
$('#alert_toast').addClass('bg-danger')
if($bg == 'info')
$('#alert_toast').addClass('bg-info')
if($bg == 'warning')
$('#alert_toast').addClass('bg-warning')
$('#alert_toast .toast-body').html($msg)
$('#alert_toast').toast({delay:3000}).toast('show');
}
$(document).ready(function(){
$('#preloader').fadeOut('fast', function() {
$(this).remove();
})
})
</script>
</html>
And this is the table names in database.
database table names
I know how I can make a print button but I do not know how to make it process. How can I add the feature that can print the data in table form and pdf? Sorry for asking, just a newbie.
id
product_title
product_desc
1000
Iphone 12
this is iPhone 12
1001
Iphone 11
this is iPhone 11
1002
Iphone X
this is iPhone X
1003
Iphone 8
this is iPhone 8
1004
Iphone 7
this is iPhone 7
I have a table called products that looks something like the table above. I displayed all the products on my page. But now I want to use bootstrap modal to display the product description when I clicked on the name of that particular product.( Exp: I click on the product name of iPhone 12 on my page. A boostrap modal will be displayed to show me the description of iPhone 12. )
My question is how can I display the description of that particular product that I click on? Now I am having an output of all the descriptions of the products in my modal.
This is the codes where I use to display the products
<div class="row form-group" id="myDIV">
<?php
$sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
<div class="product-wrapper">
<div class="card-body">
<h5 class="product-title" style="min-height: 39px;">
<span class="float-left" data-toggle="modal" data-target="#productdesc1">
<?php echo $row['product_title']; ?>
</span>
</h5>
View More
</div>
</div>
</div>
<?php
}
}
?>
</div>
These are the codes that I use for my bootstrap modals
<!-- The Modal -->
<div class="modal fade" id="productdesc1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<div class="float-right mb-3">
<button type="button" class="close" data-dismiss="modal" style="color:#ed1c25;">×</button>
</div>
<?php
$sql = "SELECT product_desc FROM products";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="mb-3">
<h5 class="product-title">Description</h5>
<p><?php echo $row['product_desc']; ?></p>
</div>
<?php
}
}
?>
</div>
</div>
</div>
</div>
i will show you make simple with jquery
first i add onlick ShowModalProduct() at your <a> and will look like this
View More
<?=$row['id'];?> its from foreach the data and will be parameter for show product_desc at javascript code
and then at the modal i will give id at each <div>
<div class="mb-3 hidden" id="products_<?=$row['id'];?>">
<h5 class="product-title">Description</h5>
<p><?php echo $row['product_desc']; ?></p>
</div>
and i use this jquery library
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
and add the script the function ShowModalProduct() will look like this, when the function fired, it will remove class hidden and add class show-desc
function ShowModalProduct(id){
$('#products_'+id).removeClass('hidden');
$('#products_'+id).addClass('show-desc');
$('#productdesc1').modal('toggle');
}
i forget to mention i add 2 class style to show/hide the div section, and when foreach the product desc first i add class hidden like this <div class="mb-3 hidden" id="products_<?=$row['id'];?>"> and include id at the sql (SELECT id,product_desc FROM products)
<style type="text/css">
.hidden{
display: none;
}
.show-desc{
display: block;
}
</style>
and i add onclick CloseModal() at button close modal like this
<button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">×</button>
and then add the function script like this
function CloseModal(){
$(".show-desc").each(function(){
var id = $(this).attr('id');
$("#"+id).removeClass('show-desc');
$("#"+id).addClass('hidden');
});
$('#productdesc1').modal('hide');
}
so when the modal close, it will change all class show-desc to class hidden so when you showing another modal, the previous div not showing again
full code will look like this
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
.hidden{
display: none;
}
.show-desc{
display: block;
}
</style>
<body>
<div class="row form-group" id="myDIV">
<?php
$sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
<div class="product-wrapper">
<div class="card-body">
<h5 class="product-title" style="min-height: 39px;">
<span class="float-left" data-toggle="modal" data-target="#productdesc1">
<?php echo $row['product_title']; ?>
</span>
</h5>
View More
</div>
</div>
</div>
<?php
}
}
?>
</div>
<!-- The Modal -->
<div class="modal fade" id="productdesc1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<div class="float-right mb-3">
<button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">×</button>
</div>
<?php
$sql = "SELECT id,product_desc FROM products";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="mb-3 hidden" id="products_<?=$row['id'];?>">
<h5 class="product-title">Description</h5>
<p><?php echo $row['product_desc']; ?></p>
</div>
<?php
}
}
?>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script type="text/javascript">
function ShowModalProduct(id){
$('#products_'+id).removeClass('hidden');
$('#products_'+id).addClass('show-desc');
$('#productdesc1').modal('toggle');
}
function CloseModal(){
$(".show-desc").each(function(){
var id = $(this).attr('id');
$("#"+id).removeClass('show-desc');
$("#"+id).addClass('hidden');
});
$('#productdesc1').modal('hide');
}
</script>
</body>
</html>
if use ajax, change the function at script like this
function ShowModalProduct(id){
$.ajax({
url: 'GetProduct.php',
type: 'get',
data: {'id':id},
dataType: 'JSON',
success: function(response){
if(response==null){
alert('Data Not Found');
}else{
data = response;
$('#desc-product').html(data.product_desc);
$('#productdesc1').modal('toggle');
}
}
});
}
function CloseModal(){
$('#productdesc1').modal('hide');
}
and create new php file GetProduct.php for get detail product
<?php
$id_product = $_GET['id'];
$conn = mysqli_connect("localhost", "root", "","test"); //your config connection
$sql = "SELECT * FROM products WHERE product_status = 1 and id='".$id_product."' ";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
echo json_encode($row);
?>
full code at main file will like this
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<!--
<style type="text/css">
.hidden{
display: none;
}
.show-desc{
display: block;
}
</style>
-->
<body>
<div class="row form-group" id="myDIV">
<?php
$conn = mysqli_connect("localhost", "root", "","test"); //your config connection
$sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
<div class="product-wrapper">
<div class="card-body">
<h5 class="product-title" style="min-height: 39px;">
<span class="float-left" data-toggle="modal" data-target="#productdesc1">
<?php echo $row['product_title']; ?>
</span>
</h5>
View More
</div>
</div>
</div>
<?php
}
}
?>
</div>
<!-- The Modal -->
<div class="modal fade" id="productdesc1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<div class="float-right mb-3">
<button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">×</button>
</div>
<div class="mb-3">
<h5 class="product-title">Description</h5>
<p id="desc-product"></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script type="text/javascript">
function ShowModalProduct(id){
$.ajax({
url: 'GetProduct.php',
type: 'get',
data: {'id':id},
dataType: 'JSON',
success: function(response){
if(response==null){
alert('Data Not Found');
}else{
data = response;
$('#desc-product').html(data.product_desc);
$('#productdesc1').modal('toggle');
}
}
});
}
function CloseModal(){
$('#productdesc1').modal('hide');
}
</script>
</body>
</html>
You can do this by two ways:
Set the modal in the item list, inside the foreach block, and but the item description inside the modal, but don't forget to change modal ID regarding the toggle button id.
Call an onclick event when user clicks on item name, the action accociated with this event calls ajax request to get element by ID from database, when the request success, set the retrieved data inside a modal and make it visible.
I want to pass a value/id to bootstrap modal, after that from modal i want to pass value to angularjs to delete through php
my html code following
<tr dir-paginate="product in products">
<td>{{product.NUMBER}}</td>
<td>{{product.COMPANY}}</td>
<td>
<ul class="dropdown-menu">
<li>
Update
</li>
<li>Delete</li>
</ul>
</td>
</tr>
My modal code
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Want to delete</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
</div>
my angularjs code
$scope.deleteproductInfo=function(product){
$http.post("cdelete.php",{'product':product})
.success(function(datasuccess){
$scope.Status = datasuccess.Status;
$scope.cardDisplay();
});
};
Use an extra function for this purpose. The function is called when modal is activates and the required parameters are set to a global variable. Then the values hold on the global scopes are use for second action.
I recommend you to use angular-ui#modal.
It's really simple to use, take a look:
(function() {
'use strict';
angular
.module('app', ['ui.bootstrap'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$uibModal'];
function MainCtrl($scope, $uibModal) {
$scope.deleteModal = deleteModal;
$scope.products = [];
for (var i = 0; i < 20; i++) {
$scope.products.push({
"NUMBER": Math.floor(Math.random() * 500) + 1,
"COMPANY": "COMPANY " + Math.floor(Math.random() * 500) + 1
});
}
function deleteModal(product) {
$uibModal.open({
templateUrl: 'modal.html',
controller: ['$scope', '$uibModalInstance', 'products', 'product', DeleteModalCtrl],
resolve: {
products: function() {
return $scope.products
},
product: function() {
return product;
}
}
});
}
}
function DeleteModalCtrl($scope, $uibModalInstance, products, product) {
$scope.product = product;
$scope.deleteProduct = deleteProduct;
function deleteProduct() {
/*$http.post("cdelete.php", {
'product': product
})
.then(function(response) {
$scope.Status = response.Status;
$scope.cardDisplay();
});*/
products.splice(products.indexOf(product), 1);
$uibModalInstance.close();
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h3 class="modal-title" ng-bind-template="Delete {{ product.NUMBER }}?"></h3>
</div>
<div class="modal-body">
<span ng-bind-template="Are you sure you want to delete {{ product.NUMBER }}?"></span>
</div>
<div class="modal-footer">
<button class="btn btn-danger" ng-click="deleteProduct()">Delete</button>
<button class="btn" ng-click="$close()">Cancel</button>
</div>
</script>
<table class="table table-hover">
<tr ng-repeat="product in products">
<td ng-bind="product.NUMBER"></td>
<td ng-bind="product.COMPANY"></td>
<td>
<button type="button" class="btn btn-sm btn-primary" ng-click="editProduct(product)">Update</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="deleteModal(product)">Delete</button>
</td>
</tr>
</table>
</body>
</html>
I hope it helps.
i'm currently working on a project to improve my PHP/SQL skills.
So basically i want to make it so you click on the news title opens a modal that shows the news content, this is what i currently have and it isn't working.
Also sorry for my english, I'm dutch.
$newssql = $odb -> query("SELECT * FROM `news` ORDER BY `date` DESC LIMIT 4");
while($row = $newssql ->fetch())
{
$id = $row['ID'];
$title = $row['title'];
$content = $row['content'];
$autor = $row['author'];
echo '
<a data-toggle="modal" data-id="'.$id.'" data-target="#modal-3">
<div class="inbox-item">
<p class="inbox-item-author">'.htmlspecialchars($title).'</p>
<p class="inbox-item-text">'.htmlspecialchars($content).'</p>
<p class="inbox-item-date">'.date("m/d/y" ,$row['date']).'</p>
</div>
</a>
';
}
//Modal
<div aria-hidden="true" aria-labelledby="modal-label-3" class="modal fade"
id="modal-3" role="modal" style="display: none;" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss=
"modal" type="button">×</button>
<h4 class="modal-title" id="modal-label-3">NEWS</h4>
</div>
<div class="modal-body">
<?php echo htmlspecialchars($content); ?>
</div>
</div>
</div>
</div>
//jQuery
<script>
$('button[data-target="#modal-3"]').click(function(event) {
event.preventDefault();
var j = $(this).attr('data-id');
});
</script>
as far as I can see,
<script>
$('button[data-target="#modal-3"]').click(function(event) {
event.preventDefault();
var j = $(this).attr('data-id');
});
</script>
jquery will detect a click event from a button where as you stated
echo '
<a data-toggle="modal" data-id="'.$id.'" data-target="#modal-3">
<div class="inbox-item">
<p class="inbox-item-author">'.htmlspecialchars($title).'</p>
<p class="inbox-item-text">'.htmlspecialchars($content).'</p>
<p class="inbox-item-date">'.date("m/d/y" ,$row['date']).'</p>
</div>
</a>
';
it's on an <a> tag which is not a button.