Pass the id from database to in open modal box - javascript

What I need to do is how I can pass the id depends on id of row to open inside of modal box? I need to have an edit within my table. I have below my table with my php mysql records. But how I can pass the id? Any help will appreciate !
<table width="70%" border="0" cellpadding="0" cellspacing="0" class="table-list">
<tr>
<th width="40%">Item</th>
<th width="20%">Category Code</th>
<th width="20%">Item Code</th>
<th width="20%">Edit</th>
<th width="20%">Delete</th>
</tr>
<?php
$res = $mysqli1->query("select * from code order by item_code ASC");
while($r = $res->fetch_assoc()){
echo "<tr>
<td>".$r['item']."</td>
<td>".$r['cat_code']."</td>
<td>".$r['item_code']."</td>
<td><a href='item_edit.php?id=".$r['id']."'</a></td>
<td><a href='#' id='".$r['id']."' class='del'>Delete</a></td>
</tr>";
}
?>
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right">Close</td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
</tr>
<div>
Javascript
$(document).ready(function(){
$("#add_new, #edit").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
});

You can try with below idea:
Fetch Value from custom attribute 'data-id'
in jQuery
var someVariable = $("#someElement").data("id");

Related

How to get the row id onClick in jQuery/JavaScript?

I have a table populated with dynamic data. the last column has a button which when I click I would like to pass the row id to the JS function.
I need the id because I am doing a POST Ajax request and on success I want to take the response data and update the selected row with new data.
This is what I would do to insert a new row:
var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();
but what can I do to get the row ID and update it with the response data?
EDIT. Datatable:
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach (get_all_customers_list() as $user) { ?>
<tr>
<td>
<b> <?php echo $user["recipient_name"]; ?></b>
</td>
<td>
<?php echo $user["registration_date"]; ?>
</td>
<td>
<button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button>
</td>
</tr>
<?php }?>
</tbody>
</table>
Since you are only wanted to get the row id of the clicked row edit button. You can simply use table.row function and pass the actual tr of the clicked button.
Demo (Showing the actual id (1, 2) which is stored as name)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//Getting the actual table ID
var row = $(_this).parents('tr')[0];
//Data table row id
console.log(table.row(row).data()[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
Demo (Showing the actual index of table - Index start from 0 to depending on how many rows you have)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//get the closest of clicked edit button
var tr = $(_this).closest("tr");
//get the index of row
var rowindex = tr.index();
//Index of row
console.log(rowindex)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
this is my simple answer:
var table = $('#table-values');
$('#table-values').on( 'click', 'tr', function(){
var id = this.id;
alert( 'Clicked row id '+id );
});
Easy. :)

PHP Ajax javascript looping through table with input fields

How can i get specific input values of each row when i click the button using ajax javascript. here is my code
here is my example of getting the data from database dynamically with input fields and button individually
<div style="width:100%; min-height:275px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablelist">
<form action="" method="get" name="formwebservice">
<tr>
<td colspan="3">
<div class="pgLoading">
<table style="border:1px solid #FF00A6; border-top:none;" class="tablelisttable"
border="0" cellspacing="0" cellpadding="0">
<tr class="tablelisttr">
<td>Branch ID</td>
<td>Branch Code</td>
<td>Branch Name</td>
<td>Last Sync Date</td>
<td>Start Date</td>
<td>End Date</td>
<td>Synchronization</td>
<td></td>
</tr>
<?php
$query_branch="SELECT * FROM Branch";
$query_branch_result=mysqli_query($con,$query_branch) or die(mysqli_error($con));
while ($row = mysqli_fetch_assoc($query_branch_result)) {
echo "<tr class='listtr' align='center'>
<td>".$row['BranchID']."</td>
<td>".$row['BranchCode']."</td>
<td>".$row['BranchName']."</td>
<td>2018-04-14 05:39:57</td>
<td><input type='text' name='startdate'> </td>
<td><input type='text' name='enddate'></td>
<td><input type='button' name='sync' value='Synchronize'></td>
<td>0/0</td>
</tr>";
}
?>
</table>
</div>
</td>
</tr>
</form>
</table>
</div>
index.js
$(function(){
$('[name=sync]').click(function(){
$.ajax({
type : "get",
data : $('[name=formwebservice]').serialize(),
url : "save.php",
success : function(data){
$('.loader').html(' ');
$('.pgLoading').html(data).hide().fadeIn('slow');
},
beforeSend : function(){
$('.loader').html('Loading... Please wait...').hide().fadeIn();
}
});
}); });
save.php
if(isset($_GET['startdate']) && isset($_GET['enddate'])) {
$StartDate=$_GET['startdate'];
$EndDate=$_GET['enddate'];
echo $StartDate;
echo $EndDate;
}else{
echo "NO DATA INPUT";
}
my problem is the $_GET['startdate'] and $_GET['enddate'] is not set so im always getting no data input.

jQuery reset a single table during onchange

I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());

