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.
Related
Good afternoon colleagues, I am in a web design course, this work was presented to me, which is a search page, which should show the user's information in a MODAL, obtaining it from the database.
I managed to make the Modal work, but, it throws all the information of the table, when I try to do the query, it does not show me anything.
I hope you can guide me with this detail
<?php
//Conexion para el Modal
$con =mysqli_connect("localhost", "root","");
$db = mysqli_select_db($con, 'requi');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="./">Search panel</a>
</nav>
<meta charset="UTF=8">
<hr weight= "100%">
<title>Buscar requisicion</titLe>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-5">
<h2>Buscar requisición</h2>
<div class="form-group">
<form class="form-outline">
<input class="form-control mr-sm-2" type="search" placeholder="Ingresa el ID" name ="id" aria-label="Search">
<!--<button class="btn btn-success my-2 my-sm-0" type="submit" name="search">Buscar</button>-->
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" name="smodal">Busqueda</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Mail Search</h4>
</div>
<div class="modal-body">
<p>Your data: </p>
</div>
<div>
<table style='border-collapse: collapse;'>
<tr>
<th>Email</th>
<th>Name</th>
<th> </th>
</tr>
<?php
if(isset($_POST['search'])) {
$id = $_POST['id'];
$query = "select * from info WHERE id = '$id'";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
$id = $row['id'];
$correo = $row['correo'];
$nombre = $row['nombre'];
echo "<tr>";
echo "<td>".$correo."</td>";
echo "<td>".$nombre."</td>";
echo "</tr>";
}
}
?>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
So I was developing some crud application with CodeIgniter Framework. But I am facing issues while retrieving data from the database. I am getting a 404 Not Found error for the AJAX function. The function is where it should be but I can't seem to find why it's giving me an error.
Please find the following code for the files and let me know if I am doing anything wrong here.
package_view.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Package List</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.css">
</head>
<body>
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-12">
<div class="col-md-12">
<h1>Package
<small>List</small>
<div class="float-right"><span class="fa fa-plus"></span> Add New</div>
</h1>
</div>
<table class="table table-striped" id="mydata">
<thead>
<tr>
<th>Package ID</th>
<th>Test Quantity</th>
<th>Price</th>
<th style="text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="show_data">
</tbody>
</table>
</div>
</div>
</div>
<!-- MODAL ADD -->
<form>
<div class="modal fade" id="Modal_Add" tabindex="-1" 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">Add New Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-2 col-form-label">Test Quantity</label>
<div class="col-md-10">
<input type="text" name="test_quantity" id="test_quantity" class="form-control" placeholder="Test Quantity">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Price</label>
<div class="col-md-10">
<input type="text" name="price" id="price" class="form-control" placeholder="Price">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_save" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL ADD-->
<!-- MODAL EDIT -->
<form>
<div class="modal fade" id="Modal_Edit" tabindex="-1" 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">Edit Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-2 col-form-label">Package ID</label>
<div class="col-md-10">
<input type="text" name="pkg_id_edit" id="pkg_id_edit" class="form-control" placeholder="Package ID" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Test Quantity</label>
<div class="col-md-10">
<input type="text" name="test_quantity_edit" id="test_quantity_edit" class="form-control" placeholder="Test Quantity">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Price</label>
<div class="col-md-10">
<input type="text" name="price_edit" id="price_edit" class="form-control" placeholder="Price">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL EDIT-->
<!--MODAL DELETE-->
<form>
<div class="modal fade" id="Modal_Delete" 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">Delete Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>Are you sure to delete this record?</strong>
</div>
<div class="modal-footer">
<input type="hidden" name="pkg_id_delete" id="pkg_id_delete" class="form-control">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" type="submit" id="btn_delete" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL DELETE-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
show_package(); //call function show all package
$('#mydata').dataTable();
//function show all package
function show_package(){
$.ajax({
type : 'ajax',
url : '<?php echo site_url('Package/package_data')?>',
async : true,
dataType : 'json',
success : function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].pkg_id+'</td>'+
'<td>'+data[i].test_quantity+'</td>'+
'<td>'+data[i].price+'</td>'+
'<td style="text-align:right;">'+
'Edit'+' '+
'Delete'+
'</td>'+
'</tr>';
}
$('#show_data').html(html);
}
});
}
//Save package
$('#btn_save').on('click',function(){
var pkg_id = $('#pkg_id').val();
var test_quantity = $('#test_quantity').val();
var price = $('#price').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/save')?>",
dataType : "JSON",
data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
success: function(data){
$('[name="pkg_id"]').val("");
$('[name="test_quantity"]').val("");
$('[name="price"]').val("");
$('#Modal_Add').modal('hide');
show_package();
}
});
return false;
});
//get data for update record
$('#show_data').on('click','.item_edit',function(){
var pkg_id = $(this).data('pkg_id');
var test_quantity = $(this).data('test_quantity');
var price = $(this).data('price');
$('#Modal_Edit').modal('show');
$('[name="pkg_id_edit"]').val(pkg_id);
$('[name="test_quantity_edit"]').val(test_quantity);
$('[name="price_edit"]').val(price);
});
//update record to database
$('#btn_update').on('click',function(){
var pkg_id = $('#pkg_id_edit').val();
var test_quantity = $('#test_quantity_edit').val();
var price = $('#price_edit').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/update')?>",
dataType : "JSON",
data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
success: function(data){
$('[name="pkg_id_edit"]').val("");
$('[name="test_quantity_edit"]').val("");
$('[name="price_edit"]').val("");
$('#Modal_Edit').modal('hide');
show_package();
}
});
return false;
});
//get data for delete record
$('#show_data').on('click','.item_delete',function(){
var pkg_id = $(this).data('pkg_id');
$('#Modal_Delete').modal('show');
$('[name="pkg_id_delete"]').val(pkg_id);
});
//delete record to database
$('#btn_delete').on('click',function(){
var pkg_id = $('#pkg_id_delete').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/delete')?>",
dataType : "JSON",
data : {pkg_id:pkg_id},
success: function(data){
$('[name="pkg_id_delete"]').val("");
$('#Modal_Delete').modal('hide');
show_package();
}
});
return false;
});
});
</script>
</body>
</html>
Packages.php
<?php
class Packages extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('package_model');
}
function index(){
$this->load->view('package_view');
}
function package_data(){
$data=$this->package_model->package_list();
echo json_encode($data);
}
function save(){
$data=$this->package_model->save_package();
echo json_encode($data);
}
function update(){
$data=$this->package_model->update_package();
echo json_encode($data);
}
function delete(){
$data=$this->package_model->delete_package();
echo json_encode($data);
}
}
and
package_model.php
<?php
class package_model extends CI_Model{
function package_list(){
$hasil=$this->db->get('tblexampackages');
return $hasil->result();
}
function save_package(){
$data = array(
'pkg_id' => $this->input->post('pkg_id'),
'test_quantity' => $this->input->post('test_quantity'),
'price' => $this->input->post('price'),
);
$result=$this->db->insert('tblexampackages',$data);
return $result;
}
function update_package(){
$pkg_id=$this->input->post('pkg_id');
$test_quantity=$this->input->post('test_quantity');
$price=$this->input->post('price');
$this->db->set('price', $price);
$this->db->set('test_quantity', $test_quantity);
$this->db->where('pkg_id', $pkg_id);
$result=$this->db->update('tblexampackages');
return $result;
}
function delete_package(){
$pkg_id=$this->input->post('pkg_id');
$this->db->where('pkg_id', $pkg_id);
$result=$this->db->delete('tblexampackages');
return $result;
}
}
Other files are autoload.php, config.php and database.php which are configured properly. Please tell me where I am going wrong here.
As for database, MySQL connectivity is good and the table named tblexampackages only has 3 Columns named pkg_id, test_quantity and price.
Thanks.
Your controller is Packages, you're trying to access Package... Edit this line from
url : '<?php echo site_url('Package/package_data')?>', //old
url : "<?php echo site_url('Packages/package_data')?>" //new
After which, edit your package_list to something like this
$query = $this->db->get('tbl_name');
return $query->result_array();
in your Ajax function show_package() you have:
url : '<?php echo site_url('Package/package_data')?>',
it should be
url : '<?php echo site_url('Packages/package_data')?>',
I have the following database:
| fund_name | fund_description | amount_received | actual_amount
Bootstrap With PHP :
<div class="card-deck">
<?php
$sql = "SELECT * FROM fundraiser;";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($result)){
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$row['fund_name'].'</h5>
<div class="card-text">
<p>'.$row['fund_description'].'</p>
<h6>Amount:'.$row['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$row['amount_received'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary" data-
toggle="modal" data-target="#exampleModalCenter"> Donate
</button>
</div>
</div>
</div>
</div>';
}
?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-
hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" class="form-control" id="formGroupExampleInput"
placeholder="Enter Amount">
</div>
<div class="form-group">
<input type="submit" class="form-control btn btn-primary btn-small"
id="formGroupExampleInput" >
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Here In my above code im obtaining data from database and displaying the fundraisers using the bootstrap 4. Each fundraisers is displayed using the cards and each card has a donate button. Donate button links to a modal which has a form to pay amount to fundraisers.
My Question is how to differentiate the donate button of a particular card that payment is going on for that so that i can store 'amount_received' field in database for a particular row of fundraiser?
You can use data-id to store the id of each fundraiser. When a user click on the button to open the modal, you will get the value of data-id. In the modal form I add <input type="hidden" name="fundid" id="fundid"> to store the data-id. Try the following code:
Here is a replicate of your data in php array:
<?php
$fundraiser = array(
array('id'=>1,'fundname'=>"Anyname","description"=>"About fund","actual_amount"=>50.00,'amount_receive'=>40),
array('id'=>2,'fundname'=>"Anyname2","description"=>"About fund3","actual_amount"=>100.00,'amount_receive'=>90),
array('id'=>3,'fundname'=>"Anyname3","description"=>"About fund3","actual_amount"=>20.00,'amount_receive'=>10)
);
?>
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-deck">
<?php
foreach($fundraiser as $key=>$val):
echo '<div class="card">
<img class="card-img-top" >
<div class="card-body text-center">
<h5 class="card-title">'.$val['fundname'].'</h5>
<div class="card-text">
<p>'.$val['description'].'</p>
<h6>Amount:'.$val['actual_amount'].'</h6>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width:'.$val['amount_receive'].'%;"aria-
valuenow="0" aria-valuemin="0" aria-
valuemax="1000">
</div>
</div>
<div class="mt-2">
<button type="button" class="btn btn-md btn-primary fundid" data-toggle="modal" data-target="#exampleModalCenter" data-id="'.$val['id'].'"> Donate
</button>
</div>
</div>
</div>
</div>';
endforeach; ?>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form method="POST" action='updatedb.php'>
<div class="modal-body">
<div class="form-group">
<label for="formGroupExampleInput">Enter Amount</label>
<input type="number" name="amount" class="form-control" id="formGroupExampleInput" placeholder="Enter Amount">
</div>
<input type="hidden" name="fundid" id="fundid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="form-control btn btn-primary btn-small" id="formGroupExampleInput">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To get data-id and store in the form
<script type="text/javascript">
$('.fundid').on('click', function (e) {
$('#fundid').val($(this).attr("data-id"));
});
We don't want to leave trace of the data-id when we close the modal dialog
$('#exampleModalCenter').on('hidden.bs.modal', function () {
$('#fundid').val('');
});
</script>
When you submit the form, it will submit the data to updatedb.php. In updatedb.php, to get the form data:
the content of updatedb.php
<?php
$fundid = $_POST['fundid'];
$amount = $_POST['amount'];
echo "ID=>".$fundid."<br> Amount=>".$amount;
?>
I want a modal popup after an if-statement is satisfied. The following is a sample of the code:
<form action="" method="post">
<button type="submit" name="btn">Test</button>
</form>
<?php
if (isset($_POST['btn'])) {
//then trigger the modal pop-up
}
?>
If you want open modal window then you have to use javascript / jquery as shown below
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="" method="post">
<button type="submit" name="btn">Test</button>
</form>
<?php if (isset($_POST['btn'])) { ?>
<script>
$(function() {
$("#myModal").modal();//if you want you can have a timeout to hide the window after x seconds
});
</script>
<!-- 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>Sample modal window</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
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.