How to pass request Id value to modal? - javascript

When I click on 'edit' button modal is open
but in a hidden field no I can't receive RequestId.
Please help me how to pass dynamic requested to modal form?
This I will use in Codeigniter framework.
If it is possible to please rewrite the code I will be most helpful.
<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
<a data-toggle="modal" href="<?php base_url()?>#myModal" class="btn btn-warning btn-sm">Edit</a>
</td>
</tr>
<?php $sn++;}?>
</tbody>
</table>

If I am right, you wanted to display a modal after clicks on the edit button.
Edit
I hope $row['rid'] is your unique ID and here is a html modal code
<div class="modal" id="detail_modal_pop" style="overflow: scroll;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close close_c_modal" >×</button>
<h4 class="modal-title c_modal">Details</h4>
</div>
<div class="modal-body">
<h6 id="load_wait" class="text-center">Please wait...</h6>
<div id="detail_modal_pop_result" style="display:none;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close_c_modal" >Close</button>
</div>
</div>
</div>
</div>
To display a modal on clicks on edit button, use below script
<script>
function get_modal_details(rid)
{
$('#detail_modal_pop').fadeIn(200);
$("#detail_modal_pop_result").hide();
$("#load_wait").show();
jQuery.ajax({
url: "<?php echo base_url() ?>some_controller/controller_method",
data: { rid: rid },
type: "POST",
success:function(data){
$("#load_wait").hide();
$("#detail_modal_pop_result").show();
$("#detail_modal_pop_result").html(data);
},
error:function (){}
});
}
$(".close_c_modal").on("click", function()
{
$('#detail_modal_pop').fadeOut(200);
$("#detail_modal_pop_result").hide(300);
$('#detail_modal_pop_result').html('');
$("#load_wait").show(300);
});
</script>
And here is the PHP code
<?php
//"Some_controller.php" Controller
public function controller_method()
{
if(isset($_POST['rid']))
{
$rid = (int)$_POST['rid'];
// $get_info = $this->Model->get_info($rid);
// Write modal content here...
}
}
?>
Hope this will help you.

You could add
data-request-id="<?php echo $row['rid']?>"
to the buttons that open the modals, and than use jquery/javascript to fetch the data with ajax
var requestId = $('.modalBtn').attr("data-request-id");

The is a sample to pass the ID to modal by using HTML data-attributes & jQuery.
<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
Edit
</td>
</tr>
<?php
$sn++;
}?>
</tbody>
</table>
<script>
$('#myModal').on('show.bs.modal', function (e) {
var $btn = e.relatedTarget,
rId = $btn.data('id');
// "rId" would be the value from the html data-attribute.
console.log(rId);
});
</script>

<table width="100%" class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col" align="left">#</th>
<th scope="col">Request Id</th>
<th scope="col">Agent Id</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col">Comment</th>
<th scope="col"> Request Date & Time</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sn=1;
foreach ($result as $row) {
//print_r($row);die();
?>
<tr>
<td align="left"><?php echo $sn ?></td>
<td><?php echo $row['rid'];?></td>
<td><?php echo $row['aid'];?></td>
<td><?php echo $row['type'];?></td>
<td><?php echo $row['value'];?></td>
<td><?php echo $row['comment'];?></td>
<td><?php echo $row['request_time'];?></td>
<td><button class="btn btn-danger btn-sm">Open</button></td>
<td>
<a onclick="load_item('<?php echo $row['rid'];?>');" class="btn btn-warning btn-sm">Edit</a>
</td>
</tr>
<?php $sn++;}?>
</tbody>
</table>
Javascript Code You had to insert
function load_item(rid){
/**
Write your ajax/javascript code here
*/
$("#myModal").modal("show");
}

Remove data-toggle="modal" from <a> tag and make onclick edit based on ID
<td>
<a id="edit-form" href="#" class="btn btn-warning btn-sm">Edit</a>
</td>
JS
$('#edit-form').click(function() {
$('#hidden_field_id').val(your-value);
$('#myModal').modal('show');
});

Related

Printing a hidden table with JavaScript

