We Keep Coding

How to make the data available for all the rows in a table

My problem is the fetching is correctly works on first row
<script type="text/javascript">
$(document).ready(function () {
$("#tb3").on('input change', function () {
$('#tb3 > tbody > tr').each(function () {
var code = $(this).find('#Product_Code').val();
//var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
//var code = data.find("Product_Code").val('');
$.ajax({
type: "POST",
url: "<?php echo base_url();?>TipUp_Loan/fetch",
data: {
code: code
},
datatype: 'json',
success: function (data) {
var json = data,
obj = JSON.parse(json);
$("#Product_Name").val(obj.itemname);
$("#Rate").val(obj.salrate);
//alert(obj);
}
});
});
});
});
</script>
table code:
<table>
<thead>
<tr>
<th></th>
<th>Product Code</th>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr >
<td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
<td>
<input style="width:80px" type="text" id="Product_Code" class="form-control input-xs Product_Code " onkeyup="fetch()" name="Product_Code[]" required>
</td>
<td ><input style="width:300px" type="text" id="Product_Name" class="form-control input-xs" name = "Prdtname[]" > </td>
<!--value="<?php echo $row['Product_Name']; ?>"-->
<td><input style="width:80px" type="text" id="Qty" onkeyup="movetoNext(this, 'addMore3')" class="form-control input-xs" name="Qty[]" required></td>
<td><input style="width:100px" type="text" id="Rate" class="form-control input-xs" value="" name="rate[]" required></td>
<td><input style="width:150px" type="text" id="Value" class="form-control input-xs" name="amount[]" ></td>
<th><span class="glyphicon glyphicon-plus"></span></th>
</tr>
</tbody>
</table>
Fetch code:
public function fetch()
{
$this->load->model('User_model');
$result = $this->User_model->fetch_name($_POST["code"]);
echo json_encode($result);
//echo 'hello'.$code;
}
Model code:
public function fetch_name($code)
{
$query = $this->db->query("select * FROM itemmaster where itcode = $code")->row_array();
return $query;
}
I am trying to fetch the product details by product code when the user hits tab key..what i have to alter to make the fetching available to all the rows of a table..Thanks in advance

You can use onchange like below
<input style="width:80px" type="text" id="Product_Code" class="form-control input-xs Product_Code " onchange="fetchdetails(this)" name="Product_Code[]" required>
fetchdetails function:
function fetchdetails(e) {
var code = e.value;
$.ajax({
type: "POST",
url: "<?php echo base_url();?>TipUp_Loan/fetch",
data: {
code: code
},
datatype: 'json',
success: function (data) {
var json = data,
obj = JSON.parse(json);
var prodName = $(e).closest('tr').find('#Product_Name');
$(prodName).val(obj.itemname);
var rate = $(e).closest('tr').find('#Rate');
$(rate).val(obj.salrate);
}
});
}
You can use it for dynamic rows, it will fetch the current row and populate the records.

Display the value from database to dynamically created textfield in the table using jQuery

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);
}
});
});
});

How to bind a dropdown list according to another dropdown selected value using ajax in aspnet webforms

We have a .aspx page with two HTML SELECT element and we want to load countries in one dropdownlist and load cities of a country in the other.
we are using entity framework to access data.
I tried PageMethods and &Ajax but I could not access my city dropdown from within a static web method. this is what we have so far:
<!-- Signup.aspx-->
<select id="cmb_Region" runat="server" onchange="GetCitiesOfRegion();" datatextfield="region_title" datavaluefield="region_id"></select>
<select runat="server" id="cmb_City" datatextfield="city_title" datavaluefield="city_id" class="ui dropdown"></select>
<script type="text/javascript">
function GetCitiesOfRegion(regionId)
{
$.ajax({
url:"Signup.aspx/GetCities",
type:"POST",
data:'{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert("success");
}
});
}
</script>
and this is code-behind code:
//Signup.aspx.cs
[WebMethod]
public static List<City> GetCities(int RegionId)
{
behbimeh_informationEntities db = new behbimeh_informationEntities();
return db.City.Where(i => i.region_id == RegionId).ToList();
}
Actually the code is not correct and I dont know how to pass the cmb_region selected value to the webmethod? and I dont know how to bind the cmb_city to the returned List of cities.
please share your knowledge. thanks...

