my code is here
<table id="tb" width="100% style="float:left; overflow:auto">
<tr >
<th width="300px" style=" text-align: left; margin-left: 15px">Item</th>
<th width="300px" style=" text-align: left; margin-left: 15px">Description</th>
<th width="100px" style="font-size: 60%">Average<br> Price</th>
<th width="150px">Quantity</th>
<th width="150px">Price</th>
<th width="150px">Discount</th>
<th width="200px">Amount</th>
<th width="50px"></th>
<th></th>
</tr>
<tr style="height: 35px">
<td><select style="font-size: 100% ;padding: 0 0 0 0; height: 30px; display: inline-block; width: 100%" ntype="text"
class="form-control item" name="item[]" required >
<?php $this->load->view('f-select-item'); ?></td>
<td><input style="font-size: 100% ;padding-left: 10px; height: 30px; display: inline-block; width: 100%" ntype="text"
class="form-control" name="item_note[]" /></td>
<td class="priced"><input
style="height: 30px; text-align: right" pattern="[0-9]+" value=""
maxlength="10" minlength="0" min='0' max='50000000' type="text" name="price1[]" class="form-control ppp" /></td>
<td><input style="height: 30px;text-align: right" id ="num" maxlength="10" minlength="0" pattern="[0-9]+" type="text" name="quantity[]" class="form-control quantity" /></td>
<td><input style="height: 30px; text-align: right" pattern="[0-9]+" maxlength="10" minlength="0" min='0' max='50000000' type="text" name="price[]" class="form-control price" /></td>
<td><input style="height: 30px;text-align: right" pattern="[0-9]+" maxlength="10" minlength="0" type="text" name="discount[]" class="form-control discount" /></td>
<td><input style="height: 30px;text-align: right" type="text" maxlength="30" minlength="0" name="amount[]"
class="form-control amount" value="" readonly/></td>
<td style="height: 25px;text-align:right"><a href="javascript:void(0);" style="text-decoration: none; font-size: 80%; padding: 0 0 0 5; font-size:18px;" id="addMore" title="Add More Row">
<span style="font-size:80%" class="glyphicon glyphicon-plus">
</span>
</a><a href='javascript:void(0);' class='remove' title="Remove Row">
<span style="padding: 0 0 0 0; text-align:right; color:lightgray" class='glyphicon glyphicon-remove'></span></a></td>
<td><input id ="num" style="text-align: right" type="hidden" name="amount1[]" class="form-control amount1" style="font-size: 0%" value="0" />
</td>
</tr>
</table>
when I call ajax new input what I need is placed here within <td ="class priced">
Ajax is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".item").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "pp",
data: dataString,
cache: false,
success: function(html)
{
$(".priced").html(html);
}
});
});
});
</script>
and ajax called file is this which is 'pp';
<?php
// Database Connection
$username = 'root';
$password = '';
$db = "acccccc";
try {
$conn = new PDO('mysql:host=mbhost;dbname='.$db.'', $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
/////////////////////////////////////////////////////////////////////////////////////////////////
if($_POST['id']){
$id= $_POST['id'];
$sql=$conn->prepare("select * from items where '".$id."' in (c_v_id, item_id) ");
$sql->execute();
if($sql->rowCount() > 0){
$sum = $amount= $q1 = $q2 = $am = $am1 = $am2 = $sumq =0;
while($row=$sql->fetch(PDO::FETCH_ASSOC)){
if($id == $row['c_v_id']){
$am = $row['amount'];
$q1 = $row['quantity'];
if($am != 0 and $q1 != 0 ){
$amount = $row['amount']/$row['quantity'];
} else{ $amount = 0;}
}elseif($id == $row['item_id']){
$am2 = $row['amount'];
$q2 = $row['quantity'];
if($am2 != 0 and $q2 != 0 ){
$amount = -$row['amount']/$row['quantity'];
}else{ $amount = 0;}
}
$sum += $amount;
$sumq = $q1 - $q2;
}
?>
<input title="<?php echo 'Available Quantity: '.$sumq; ?>" style="height: 30px; text-align: right" pattern="[0-9]+" value="<?php echo $sum; ?>"
maxlength="10" minlength="0" min='0' max='50000000' type="text" name="price1[]" class="form-control ppp" />
<?php
}else{
?>
<input title="Zero Quantity" style="height: 30px; text-align: right" pattern="[0-9]+" value="0"
maxlength="10" minlength="0" min='0' max='50000000' type="text" name="price1[]" class="form-control ppp" />
<?php }
}
?>
this code is ok for one time call...
but td is multiple times as [] after jquet dynamically added rows so what should I do .. each td should have seperate response ... this time I call in each td but response is same for all tds..
please need an answer... thanks in advance.
You should not make ajax call in loop you should make each call after the previous call succeeded but in a setTimeout function. Here is a code structure that will do it recursively and should solve your problem. You yourself must decide the condition to end recursive function:
function myAjaxCall(){
$.ajax
({
type: "POST",
url: "pp",
data: dataString,
cache: false,
success: function(html)
{
$(".priced").html(html);
if(!/* the condition for Last ajax call*/)
setTimeout(myAjaxCall,0);
}
});
}
Note that another problem with your code maybe is you replace the html after each call. Instead of $(".priced").html(html); maybe it's better to use $(".priced").append(html).
try with jquery.on(). Wordpress is using this function. reed the doc:- http://api.jquery.com/on/ usage:-
$(document).on('click','.ajax-loaded-content',function(){ myfunc();})