I have a page with one table, that is paginated, showing only 10 entries per page, and I need to print to paper the entire table at once, so I've made one hidden table, without pagination and with all the entries, and I'm trying to print it with Print.js, but the printing preview always show a blank page. I've already tried #media print but it doesn't work at all.
CSS:
.printable {
display: none;
}
#media print {
.printable {
display: block;
}
}
PHP page:
<div id="relatPrint" class="printable">
<div class="card">
<div class="card-body">
<h5 class="card-title">Relatórios de Envio</h5>
<hr>
<table class="table table-striped table-responsive w-100 d-block d-md-table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Código de Envio</th>
<th scope="col">Mensagem de envio</th>
<th scope="col">Data de envio</th>
</tr>
</thead>
<tbody>
<?php foreach($envios as $envio): ?>
<tr>
<td><?= esc($envio->id) ?></td>
<td><?= esc($envio->codigo) ?></td>
<td><?= esc($envio->log) ?></td>
<td><?= esc($envio->data) ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
</div>
And the printing script:
function printRelat(){
printJS('relatPrint', 'html')
}
I could solve the issue by entirely doing the display handling by jQuery and totally forgetting the CSS.
PHP now is:
<div id="relatPrint" class="printable" style="display: none">
<div class="card">
<div class="card-body">
<h5 class="card-title">Relatórios de Envio</h5>
<hr>
<table class="table table-striped table-responsive w-100 d-block d-md-table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Código de Envio</th>
<th scope="col">Mensagem de envio</th>
<th scope="col">Data de envio</th>
</tr>
</thead>
<tbody>
<?php foreach($envios as $envio): ?>
<tr>
<td><?= esc($envio->id) ?></td>
<td><?= esc($envio->codigo) ?></td>
<td><?= esc($envio->log) ?></td>
<td><?= esc($envio->data) ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
</div>
And the script:
function printRelat(){
$('.printable').css('display', 'block');
printJS('relatPrint', 'html');
$('.printable').css('display', 'none');
}

How to solve Cannot set property '_DT_CellIndex' of undefined in Jquery Datatable

<?php
if(mysqli_num_rows($result)>0)
{?>
<table class="table table-striped" id="example" align="center">
<tr>
<thead>
<th style="padding:7px">Name</th>
<th style="padding:7px">Email</th>
<th style="padding:7px">Position</th>
<th style="padding:7px">Action</th>
</thead>
</tr>
<tbody id="myTable">
<?php
echo "<tr>";
while($row=mysqli_fetch_assoc($result))
{
$id = $row['id'];
echo "<td style='padding:7px'>".$row["name"]."</td>";
echo "<td style='padding:7px'>".$row["email"]."</td>";
echo "<td style='padding:7px'>".$row["position"]."</td>";
?>
<td style='padding:7px'><button class="btn btn-info" onclick="deleteUser('<?php echo $row['id'];?>')"> <i class="fa fa-trash"></i> DELETE </button> |
<a class="btn btn-info" href="edit_user.php?id=<?php echo $row['id'];?>"> <i class="fa fa-pencil"></i> EDIT</a> |
<button class="btn btn-info abc" value="View Data" data-id="<?php echo $row['id']; ?>"> <i class="fa fa-eye"></i> VIEW DATA </button>
</td>
<?php echo "</tr>";
} ?>
</tbody>
<tfoot>
<th style="padding:7px">Name</th>
<th style="padding:7px">Email</th>
<th style="padding:7px">Position</th>
<th style="padding:7px">Action</th>
</tfoot>
<?php
echo "</table>";
}
else
{
echo "No row exists";
}
?>
I am using Jquery Datatable for sorting,searching and paging data. after i run the code it shown an error _DT_CellIndex' of undefined.
<tr>, <td>, <th>,<thead>,<tbody>,<tfoot> tags are used properly and closed properly.
Help me out to solve this problem.
[1]: https://i.stack.imgur.com/YL6Is.jpg
First, I googled your error and looks like that generally means that your table is malformed in some way, like having mismatched row sizes.
I then messed around by putting your table in this HTML Table Validator:
https://wet-boew.github.io/wet-boew-legacy/v3.1/demos/tableparser/validator-htmltable.html
And it said "Error: You can not define any row before the thead group"
I'm pretty sure your problem is that you need to nest the tr inside of thead, instead of the other way around:
<table class="table table-striped" id="example" align="center">
<thead>
<tr>
<th style="padding:7px">Name</th>
<th style="padding:7px">Email</th>
<th style="padding:7px">Position</th>
<th style="padding:7px">Action</th>
</tr>
</thead>

How to calculate the previous row and show in the current row of the table?

