PHP AJAX CRUD Issue While Fetching Data - php

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')?>',

Related

Add data from a datatable to a modal in laravel

The spanish version failed me, so I'll test my luck here
I have the following code and I would like to know how I can pass the data from my table to the modal
This is my code in edit.blade.php. The modal does work but I don't know how to make the data show up in the modal, I'll do POST to the database myself but I just want to know how I make that data show up so I can edit it.
The data that I want to appear in the modal are the id, the name and the email.
This is my code in editar.blade.php
<script src="{{ url('/js/vendor/jquery-1.12.4.min.js') }} "></script>
<script src="{{ url('/js/bootstrap.min.js') }} "></script>
<link rel="stylesheet" href="{{ url('/css/bootstrap.min.css') }} ">
<script src="{{ url('/js/jquery.dataTables.min.js') }} "></script>
<div class="container">
<h2>Editar estudiante</h2>
<div class="container">
<h2>Laravel DataTables Tutorial Example</h2>
<table id="user_table" class="table table-bordered table-striped">
<thead>
<tr>
<th width="35%" id="name">Name</th>
<th width="35%" id="email">Email</th>
<th width="30%">Action</th>
</tr>
</thead>
</table>
</div>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<input type="hidden" name="modal-input-id" class="form-control" id="modal-input-id" required>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-email" class="form-control" id="modal-input-email" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#user_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('getdata') }}",
},
columns: [
{
data: 'name',
name: 'name',
className: 'user-name',
},
{
data: 'email',
name: 'email',
className: 'user-email',
},
{
data: 'action',
name: 'action',
orderable: false
}
]
});
$(document).on('click', "#edit-item", function() {
//obtenemos la instancia de la fila
$tr = $(this).closest('tr');
//rellenamos los campos en el modal
$('#modal-input-name').val($('user-name', $tr).text());
$('#modal-input-email').val($('user-email', $tr).text());
// Mostramos el modal
$('#edit-modal').modal('show');
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$('#edit-form').trigger('reset');
})
});
</script>
This is my get route in web.php
Route::get('/editar', 'AdminController#editar')->name('editar');
This is my function to bring data to the Datatable in AdminController.php
public function getPosts(Request $request)
{
if($request->ajax()){
$data = StudentModel::latest()->get();
return DataTables::of($data)
->addColumn('action', function($data){
$button = '<button id="edit-item" type="button" name="edit-item" data-target-id="'.$data->id.'" class="edit btn btn-primary btn-sm" data-toggle="modal" data-target="edit-modal">Edit</button>';
$button .= ' <button type="button" name="edit" data-target-id="'.$data->id.'" class="delete btn btn-danger btn-sm">Delete</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('editar');
}

Can you try this?
$('#modal-input-name').val($tr.find('td.user-name').text());
$('#modal-input-email').val($tr.find('td.user-email').text());
And also I would suggest that you use a css class for targeting a click event, as Id is normally for a unique identifier, and by doing your way you are having many table rows with the same Id which defeats the original idea.

The GET method is not supported for this route. Supported methods: POST When Insert data

I just tried to insert data using ajax json but I'm getting a error like this. I checked in the controller, route and model. There's nothing wrong with how to set it up. Please help.
For View Blade
function add() {
save_method = 'add';
$('#form_jabatan')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('[name="kode"]').prop("readonly", false);
}
function save() {
var url = "";
if (save_method === 'add') {
url = "<?php echo url('/simpanjabatan') ?>";
} else {
url = "<?php echo url('/simpanjabatan') ?>";
}
$.ajax({
url: url,
type: "POST",
data: $('#form_jabatan').serialize(),
dataType: "JSON",
success: function (data) {
if (data.errors) {
jQuery.each(data.errors, function (key, value) {
jQuery('.alert-danger').show();
jQuery('.alert-danger').append('<p>' + value + '</p>');
});
} else {
alert(data.status);
$('#modal_form').modal('hide');
reloadpage();
}
},
error: function (request, status, error) {
alert("Error json " + error);
json = $.parseJSON(request.responseText);
$.each(json.errors, function (key, value) {
$('.alert-danger').show("");
$('.alert-danger').append('<p>' + value + '</p>');
});
}
});
}
</script>
<!-- Page Content -->
<div class="content">
<h2 class="content-heading">Form Detail Jabatan</h2>
<!-- Dynamic Table Full -->
<div class="block">
<div class="block-header block-header-default">
<h3 class="block-title">DATA TABLE Detail Jabatan</h3>
</div>
<div class=" block-content block-content-full table-responsive">
<button type="button" onclick="add();" class="btn btn-primary mr-5 mb-5" data-toggle="modal">
<i class="fa fa-plus mr-5"></i>Kelola Jabatan
</button>
<div class="table-responsive">
<table id="example" class=" table table-striped js-dataTable-full-pagination ">
<thead>
<tr>
<th >ID JABATAN</th>
<th >JENIS JABATAN</th>
<th >GAJI_POKOK</th>
<th >Aksi</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- DataTables functionality is initialized with .js-dataTable-full-pagination class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
</div>
</div>
</div>
<!-- END Page Content -->
<!-- From Right Modal -->
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="modal-fromright"
aria-hidden="true">
<div class="modal-dialog modal-dialog-fromright" role="document">
<div class="modal-content">
<div class="block block-themed block-transparent">
<div class="block-header bg-primary-dark">
<h3 class="block-title">FORM Detail Jabatan</h3>
<div class="block-options">
<button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
<i class="si si-close"></i>
</button>
</div>
</div>
<div class="modal-body form">
<form action="#" id="form_jabatan" class="form-horizontal">
<input name="_token" type="hidden" id="_token" value="{{ csrf_token() }}"/>
<div class="form-body">
<div class="form-group">
{{--<label type="hidden" class="control-label col-md-3">Kode</label>--}}
<div class="col-md-9">
<input name="kode" type="hidden" class="form-control" type="text"
placeholder="Kode">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Jenis Jabatan</label>
<div class="col-md-9">
<select class="form-control" id="jabatan" name="jabatan">
<option value="0">Silahkan Pilih</option>
<option value="1">Ka Mantri</option>
<option value="1">Ka Mantri(baru)</option>
<option value="2">Kasir</option>
<option value="2">Staff Admin</option>
<option value="2">Mantri</option>
<option value="2">Mantri(Baru)</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Gaji Pokok</label>
<div class="col-md-9">
<input type="text" class="form-control" id="gaji" name="gaji"
placeholder="Masukan gaji...">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save();" class="btn btn-primary">Save
</button>
</div>
</div>
</div>
</div>
</div>
<!-- END From Right Modal -->
For Controller
public function simpanjabatan(Request $req)
{
$obj = new DetailJabatanModel();
$obj->id_jabatan = $req->input('kode');
$obj->jabatan = $req->input('jabatan');
$obj->gaji_pokok = $req->input('gaji');
$simpan = $obj->save();
if ($simpan == 1) {
$status = "Tersmpan";
} else {
$status = "Gagal";
}
echo json_encode(array("status" => $status));
}
for route
Route::post('/simpanjabatan', 'FormJabatanController#simpanjabatan');
I want to insert with json but I got erorr:
The GET method is not supported for this route. Supported methods: POST.

How to update particular row in sql using the content of particular bootstrap 4 cards?

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;
?>

How to pass value in bootstrap v4 modal?

As you can see below, I have a php-generated table with a td that contains both edit and delete anchors. I put the $data['id'] inside the data-id attribute of the anchor and I pass it to the modal via jquery. However, the ID of the article is not being displayed on the modal. Can someone tell what is wrong with my codes? Is it the php, the html, or the jquery? Thanks!
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center">EditDelete</div></td>';
echo '</tr>';
}
?>
PHP-GENERATED TABLE
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
HTML MODAL
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
JQUERY
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Summary</th>
<th>Content</th>
<th><div align="center">Date Published</div></th>
<th><div align="center">Date Last Edited</div></th>
<th><div align="center">Action</div></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td><div align="center">EditDelete</div>
</td>
</tr>
</tbody>
</table>
INSPECTED PAGE - TABLE
$('#articleEditModal').on('show.bs.modal', function (e) {
An error shows on this line above:
Uncaught ReferenceError: $ is not defined
at cms.php:162

var opener = $(e.relatedTarget); instead of var opener=e.relatedTarget;
Reference Bootstrap Modal
Hope this helps!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<table>
<tr>
<th scope="row">2</th>
<td>
Edit
Delete
</td>
</tr>
</table>
<!-- Modal-->
<div id="articleEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#articleEditModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var article_id = button.attr('data-article-id')
// take advantage of data attribute
// var article_id = button.data('article-id');
var modal = $(this)
modal.find('.modal-title').text('Article ' + article_id)
modal.find('.modal-body input').val(article_id)
})
</script>
// Sample php data
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<?php
require "../connection.php";
$query = mysqli_query($conn, "SELECT * FROM `articles`");
while($data = mysqli_fetch_array($query)) {
echo '<tr>';
echo '<th scope="row">'.$data['id'].'</th>';
echo '<td><div align="center">EditDelete</div></td>';
echo '</tr>';
}
?>
<!-- Modal-->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Edit Article</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Please save your changes after editing the article.</p>
<form id="myForm">
<div class="form-group">
<label>ID</label>
<input type="text" value="" name="articleId" id="articleId" class="form-control">
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=$(e.relatedTarget);//this holds the element who called the modal
//we get details from attributes
var myArticleId=$(opener).attr('data-id');
//set what we got to our form
$('#myForm').find('[name="articleId"]').val(myArticleId);
});
</script>

AngularJs Delete confirmation from bootstrap modal

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.

Categories