To get cmb_Region value
var regionId = $('#<%= cmb_Region.ClientID %>').val();
To get cities by region and bind at client side
[WebMethod]
public static string GetCities(int RegionId)
{
behbimeh_informationEntities db = new behbimeh_informationEntities();
var cities= db.City.Where(i => i.region_id == RegionId).Select(item=>new { item.ValueField, item.TextField }).ToList();
return Newtonsoft.Json.JsonConvert.SerializeObject(cities);
}
<script type="text/javascript">
function GetCitiesOfRegion(regionId)
{
$.ajax({
url:"Signup.aspx/GetCities",
type:"POST",
data:'{"RegionId":'+regionId+'}',
success: function (r) {
var cities=JSON.parse(r.d);
var citiesOptions="";
for(var i=0;i<cities.length;i++){
citiesOptions+='<option value="'+cities[i].Value+'">'+cities[i].Text+'</option>';
}
$('#<%= cmb_City.ClientID %>').html(citiesOptions);
}
});
}

first you will need to clear the existing data, like so:
$('#cmb_city').empty();
next, you need to load the returned list to your ddl.
$.ajax({
url:"Signup.aspx/GetCities",
type:"POST",
data:'{"RegionId":'+$('#cmb_Region').val()+'}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$.each(r, function() {
$('#cmb_city').append($('<option>').text(this.Name).attr('value', this.Id));
});
}
});
where Name and Id are your text and value fields respectively.
you will also probably need to send the selected region.

Here is your answer like how to bind data from database using Ajax in php
<!-- edit.php -->
<?php
include("config.php");
$id=$_REQUEST['id'];
echo $id;
$query=mysqli_query($con,"SELECT * FROM register r
INNER JOIN country c ON r.cuid = c.cuid
INNER JOIN state s ON r.sid = s.sid
INNER JOIN city ct ON r.cid = ct.cid where id='$id'");
while($r=mysqli_fetch_array($query))
{
$fn=$r['firstname'];
$add=$r['address'];
$gn=$r['gender'];
$hobby=$r['hobby'];
$h=explode(',',$hobby);
$q=array('reading','traveling','cricket','drawing');
$country=$r['cuid'];
$state=$r['sid'];
$city=$r['cid'];
echo $gn;
$edu= $r['education'];
$email=$r['email'];
$pass=$r['password'];
$conpass=$r['conpassword'];
$phno=$r['phoneno'];
}
?>
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'cuid='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html(html);
}
});
}else{
$('#state').html(html);
$('#city').html(html);
}
});
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'sid='+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html(html);
}
});
});
</script>
</head>
<body>
<form method="post" action="update.php">
<table border="1" align="center">
<caption>Edit user data</caption>
<tr>
<td>First name</td>
<td><input type="text" name="fn" value="<?php echo $fn;?>"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="add" value="<?php echo $add;?>"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gn" value="male" <?php echo ($gn=='male')?'checked':'' ; ?> size="17">Male
<input type="radio" name="gn" value="female" <?php echo ($gn=='female')?'checked':'' ; ?> size="17">Female
</td>
</tr>
<tr>
<td>Hobby</td>
<td><input type="checkbox" name="hobby[]" value="reading" <?php if(in_array('reading',$h)){echo ("checked:'checked'");}?> >reading
<input type="checkbox" name="hobby[]" value="traveling" <?php if(in_array('traveling',$h)){echo ("checked:'checked'");}?> >traveling
<input type="checkbox" name="hobby[]" value="cricket" <?php if(in_array('cricket',$h)){echo ("checked:'checked'");}?> >cricket
<input type="checkbox" name="hobby[]" value="drawing" <?php if(in_array('drawing',$h)){echo ("checked:'checked'");}?> >drawing</td>
</tr>
<?php
$query = mysqli_query($con,"SELECT * FROM country");
//Count total number of rows
$rowCount = mysqli_num_rows($query);
?>
<td>Country</td>
<td><select name="country" id="country">
<option value="<?php echo $country;?>"><?php echo $country;?></option>
<?php
if($rowCount > 0)
{
while($row = mysqli_fetch_array($query))
{
echo '<option value="'.$row['cuid'].'">'.$row['country'].'</option>';
}
}
else
{
echo '<option value="">Country not available</option>';
}
?>
</select>
</td></tr>
<tr>
<td>State</td>
<td>
<select name="state" id="state">
<option value="<?php echo $state;?>"><?php echo $state;?></option>
</select>
</td></tr>
<tr>
<td>City</td>
<td>
<select name="city" id="city">
<option value="<?php echo $city;?>"><?php echo $city;?></option>
</select>
</td>
</tr>
<tr>
<td>Education</td>
<td><input type="text" name="edu" value="<?php echo $edu;?>"></td>
</tr>
<td>Email</td>
<td><input type="text" name="email" value="<?php echo $email;?>"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="pass" value="<?php echo $pass;?>"></td>
</tr>
<tr>
<td>Confirm password</td>
<td><input type="text" name="conpass" value="<?php echo $conpass;?>"></td>
</tr>
<tr>
<td>Phone no</td>
<td><input type="text" name="phno" value="<?php echo $phno;?>"></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="<?php echo $id;?>">
<input type="submit" name="update" value="update"></td>
</tr>
</table>
</form>
</body>
</html>
--------------------
<!--ajaxData.php-->
<?php
//Include database configuration file
include("config.php");
if(isset($_POST["cuid"]) && !empty($_POST["cuid"]))
{
//Get all state data
$query = mysqli_query($con,"SELECT * FROM state WHERE cuid = ".$_POST['cuid']."");
//Count total number of rows
$rowCount = mysqli_num_rows($query);
//Display states list
if($rowCount > 0)
{
echo '<option value="">Select state</option>';
while($row = mysqli_fetch_array($query))
{
echo '<option value="'.$row['sid'].'">'.$row['state'].'</option>';
}
}
else
{
echo '<option value="">State not available</option>';
}
}
if(isset($_POST["sid"]) && !empty($_POST["sid"]))
{
//Get all city data
$query = mysqli_query($con,"SELECT * FROM city WHERE sid =".$_POST['sid']."");
//Count total number of rows
$rowCount = mysqli_num_rows($query);
//Display cities list
if($rowCount > 0)
{
echo '<option value="">Select city</option>';
while($row = mysqli_fetch_array($query))
{
echo '<option value="'.$row['cid'].'">'.$row['city'].'</option>';
}
}
else
{
echo '<option value="">City not available</option>';
}
}
?>