I am fetching some data from the table using codeigniter
My table picture
This is my table that i have fetched from the table.in this i have show the balance column in first row as 10 and next row as 35 how i calculate this using java script or php itself.
My code:
<table class="table datatable-button-html5-basic">
<thead>
<tr><h6>
<th class="col-sm">Bill No</th>
<th class="col-sm" >Date</th>
<th class="col-sm" >Particulars</th>
<th class="col-sm" >Op.Stock</th>
<th class="col-sm-7">Pur/Prod</th>
<th class="col-sm" >Sales/Cons</th>
<th class="col-sm" >Balance</th>
</tr>
</thead>
<tbody>
<?php foreach ($query as $row): ?>
<tr>
<?php $total = 0;
$total += $row['qty']; ?>
<td> <?php echo $row['orderno'];?></td>
<td ><?php echo $row['orderdate'];?></td>
<td >PRODUCTION</td>
<td></td>
<td dir="rtl"><?php echo $row['qty'];?></td>
<td></td>
<td><?php echo "$total" ;?></td>
</tr><?php endforeach ?>
<tr><?php foreach ($query1 as $row1): ?>
<td> <?php echo $row1['billno'];?></td>
<td ><?php echo $row1['billdate'];?></td>
<td ><?php echo $row1['accName'];?></td>
<td></td>
<td></td>
<td dir="rtl"><?php echo $row1['salesqty'];?></td>
<td></td>
</tr>
<?php endforeach ?>
</tbody>
This is my table code.
My another sample table:
Define $balance before foreach, and sum as $balance += $total; every row of balance column.
<table class="table datatable-button-html5-basic">
<thead>
<tr><h6>
<th class="col-sm">Bill No</th>
<th class="col-sm" >Date</th>
<th class="col-sm" >Particulars</th>
<th class="col-sm" >Op.Stock</th>
<th class="col-sm-7">Pur/Prod</th>
<th class="col-sm" >Sales/Cons</th>
<th class="col-sm" >Balance</th>
</tr>
</thead>
<tbody>
<?php
$balance = 0;
foreach ($query as $row): ?>
<tr>
<?php $total = 0;
$total += $row['qty'];
$balance += $total;
?>
<td> <?php echo $row['orderno'];?></td>
<td ><?php echo $row['orderdate'];?></td>
<td >PRODUCTION</td>
<td></td>
<td dir="rtl"><?php echo $row['qty'];?></td>
<td></td>
<td><?php echo "$total" ;?></td>
</tr><?php endforeach ?>
<tr><?php foreach ($query1 as $row1): ?>
<td> <?php echo $row1['billno'];?></td>
<td ><?php echo $row1['billdate'];?></td>
<td ><?php echo $row1['accName'];?></td>
<td></td>
<td></td>
<td dir="rtl"><?php echo $row1['salesqty'];?></td>
<td></td>
</tr>
<?php endforeach ?>
</tbody>

How to use jquery-confirm in codeigniter?

