I am selecting an item from a select-option tag in a table to populate records from a database to fill another input field, but unfortunately, it only works for the first table row. When I add another table row with jquery, it does not work in the new added table row.
<table class="table table-borderd table-hover">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Discount %</th>
<th>Total</th>
<th><input type="button" class="btn btn-primary addmore" value="+"></th>
</tr>
</thead>
<tbody id="itemlist2" class="detailss">
<tr>
<td>
<select class="select-product form-control" name="product_name[]">
<option value="">
</option>
<?php
foreach ($product as $key ):
?>
<option value="<?php echo $key['id'] ?>">
<?php echo $key['product_name'] ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input type="text" name="price[]" class="price form-control" value="">
</td>
<td><input type="text" name="quantity[]" class="form-control"></td>
<td><input type="text" name="discount[]" class="form-control"></td>
<td><input type="text" name="total[]" class="form-control"></td>
</tr>
</tbody>
</table>
The script that add new row to table
<script>
var i=$('#itemlist2 tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><select class="select-product form-control" name="product_name[]"> <option value=""> </option><?php foreach ($product as $key ): ?><option value="<?php echo $key['id'] ?>"><?php echo $key['product_name'] ?></option><?php endforeach; ?></select></td>';
html += '<td><input type="text" name="price[]" class="price form-control" value=""></td>';
html += ' <td><input type="text" name="quantity[]" class="form-control"></td>';
html += '<td><input type="text" name="discount[]" class="form-control"></td>';
html += '<td><input type="text" name="total[]" class="form-control"></td>';
html += '</tr>';
$('#itemlist2').append(html);
i++;
});
</script>
The onchange function with ajax
<script>
$(function() {
$(document).on('change', '.select-product', function(){
$(this).change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax({
type: "GET",
url: "<?php echo site_url('/product/view_data'); ?>",
data: dataString,
cache: false,
success: function(html){
$('.price').parent().parent().find('.price').val(html);
}
});
});
});
});
</script>
Thanks for your time!
Use delegate for dynamically added element. For example
$(document).delegate( ".select-product", "change", function() {
$(this).change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax({
type: "GET",
url: "<?php echo site_url('/product/view_data'); ?>",
data: dataString,
cache: false,
success: function(html){
alert(html);
// $("#price").val(html);
}
});
});
});
});
I hope it will help you.
New added elements does not have the event binding.
The quickest fix is just change your event binding code from
$('input').change(function () {
// Do some stuff.
});
to
$(document).on('change', 'input', function() {
// Do some stuff.
});
Check these following lines:
html += '<td><select class="select-product form-control" id="product" ....
and
var id=$("#product").val();
You are assigning an id to multiple rows and trying to get the values using id which is unique. That's why you are getting the data for first row only.
To solve this, refer it using class and $(this) to get the value of current instance.
Related
This is my view page code:
when i enter the order no some details is fetched from the table.
This second pic shows that it fetched the data and displayed in the view page:
i have used the ajax code to fetch the data.
Now what i have want is if enter the order no is 1 and save into the another table.
now again same page refresh the content if again enter the order no as 1 it should not be displayed in the view page and alert the msg in ajax .
My controller code:
public function DC_Entry_Insert(){
$this->load->model('User_model');
$result = $this->User_model->DC_insert($_POST);
}
My ajax code:
script type="text/javascript">
$(document).ready(function(){
$('#orderno').on('input change',function(){
var orderno = $("#orderno").val();
$.ajax({
type: "POST",
url: "<?php echo base_url();?>Inventory/Orderfetch",
data: {
orderno:orderno
},
datatype: 'json',
success: function (data) {
$('#Product_Name_div').html(data);
}
});
});
});
</script>
my model code:
function fetch_item($orderno){
$this->db->where("orderno",$orderno);
$this->db->select('*');
$this->db->join('item_master', 'item_master.id = order_item.itname', 'left');
$this->db->from('order_item');
$query_result = $this->db->get()->result();
$output = '<center><table class="table table-bordered table-striped table-xxs" id="tb2">
<tbody>';
if($query_result !='false'){
$i=0;
foreach ($query_result as $key => $value) {
$output .='<tr>
<td><span class="glyphicon glyphicon-remove" id="remove"></span></td>
<td><input style="width:50px" name="sno[]" type="text" class="form-control input-xs" value="'.$value->sno.'" ></td>
<td><input style="width:250px" name="itemname[]" type="text" class="form-control input-xs" value="'.$value->itemname.'" ></td>
<td><input style="width:80px" name="qty[]" type="text" class="form-control input-xs qty" value="'.$value->qty.'" id="qty_'.$i.'" onchange="calculate('.$i.')"></td>
<td><input style="width:90px" name="wgt[]" type="text" class="form-control input-xs" > </td>
<td><input style="width:150px" name="desc[]" type="text" class="form-control input-xs" > </td>
<td><a href="javascript:void(0);" style="font-size:18px;" class="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>
</tr>';
$i++;
}
$output .="</tbody>
</table></center>";
echo $output;
}
}
You can do validation before posting to server using javascript or you can do server side. A small example if your are sending data
data: {
orderno:orderno
}
Then you can check on your backend
if($this->input->post('orderno')=='10){
$flag='1';
}else{
$flag='1';
}
return $flag;
then you can show it on html tag or you can show on javascript alert.
I going to display the value from the database to the dynamically created textfields to each table cell using JQuery. (Note that the fetch values Im going to display are not all same.) The 'lvl' (e.g. lvl1 or lvl2) are the values from database, not an id or class of textfields.
Here's what it looks like..
| itm1 | itm2 | itm3 | itm4 | itm5
------|------|------|------|------|-----
skill1| lvl2 | lvl3 | lvl1 | lvl4 | lvl0
------|------|------|------|------|-----
skill2| lvl1 | lvl0 | lvl4 | lvl2 | lvl1
------|------|------|------|------|-----
skill3| lvl4 | lvl2 | lvl3 | lvl0 | lvl1
My JQuery,
$('tbody tr td').click(function(){
var row = $(this).closest('td');
var skill = row.find('.skillID').val();
var item = row.parent().children().index(row);
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>controller/get_level",
data: {'Skill_ID':skill,'Item_ID':item},
cache: false,
success: function(data){
alert("Level "+data);
}
});
});
The above code was successful in alert and click func, but I need to display the data in textfield by clicking the "td" or when the page was loaded, the value would display automatically.
view,
<thead>
<tr>
<td> </td>
<?php foreach($items as $item): ?>
<td><?php echo $item->ItemID ?></td>
<?php endforeach; ?>
</tr>
</thead>
<?php foreach($skills as $skill): ?>
<tbody>
<tr>
<?php for($i=0; $i<count($items); $i ++){ ?>
<td><input type="text" value="" />
<input type="hidden" class="skillID" value="<?php echo $skill->Skill_ID" ?> />
</td>
<?php } ?>
</tr>
</tbody>
<?php endforeach; ?>
$('tbody tr td').click(function() {
var col = $(this).closest('td');
var skill = col.find('.skillID').val();
var index = col.index();
var item = $('table thead tr').find('td').eq(index).text();
console.log('Skill_ID - ' + skill + ';\nItem_ID - ' + item);
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>controller/get_level",
data: {
'Skill_ID': skill,
'Item_ID': item
},
cache: false,
success: function(data) {
col.find("input[type=text]").val("Level " + data);
}
});
});
table tr td {
border: 1px solid black;
}
input {
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td></td>
<td>Item1</td>
<td>Item2</td>
<td>Item2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Skill 1</td>
<td title="lvl2">
<input type="hidden" class="skillID" value="lvl2" />
<input type="text" value="" />
</td>
<td title="lvl1">
<input type="hidden" class="skillID" value="lvl1" />
<input type="text" value="" />
</td>
<td title="lvl3">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl3" />
</td>
</tr>
<tr>
<td>Skill 2</td>
<td title="lvl3">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl3" />
</td>
<td title="lvl2">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl2" />
</td>
<td title="lvl1">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl1" />
</td>
</tr>
</tbody>
</table>
Hope this works. Since I don't have your public url for making ajax. The snippet wont work.
If you need to attain this with out clicking, then you have to change your script to doc ready method like:
$(function() {
$('tbody tr td').each(function() {
var col = $(this);
var skill = col.find('.skillID').val();
var index = col.index();
var item = $('table thead tr').find('td').eq(index).text();
console.log('Skill_ID - ' + skill + ';\nItem_ID - ' + item);
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>controller/get_level",
data: {
'Skill_ID': skill,
'Item_ID': item
},
cache: false,
success: function(data) {
col.find("input[type=text]").val("Level " + data);
}
});
});
});
I have an issues for searching and displaying data to table with javascript. i have data with format json but all it can't displayed on table just 1st row, while on console log.data five rows displayed. how to solved this problem. thanks you so much for you guys i hope here this solved.
This is the data:
var data =[
{header_id:"TR100001" detail_id:"2" item_code:"SPH001" price:"4000" weight:"2"},
{header_id:"TR100001" detail_id:"3" item_code:"SPH002" price:"4500" weight:"2"},
{header_id:"TR100001" detail_id:"4" item_code:"SPH003" price:"30000"weight:"2"},
{header_id:"TR100001" detail_id:"5" item_code:"SPH004" price:"45000"weight:"2"}];
This's View:
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table id="buy_transaction" class="table table-bordered table-hover table-striped sticky-header">
<thead class="bg-success">
<tr>
<th width="1">☑</th>
<th width="5"><b>Detail</b></th>
<th><b>Item Code</b></th>
<th><b>Price</b></th>
<th><b>Weight</b></th>
</tr>
</thead>
<tbody id="dataTable2">
<table id="buy_transaction">
<tbody id="dataTable2">
<td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td>
<td><input type="text" id="detail_id" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1"> </td>
<td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td>
<td><input type="text" class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly ></td>
<td><input type="text" class="price form-control" id="price" name="price[]" value="<?php echo $detail->price; ?>" readonly ></td>
<td><input type="text" class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td>
</table>
</div>
</div>
</div>
This's Javascript Code :
<script type="text/javascript">
function getdHeaderid(header_id){
var header_id = header_id.val();
$.ajax({
type : "post",
data : {header_id:header_id},
url : "<?php echo base_url();?>index.php/transaction/selltransaction/get_dtHeaderid",
dataType:"json",
cache :false,
success: function(data){
console.log(data);
for(var i=0; i< data.length; i++){
var obj=data[i];
$(".header_id").val(obj.header_id);
$(".detail_id").val(obj.detail_id);
$(".item_code").val(obj.item_code);
$(".price").val(obj.price);
$(".weight").val(obj.weight);
}
}
});
}
$(document).ready(function() {
$('.header_id').on('keyup', function() {
getdHeaderid($(this));
});
});
</script>
Your question wording is pretty hard to understand, but taking my best guess as to what you're looking for - you want a table row for each element from data. If so, here is how you can do that.
var data = [{
header_id: "TR100001",
detail_id: "2",
item_code: "SPH001",
price: "4000",
weight: "2"
},
{
header_id: "TR100001",
detail_id: "3",
item_code: "SPH002",
price: "4500",
weight: "2"
},
{
header_id: "TR100001",
detail_id: "4",
item_code: "SPH003",
price: "30000",
weight: "2"
},
{
header_id: "TR100001",
detail_id: "5",
item_code: "SPH004",
price: "45000",
weight: "2"
}
];
function getdHeaderid(header_id) {
// make ajax call...
// ...
// success callback (data) {
var tableHTML = [];
for (var i = 0; i < data.length; i++) {
var obj = data[i];
var newRow = $(".clone-row").clone(true);
newRow.removeClass("clone-row");
newRow.find(".header_id").val(obj.header_id);
newRow.find(".detail_id").val(obj.detail_id);
newRow.find(".item_code").val(obj.item_code);
newRow.find(".price").val(obj.price);
newRow.find(".weight").val(obj.weight);
tableHTML.push(newRow);
}
$("#dataTable2 tr:not(.clone-row)").remove();
$("#dataTable2").append(tableHTML);
// } end success callback
}
getdHeaderid();
.clone-row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="buy_transaction">
<tbody id="dataTable2">
<tr class="clone-row">
<td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td>
<td><input type="text" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1"> </td>
<td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td>
<td><input type="text" class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly></td>
<td><input type="text" class="price form-control" id="price" name="price[]" value="<?php echo $detail->price; ?>" readonly></td>
<td><input type="text" class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td>
</tr>
</tbody>
</table>
Your table only has a single row within which you can assign data. Also, you should wrap your table data tags with the <tr></tr> tags, to indicate that this is a distinct row in the table. When iterating through your data, you should be creating new rows, for each set of data in your json. Something like this:
var table = document.getElementById("buy_transaction");
for(var i = 0; i<data.length; i++) {
var obj = data[i];
var row = table.insertRow(i);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
var cell4 = row.insertCell(1);
var cell5 = row.insertCell(1);
// Add some text to the new cells:
cell1.innerHTML(obj.header_id);
cell2.innerHTML(obj.detail_id);
cell3.innerHTML(obj.item_code);
cell4.innerHTML(obj.price);
cell5.innerHTML(obj.weight);
};
This way you're for each iteration of the for loop, you're creating a new row for your table and you're inserting the proper values.
Am trying to get the data from database and bind to html table using jquery in php. results showing correctly. but i want to fetch the data into inside text box which means the fetched data should be editable. please do my needs.
my code is.
$.ajax({
type: "POST",
url: "add_temp_purchase",
cache: false,
data: 'itemnum='+itemnum+'&quantity='+quantity+'&customer_id='+customer_id,
dataType: "html",
success: function(returnhtml) {
//alert(customer_id);
$.ajax({
type: "GET",
url: "gettempid",
cache: false,
data: 'customer_id='+customer_id,
dataType: "html",
beforeSend: function() {
$('#metable').html('loading please wait...');
},
success: function(htmldata) {
var order_id = order_id;
var customer_id = customer_id;
var item_id = itemnum;
var count = quantity;
alert(customer_id);
$(".metable").find('tbody').append('<tr><td>' + order_id +
'</td><td><input type="text">' + customer_id +
'</td><td><input type="text">' + item_id +
'</td><td><input type="text">' + count +
'</td></tr>');
}
});
My html code is:
<table class="table table-striped table-hover metable table-bordered" id="editable-sample">
<thead>
<tr>
<th>Id</th>
<th>Customer Id</th>
<th>Item Number</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<?php
foreach ($tempresults as $result)
{
?>
<tr class="">
<td><input type="text" name="order_id" id="order_id" value="<?php echo $result->order_id;?>"></td>
<td><input type="text" name="customer_id" id="customer_id" value="<?php echo $result->customer_id;?>"></td>
<td><input type="text" name="item_id" id="item_id" value="<?php echo $result->item_id;?>"></td>
<td><input type="text" name="count" id="count" value="<?php echo $result->count;?>"></td>
</tr>
<?php
}
?>
</tbody>
</table>
Thanks,
This may not be the most elegant solution, but did you try this?
$(".metable").find('tbody').append('<tr>
<td><input type="text" value="' + order_id + '"></td>
<td><input type="text" value="' + customer_id + '"></td>
<td><input type="text" value="' + item_id + '"></td>
<td><input type="text" value="' + count + '"></td>
</tr>');
i want call the same ajax function for multiple buttons please help me the code is given below. this code will generate buttons and when we click on the buttons it prints the details ...please solve. This code will generate buttons in table.
<head>
<script>
$(document).ready(function()
{
$("#save").click(function()
{
var sel = $("#response").val();
var fudate=$("#fdate").val();
var cmd=$("#cm").val();
var id=$("#id").val();
$.ajax(
{
type: "POST",
url: "autosave.php",
data: {response:sel,fdate:fudate,cm:cmd,id:id},
success: function(result)
{
alert('result');
$a= $("#ak").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="company_details">
<div id="ak"></div>
<table border="1" align="left">
<tr>
<th >Company</th>
<th>Contact Person</th>
<th>Contact Person's No.</th>
<th>HR</th>
<th>HR's No.</th>
<th>Current Vacancies</th>
<th>Response</th>
<th>Follow Up Date</th>
<th>Comment</th>
<th></th>
<th>Edit</th>
</tr>
<?php
$con=mysql_connect("localhost","root") or die("Error In Connection:-".mysql_error());
mysql_select_db("ttcs",$con) or die("Error In DB Selection:-".mysql_error());
$sql="select * from company_details";
$rs=mysql_query($sql) or die(mysql_error());
while($row=mysql_fetch_array($rs))
{
?>
<tr>
<td>
<input type="text" name="name" value= <?php $e=$row[0];echo $row[1];?>></td>
<td><input type="text" name="cp" value= <?php echo $row[7]; ?>></td>
<td><input type="text" name="cpn" value= <?php echo $row[9]; ?>></td>
<td><input type="text" name="hr" value= <?php echo $row[10]; ?>></td>
<td><input type="text" name="hrn" value= <?php echo $row[12]; ?>></td>
<td>
<?php
$sql2="select * from vacancies where company_id='$e'";
$rs2=mysql_query($sql2);
if($rs2)
{
while($row2=mysql_fetch_array($rs2))
{?>
<textarea name="cv" value=<?php echo $row2[1];?>></textarea>
<?php }}?>
</td>
<td>
<select name="response" id="response">
<option value="Not interested">Not Interested</option>
<option value="Not responding">Not Responding</option>
<option value="follow up">Follow up</option>
<option value="Interested">Interested</option>
</select></td>
<?php
$sql1="select * from call_details_company where company_id=$row[0]";
$rs1=mysql_query($sql1);
$row1=mysql_fetch_array($rs1);
?>
<input type="date" name="fdate" id="fdate" value=<?php echo $row1[3];?>>
<input type="text" name="cm" id="cm" value=<?php echo $row1[5];?>>
<button id="save" >save</button>
</td>
</tr>
<?php
}
?>
</body>
ID of an element must be unique, so within the loop don't use ID, change the id of the button to class value then use the input element's name to find the relative elements within the tr
$(document).ready(function () {
$(".save").click(function () {
var $tr = $(this).closest('tr')
var sel = $tr.find("select").val();
var fudate = $tr.find('input[name="fdate"]').val();
var cmd = $tr.find('input[name="cm"]').val();
//need to fix this selector #id too, not able to locate it in the given html structure
var id = $tr.find("#id").val();
$.ajax({
type: "POST",
url: "autosave.php",
data: {
response: sel,
fdate: fudate,
cm: cmd,
id: id
},
success: function (result) {
alert('result');
$a = $("#ak").html(result);
}
});
});
});
use like this
<script>
function ajaxCallDemo() {
var sel = $("#response").val();
var $tr = $(this).closest('tr');
var cmd = $tr.find("input[name='cm']").val();
var fudate = $tr.find("input[name='fdate']").val();
var id = $tr.find("#id").val();
$.ajax({
type: "POST",
url: "autosave.php",
data: {
response: sel,
fdate: fudate,
cm: cmd,
id: id
},
success: function(result) {
alert('result');
$a = $("#ak").html(result);
}
});
}
$(document).ready(function() {
$("#save").click(function() {
ajaxCallDemo();
});
$("#save2").click(function() {
ajaxCallDemo();
});
});
</script>