change only works for the first row in a table

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.

jQuery : Select Box doesn't Respond

I want to make an <input type="text"></input>put text from database when select box selected. here is my jQuery code
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#noID').change(function() {
var noID = $(this).val();
$.ajax({
type: 'POST',
url: 'ambilusername.php',
data: 'noID=' + noID,
success: function(response) {
$('#username').val(response);
}
});
});
});
</script>
and here is my "ambilusername.php"
<?php
include "../include/koneksi_db.php";
$noID = $_POST["noID"];
$username = mysql_query("SELECT * FROM booking_tamu WHERE noID='$noID'");
while($k = mysql_fetch_array($username)){
echo "$k[email]";
}
?>
here is my full index.php code :
<?php
include "../include/koneksi_db.php";
?>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#noID').change(function() {
var noID = $(this).val();
$.ajax({
type: 'POST',
url: 'ambilusername.php',
data: 'noID=' + noID,
success: function(response) {
$('#username').val(response);
}
});
});
});
</script>
</head>
<body>
<form method="post" action="?page=prosesTambahAkun">
<table class="table-data" width=100% border=1>
<tr><td colspan="2" class="head-data">Tambah Data Akun</td></tr>
<tr>
<td class="pinggir-data">ID Pemesan</td>
<td>
<select name="noID" id="noID" required>
<option value="">------Pilih ID Pemesan------</option>
<?php
$query = "SELECT no_booking, COUNT(no_booking) AS 'jumlah' FROM booking_tamu GROUP BY no_booking ASC";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil)){
echo "<option value='".$data['no_booking']."'>".$data['no_booking']."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td class="pinggir-data">Username</td>
<td>
<input type="text" id="username" name="username" size="30px" readonly></input>
</td>
</tr>
<tr><td colspan="2" align="center" class="head-data">
<input type="submit" value="Tambah" name="tambah">
</td></tr>
</table>
</form>
</body>
</html>
the problem is when i select the value on select box, the textbox doesn't put something on it. can you please help me?

The problem is the naming of your table column:
change this:
$username = mysql_query("SELECT * FROM booking_tamu WHERE noID='$noID'");
to this:
$username = mysql_query("SELECT * FROM booking_tamu WHERE no_booking='$noID'");