I've been trying to use jquery-confirm that is provided by https://craftpip.github.io/jquery-confirm/#ajaxloading . There's no error, but once I tried to delete an, item, the jquery pops up an alert, but when I click "okay" it doesn't delete the item..I don't know where the mistake is. Thanks for the help
This is the php code:
<div class="box">
<div class="box-body">
Input Request
<br><br>
<table id="tabelrequest" class="table table-bordered table-striped">
<thead>
<tr>
<th>No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
<th>Delete</th>
<th>Edit</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach($allrequest as $request)
{
$delete_url = base_url().'admin/deleterequest/'.$request->id_request;
$update_url = base_url().'admin/updaterequest/'.$request->id_request;
$add_url = base_url().'admin/datafotorequest/'.$request->id_request;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $request->item_code; ?></td>
<td><?php echo $request->description; ?></td>
<td><?php echo $request->qty; ?></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-olive btn-flat" class="delete" data-title="Are you sure you want to delete this item?" name="delete" href="<?php echo $delete_url; ?>"><i class="glyphicon glyphicon-trash"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-teal btn-flat" name="update" href="<?php echo $update_url; ?>"><i class="glyphicon glyphicon-pencil"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-red btn-flat" name="add" href="<?php echo $add_url; ?>"><i class="glyphicon glyphicon-camera"></i></a></td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</div>
</div>
And this is the jquery I took from jquery-confirms.js
<script>
$('#delete').confirm({
content: "",
});
$('#delete').confirm({
buttons: {
hey: function(){
location.href = this.$target.attr('href');
}
}
});
</script>
Instead of this
<td class="col-xs-1" style="text-align: center;">
<a class="btn bg-olive btn-flat" class="delete" data-title="Are you sure you want to delete this item?" name="delete" href="<?php echo $delete_url; ?>">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
I'll use (onclick="return confirm()")
<td class="col-xs-1" style="text-align: center;">
<a class="btn bg-olive btn-flat" class="delete" onclick="return confirm('Are you sure you want to delete this item?');" href="<?php echo $delete_url; ?>">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
I think you have to use like this
<div class="box">
<div class="box-body">
Input Request
<br><br>
<table id="tabelrequest" class="table table-bordered table-striped">
<thead>
<tr>
<th>No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
<th>Delete</th>
<th>Edit</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach($allrequest as $request)
{
$delete_url = base_url().'admin/deleterequest/'.$request->id_request;
$update_url = base_url().'admin/updaterequest/'.$request->id_request;
$add_url = base_url().'admin/datafotorequest/'.$request->id_request;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $request->item_code; ?></td>
<td><?php echo $request->description; ?></td>
<td><?php echo $request->qty; ?></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-olive btn-flat delete" data-title="Are you sure you want to delete this item?" name="delete" href="<?php echo $delete_url; ?>"><i class="glyphicon glyphicon-trash"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-teal btn-flat" name="update" href="<?php echo $update_url; ?>"><i class="glyphicon glyphicon-pencil"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-red btn-flat" name="add" href="<?php echo $add_url; ?>"><i class="glyphicon glyphicon-camera"></i></a></td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</div>
</div>
<script>
$('.delete').confirm({
content: "",
});
$('.delete').confirm({
buttons: {
hey: function(){
location.href = this.$target.attr('href');
}
}
});
</script>
You need to create ajax request
HTML
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-olive btn-flat" class="delete" data-title="Are you sure you want to delete this item?" name="delete" href="#" onclick="deleteRecord('<?php echo $request->id_request;?>');"><i class="glyphicon glyphicon-trash"></i></a></td>
AJAX
function deleteRecord(id)
{
jQuery.ajax({
type: "GET",
url: '/admin/deleterequest/'+id,
async: false,
success: function (data)
{
alert('success');
}
});
}

want to set the border to table by exporting data to excel sheet in codeingiter

I am having problem setting a border to a table.
When I export the table from an Excel sheet I get the values without a border.
I want to fix the border to the table but it shows an error.
<div class="dvData">
<table>
<thead>
<tr>
<th>Customer Name</th>
<th>Email Id</th>
<th>Mobile Number</th>
<th>Residential Address</th>
<th>Temporary Address</th>
<th>Company name</th>
<th>Company type</th>
<th>Bank Name</th>
<th>Branch Name</th>
</tr>
</thead>
<tbody>
<?php foreach ($results as $result) { ?>
<tr>
<td>
<?php echo $result->first_name;?></td>
<td>
<?php echo $result->email;?></td>
<td>
<?php echo $result->phone_num;?></td>
<td>
<?php echo $result->address1;?></td>
<td>
<?php echo $result->address2;?></td>
<td>
<?php echo $result->company_name;?></td>
<td>
<?php echo $result->customer_type;?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
this is my script code:
jQuery(document).ready(function() {
$(".dvData").hide();
EditableTable.init();
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('.dvData').html());
e.preventDefault();
});
});
this is php code:
<input type="button" class="btn btn-info pull-right" id="btnExport" value=" Export" />
without setting border am getting output like this .. refer noborder.png table contain data with no border.
When I'm setting border value to table am getting output like this.. border.png
]2
<table border="1" width="1000px" cellspacing="0" cellpadding="0">
Please make this file, suppose export.php :
<?php
header("Content-type: application/vnd-ms-excel");
header("Content-Disposition: attachment; filename=listing-export.xls");
?>
<table border="1">
<thead>
<tr>
<th>Customer Name</th>
<th>Email Id</th>
<th>Mobile Number</th>
<th>Residential Address</th>
<th>Temporary Address</th>
<th>Company name</th>
<th>Company type</th>
<th>Bank Name</th>
<th>Branch Name</th>
</tr>
</thead>
<tbody>
<?php
foreach ($results as $result)
{
?>
<tr>
<td><?php echo $result->first_name;?></td>
<td><?php echo $result->email;?></td>
<td><?php echo $result->phone_num;?></td>
<td><?php echo $result->address1;?></td>
<td><?php echo $result->address2;?></td>
<td><?php echo $result->company_name;?></td>
<td><?php echo $result->customer_type;?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Than make other file such as do_export.php and code as following :
<script>
function exportfile()
{
var export_file = window.open("export.php","", "left=0,top=0,width=500,height=300,toolbar=0,scrollbars=1,status=0");
export_file.focus();
}
</script>
<input type="Button" value="Export" onclick="exportfile()" />
After making above two files, please run second file (do_export.php) and click on Export button.
Thanks...

Categories