How to store all column to my database? by Javascript

///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</table>
Above is my code, I need update all column of table to my database, if I click submit, just update the last column only.
What wrong in my code? if use javascript, how to solve it?
<?php
include 'connect.php';
$index= $_POST["indexNumber"];
$item1= $_POST["item"];
$number1= $_POST["number"];
$query=mysql_query("UPDATE `file` SET `item`='$item1' WHERE `indexNumber`='$index';");
echo "<script language=javascript>alert('Update Successful');window.location='index.php'</script>";
?>
Above is update.php
You need to use array for this.
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
Please check updated script
///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</table>

Jquery.each() iteraring only once

I have a table which is being filled dynamically on button click
This is my table
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
I am adding to this table on button click using jquery
var stock = Number($('#currentstockinput').val());
var qty = Number($('#tablettosellinput').val().replace(/[^0-9\.]+/g,""));
var pertabprice = Number($('#prodpricetabcapinput').val().replace(/[^0-9\.]+/g,"")).toFixed(2);
var subtotal = qty * pertabprice;
var pkgdate = $('#pkgdateinput').val();
var manufactdate = $('#manufactinput').val();
var expdate = $('#expdateinput').val();
var batchno = $('#s2_1 option:selected').text();
$('#tablebody').prepend('<tr>'+
'<td class="prodname">'+prod+'</td>'+
'<td class="category">'+type+'</td>'+
'<td class="pkgdate">'+pkgdate+'</td>'+
'<td class="manufactdate">'+manufactdate+'</td>'+
'<td class="expdate">'+expdate+'</td>'+
'<td class="batchno">'+batchno+'</td>'+
'<td class="unitprice">'+pertabprice+'</td>'+
'<td class="qty">'+qty+'</td>'+
'<td class="subtot">'+subtotal+'</td>'+
'<td>'+
'<button class="btn btn-link" type="button">Remove</button>'+
'</td>'+
'</tr>');
Upto this, it is working fine
Now I am trying to assign value from each row to dropdown list on button click before submitting my form to servlet
$('#tSortable_2 tbody tr').each(function() {
alert('Adding option');
$('<option>').val($(this).find(".prodname").text()).text($(this).find(".prodname").text()).appendTo('#prodnd');
$('<option>').val($(this).find(".category").text()).text($(this).find(".category").text()).appendTo('#categoryd');
$('<option>').val($(this).find(".pkgdate").text()).text($(this).find(".pkgdate").text()).appendTo('#pkgdated');
$('<option>').val($(this).find(".manufactdate").text()).text($(this).find(".manufactdate").text()).appendTo('#manufactd');
$('<option>').val($(this).find(".expdate").text()).text($(this).find(".expdate").text()).appendTo('#expd');
$('<option>').val($(this).find(".batchno").text()).text($(this).find(".batchno").text()).appendTo('#batchd');
$('<option>').val($(this).find(".unitprice").text()).text($(this).find(".unitprice").text()).appendTo('#unitd');
$('<option>').val($(this).find(".qty").text()).text($(this).find(".qty").text()).appendto('#qtyd');
$('<option>').val($(this).find(".subtot").text()).text($(this).find(".subtot").text()).appendTo('#subtotd');
})
Now if I have multiple rows in my table the above .each() iterates only once and submits the form.
My form tag contains this code
<form action="customerbill" method="post" id="submittest">
<div class="head clearfix">
<div class="isw-grid"></div>
<h1>Purchase Cart</h1>
</div>
<div class="block-fluid table-sorting clearfix">
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
</div>
<select name="prodnd" id="prodnd" style="display:none" >
</select>
<select name="categoryd" id="categoryd" style="display:none" >
</select>
<select name="pkgdated" id="pkgdated" style="display:none" >
</select>
<select name="manufactd" id="manufactd" style="display:none" >
</select>
<select name="expd" id="expd" style="display:none" >
</select>
<select name="batchd" id="batchd" style="display:none" >
</select>
<select name="unitd" id="unitd" style="display:none" >
</select>
<select name="qtyd" id="qtyd" style="display:none" >
</select>
<select name="subtotd" id="subtotd" style="display:none" >
</select>
<div class="toolbar clear clearfix">
<div class="right">
<div class="btn-group">
<button id="printreport" type="submit" class="btn btn-small btn-warning" onClick="submitForm()"><span>Print</span></button>
</div>
</div>
</div>
</form>
The problem is that the .each() function iterates only once and only the values inside the first row are getting popuated in the dropdown lists.
The .each() function iterates only once when there are multiple rows in table.
You could try this, but I do not believe it will work right off the bat. I need to see more information, but you need to try something new.
$('#tSortable_2').find('tbody').find('tr').each(function(){ //do this });
This will at least give you the array you're looking for in a more correct way. (Less wasteful way?) It isn't a huge fix, or even a real fix it is just something new so try that and we will go from there. Also... fiddle.

Categories