I tried to send information via ajax about user_question and language input fields, but how to write correctly this element inside ajax javascript to save the table element value in database.
thank you.
the script element.
<table id="myTable" class="table table-sm table-hover order-list">
<thead>
<tr>
<td>User Question</td>
<td>Language</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9">' . HTML::inputField('user_question', null, 'placeholder="Write a short answer"'). '</td>
<td class="col-md-2">' . HTML::inputField('language', null, 'placeholder="Language"') . '</td>
<td class="col-sm-1"><a id="delete_row" class="deleteRow"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="user_question' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="language' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
// element pb
// var data = $("#new_product").serialize(); // form id or table id ?
var dataString = 'user_question='+user_question+'language='+language;
$.ajax({
type: 'POST',
url: '{$ajax_url}',
data : dataString,
success: function(data) {
alert(data);
$("p").text(data);
}
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
</script>
Use like this to get php variables value inside javascript in .php page
url: "<?php echo $ajax_url; ?>",
Also use & and symbol to add two or more param in your dataString
Related
I have a function where i can add rows and autonumbering. The add rows works when you click the "add row" button, and auto numbering works when you press Ctrl+Enter key when there's 2 or more rows. My problem is, my validation does not work on my autonumbering.
For example: when I type manually the "1" on the textbox, it works.
But when I do my auto numbering, "Not good" does not appear on my 2nd
textbox.
Is there anything I missed? Any help will be appreciated.
//this is for adding rows
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" value="" class="form" type="number" /> <span class="email_result"></span></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
//this is for my validation
$(document).on('change', 'input[name*=lightBand]', function() {
var lightBand1 = $(this).val(); //get value
var selector = $(this) //save slector
selector.next('.email_result').html("") //empty previous error
if (lightBand1 != '') {
/*$.ajax({
url: "<?php echo base_url(); ?>participant/check_number_avalibility",
method: "POST",
data: {
lightBand1: lightBand1
},
success: function(data) {*/
selector.next('.email_result').html("NOT GOOD"); //use next here ..
/* }
});*/
}
});
// this is for autonumbering when ctrl+enter is pressed.
const inputs = document.querySelectorAll(".form");
document.querySelectorAll(".form")[0].addEventListener("keyup", e => {
const inputs = document.querySelectorAll(".form");
let value = parseInt(e.target.value);
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
inputs.forEach((inp, i) => {
if (i !== 0) {
inp.value = ++value;
}
})
}
});
Add a row and type any number at number textbox column and press ctrl+enter. You'll see the "Not good" is not working on added rows. It'll only work if you enter the number manually per row.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>Number</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="form" name="lightBand1" placeholder="" id="lightBand1" />
<span class="email_result"></span>
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>
You can call your event handler i.e : change whenever you change your input values by auto numbering . So , use $(this).trigger("change") where this refer to input where value is changed .
Demo Code :
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" value="" class="form" type="number" /> <span class="email_result"></span></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
//this is for my validation
$(document).on('change', 'input[name*=lightBand]', function() {
var lightBand1 = $(this).val(); //get value
var selector = $(this) //save slector
selector.next('.email_result').html("") //empty previous error
if (lightBand1 != '') {
/*$.ajax({
url: "<?php echo base_url(); ?>participant/check_number_avalibility",
method: "POST",
data: {
lightBand1: lightBand1
},
success: function(data) {*/
selector.next('.email_result').html("NOT GOOD"); //use next here ..
/* }
});*/
}
});
// this is for autonumbering when ctrl+enter is pressed.
$(document).on('keyup', '.form', function(e) {
let value = parseInt(e.target.value);
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
//loop through all values...
$(".form").each(function(i) {
if (i !== 0) {
$(this).val(++value); //assign new value..
$(this).trigger("change") //call your change event to handle further...
}
})
}
})
Add a row and type any number at number textbox column and press ctrl+enter. You'll see the "Not good" is not working on added rows. It'll only work if you enter the number manually per row.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>Number</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="form" name="lightBand1" placeholder="" id="lightBand1" />
<span class="email_result"></span>
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>
I have a form, there is a button (+sign)on the form which appends a row to insert the value .In my form i am able to enter the value on the first row both fields( stationerytype and stationeryqty). But once I append a new row by clicking plus button I am not able to insert any value on staionerytype field of second row while I'm able to insert the value in the stationeryqty field of second row.
My code is:
<table class="table table-bordered" id="tb" >
<tr class="tr-header">
<th class= "col-md-1" align="centre">Sl.No.</th>
<th class= "col-md-6" align="centre">STATIONARY TYPE</th>
<th class= "col-md-4" align="centre">STATIONARY QUANTITY</th>
<th class= "col-md-1"><span class="glyphicon glyphicon-plus"></span></th>
</tr>
<tr>
<?php
for($i=1;$i<=1;$i++)
{
?>
<td><input type="text" style="text-decoration: none" name="slno" value= "<?php echo $i; ?>" ></td>
<td><input type="text" style="text-decoration: none" name="stationerytype" ></td>
<td><input type="number" name="stationeryqtyrecd" id="stationeryqtyrecd" min="0"></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
<?php }?>
</table>
<button type="submit" name="add" class="btn btn-info" align="middle" >ADD </button>
<script>
var max = 4;
var count = 1;
$(function(){
$('#addMore').on('click', function() {
if(count <= max ){
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
debugger;
data.find("input")[0].value=++count;
}else{
alert("Sorry!! Can't add more than five samples at a time !!");
}
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
count--;
// get all the rows in table except header.
$('#tb tr:not(.tr-header)').each(function(){
$(this).find('td:first-child input').val(this.rowIndex);
})
}
});
});
</script>
</div>
I am using PHP Codeigniter.I don't have good knowledge in JavaScript. My problem is that I have a table with editable columns and when I click on the submit button I want to send the table data to the Codeigniter function using POST method.
HTML code
<div class="col-md-12 top-20 padding-0">
<div class="col-md-12">
<div class="panel">
<div class="panel-heading"><h3>Data Tables</h3></div>
<div class="panel-body">
<div class="responsive-table">
<table id="data_table" class="table table-striped table-bordered" width="100%" cellspacing="0">
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
<input type="button" name="check" onclick="clik();">
</div>
</div>
</div>
</div>
</div>
JavaScript for editable table
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var name=document.getElementById("name_row"+no);
var country=document.getElementById("country_row"+no);
var age=document.getElementById("age_row"+no);
var name_data=name.innerHTML;
var country_data=country.innerHTML;
var age_data=age.innerHTML;
name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
}
function save_row(no)
{
var name_val=document.getElementById("name_text"+no).value;
var country_val=document.getElementById("country_text"+no).value;
var age_val=document.getElementById("age_text"+no).value;
document.getElementById("name_row"+no).innerHTML=name_val;
document.getElementById("country_row"+no).innerHTML=country_val;
document.getElementById("age_row"+no).innerHTML=age_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_name=document.getElementById("new_name").value;
var new_country=document.getElementById("new_country").value;
var new_age=document.getElementById("new_age").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_country").value="";
document.getElementById("new_age").value="";
}
So in the given editable table data I want to push to my codeigniter function.
the best way now is to use Ajax in order to post those javascript value to the Codeigniter function
example on a simple ajax call :
var newName = 'John Smith';
$.ajax('myservice/codigniter_Function?' + $.param({id: 'some-unique-id'}), {
method: 'POST',
data: {
name: newName
}
})
.then(
function success(name) {
if (name !== newName) {
alert('Something went wrong. Name is now ' + name);
}
},
function fail(data, status) {
alert('Request failed. Returned status of ' + status);
}
);
please check the source for more information on how to use ajax with javascript in details.
Since your question includes vanilla Javascript, my answer will use XMLHttpRequest(). I have created the following function to send post data to the back end.
function ajax_req(url, params) {
var http = new XMLHttpRequest();
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
}
In your save_row() function, create parameters to send to the back end, like name=billy&age=21&country=us
function save_row(no) {
var name_val = document.getElementById("name_text" + no).value;
var country_val = document.getElementById("country_text" + no).value;
var age_val = document.getElementById("age_text" + no).value;
document.getElementById("name_row" + no).innerHTML = name_val;
document.getElementById("country_row" + no).innerHTML = country_val;
document.getElementById("age_row" + no).innerHTML = age_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
// send values to back end
var params = "name=" + name_val + "&country=" + country_val + "&age=" + age_val;
ajax_req('/savedata', params);
}
<form action="<php echo base_url('controller_name/ method_name')?>
method="POST">
<div class="col-md-12 top-20 padding-0">
<div class="col-md-12">
<div class="panel">
<div class="panel-heading"><h3>Data Tables</h3></div>
<div class="panel-body">
<div class="responsive-table">
<table id="data_table" class="table table-striped table-bordered" width="100%" cellspacing="0">
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td><input type="text" id="new_name" name="newname"></td>
<td><input type="text" id="new_country" name="country"></td>
<td><input type="text" id="new_age" name="age"></td>
</tr>
</table>
<input type="submit" name="check" class="btn btn-primary">
</div>
</div>
</div>
</div>
In Your Controller
public function function_name()
{
$post = $this>input->post();
$data = array(
'name' =>$post['newname'],
'country' =>$post['country'],
'age' =>$post['age'],
);
$this->load->model('model_name');
$this->model_name->function_name($data);
}
In your model
public function function_name($data)
{
return $this->db->insert('table_name', $data);
}
I am trying to differentiate each id with their corresponding id from database. For Eg: Name_val19. The line var name=document.getElementById("name_val"+id).innerHTML; is returning null value. The value is being stored in database also
function edit_row(id)
{
var name=document.getElementById("name_val"+id).innerHTML;
var age=document.getElementById("age_val"+id).innerHTML;
document.getElementById("name_val"+id).innerHTML="<input type='text' id='name_text"+id+"' value='"+name+"'>";
document.getElementById("age_val"+id).innerHTML="<input type='text' id='age_text"+id+"' value='"+age+"'>";
document.getElementById("edit_button"+id).style.display="none";
document.getElementById("save_button"+id).style.display="block";
}
function save_row(id)
{
var name=document.getElementById("name_val"+id).value;
var age=document.getElementById("age_val"+id).value;
$.ajax
({
type:'post',
url:'modify_records.php',
data:{
edit_row:'edit_row',
row_id:id,
name_val:name,
age_val:age
},
success:function(response) {
if(response=="success")
{
document.getElementById("name_val"+id).innerHTML=name;
document.getElementById("age_val"+id).innerHTML=age;
document.getElementById("edit_button"+id).style.display="block";
document.getElementById("save_button"+id).style.display="none";
}
}
});
}
function delete_row(id)
{
$.ajax
({
type:'post',
url:'modify_records.php',
data:{
delete_row:'delete_row',
row_id:id,
},
success:function(response) {
if(response=="success")
{
var row=document.getElementById("row"+id);
row.parentNode.removeChild(row);
}
}
});
}
function insert_row()
{
var name=document.getElementById("new_name").value;
var age=document.getElementById("new_age").value;
$.ajax
({
type:'post',
url:'modify_records.php',
data:{
insert_row:'insert_row',
name_val:name,
age_val:age
},
success:function(response) {
if(response!="")
{
var id=response;
var table=document.getElementById("user_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+id+"'><td id='name_val"+id+"'>"+name+"</td><td id='age_val"+id+"'>"+age+"</td><td><input type='button' class='edit_button' id='edit_button"+id+"' value='Edit' onclick='edit_row("+id+");'/><input type='button' class='save_button' id='save_button"+id+"' value='Save' onclick='save_row("+id+");'/><input type='button' class='delete_button' id='delete_button"+id+"' value='Delete' onclick='delete_row("+id+");'/></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_age").value="";
}
}
});
}
$("#insert").submit(function() {
var name= $("#new_name").val();
var password= $("#new_age").val();
$.ajax({
type: "POST",
url: "connect.php",
data: "name=" + name+ "&password=" + password,
success: function(data) {
alert("sucess");
}
});
});
PHP Code:
<html>
<head>
</head>
<body>
<div id="wrapper">
<table align="center" cellpadding="10" border="1" id="user_table">
<tr>
<th>NAME</th>
<th>AGE</th>
<th></th>
</tr>
<?php
include "connect.php";
$select=mysqli_query($connection,"SELECT * FROM user_detail");
if($select!=NULL){
while ($row=mysqli_fetch_array($select,MYSQLI_BOTH))
{
?>
<tr id="row<?php echo $row['id'];?>">
<td id="name_val<?php echo row['id'];?>"><?php echo $row['name'];?></td>
<td id="age_val<?php echo $row['id'];?>"><?php echo $row['age'];?></td>
<td>
<button class="edit_button" id="edit_button<?php echo $row['id'];?>" onclick="edit_row('<?php echo $row['id'];?>');">Edit</button>
<button class="save_button" id="save_button<?php echo $row['id'];?>" onclick="save_row('<?php echo $row['id'];?>');">Save</button>
<button class="delete_button" id="delete_button<?php echo $row['id'];?>" onclick="delete_row('<?php echo $row['id'];?>');">Delete</button>
</td>
</tr>
<?php
}
}
?>
<tr id="new_row"><form id="insert" onclick="insert_db()">
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_age"></td>
<td><button type="button" value="Insert Row" onclick="insert_row()">Insert</button></td>
</form></tr>
</table>
</div>
</body>
<script type="text/javascript" src="./js/jquery-3.2.0.js"></script>
<script type="text/javascript" src="./js/modify_records.js"></script>
</html>
looks like a few things, first i recommend getting the element by class since your id is complicated, try using getElementByClass("edit_button") to get <button class="edit_button" id="...">
getElementById() does exactly that, you are trying to get a dom (html) element by its id="" attribute, into the js Scope so you can do something with it. it should be getElementById("IDofElement")
getElementById("row") gets <p id="row"> </p>
but it looks like you set
var id=response; which makes your
getElementById("IDofElement"+"ENTIRE AJAX RESPONSE") call throw an error because there is no dom element with an id of e.g.
<div id="rowENTIRE-AJAX-RESPONSE"></div>
You're killing yourself with all these IDs. Use HTML5 data-attribute to store your record's ID once per row.
<tr data-id="<?php echo $row['id'] ?>">
<!-- added class names to cells bc we'll be using them later -->
<td class="name"><?php echo $row['name'] ?></td>
<td class="age"><?php echo $row['age'] ?></td>
<td>
<button type="button" class="edit_button">Edit</button>
<button type="button" class="save_button">Save</button>
<button type="button" class="delete_button">Delete</button>
</td>
</tr>
Utilize jQuery to its full potential to find elements (e.g. .find() and .closest()) and attach event handlers. document.getElementById and onclick attributes are so passé when it comes to jQuery.
Your code can be cleaner:
$('.edit_button').click(function () {
var tr = $(this).closest('tr'),
tdName = tr.find('td.name'),
tdAge = tr.find('td.age');
var id = tr.data('id'),
name = tdName.text(),
age = tdAge.text();
tdName.html('<input type="text" name="name" value="' + name + '">');
tdAge.html('<input type="text" name="age" value="' + age + '">');
tr.find('.edit_button').hide();
tr.find('.save_button').show();
});
$('.save_button').click(function () {
var tr = $(this).closest('tr'),
tdName = tr.find('td.name'),
tdAge = tr.find('td.age');
var id = tr.data('id'),
name = tdName.find('input').val(),
age = tdAge.find('input').val();
// shorthand method for $.ajax POST
$.post('modify_records.php', {
edit_row: 'edit_row',
row_id: id,
name_val: name,
age_val: age
}, function (response) {
if (response == "success") {
tdName.html(name);
tdAge.html(age);
tr.find('.edit_button').show();
tr.find('.save_button').hide();
}
});
});
$('.delete_button').click(function () {
var tr = $(this).closest('tr')
var id = tr.data('id');
$.post('modify_records.php', { delete_row: 'delete_row', row_id: id }, function (response) {
if (response == "success") {
tr.remove();
}
});
});
Quick demo
$('.edit_button').click(function() {
var tr = $(this).closest('tr'),
tdName = tr.find('td.name'),
tdAge = tr.find('td.age');
var id = tr.data('id'),
name = tdName.text(),
age = tdAge.text();
tdName.html('<input type="text" name="name" value="' + name + '">');
tdAge.html('<input type="text" name="age" value="' + age + '">');
tr.find('.edit_button').hide();
tr.find('.save_button').show();
});
$('.save_button').click(function() {
var tr = $(this).closest('tr'),
tdName = tr.find('td.name'),
tdAge = tr.find('td.age');
var id = tr.data('id'),
name = tdName.find('input').val(),
age = tdAge.find('input').val();
console.log('saving', id, name, age)
$.post('modify_records.php', {
edit_row: 'edit_row',
row_id: id,
name_val: name,
age_val: age
}, function(response) {
if (response == "success") {
tdName.html(name);
tdAge.html(age);
tr.find('.edit_button').show();
tr.find('.save_button').hide();
}
});
});
$('.delete_button').click(function() {
var tr = $(this).closest('tr')
var id = tr.data('id');
console.log('deleting', id)
$.post('modify_records.php', {
delete_row: 'delete_row',
row_id: id
}, function(response) {
if (response == "success") {
tr.remove();
}
});
});
.save_button {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-id="1">
<td class="name">Bill</td>
<td class="age">21</td>
<td>
<button type="button" class="edit_button">Edit</button>
<button type="button" class="save_button">Save</button>
<button type="button" class="delete_button">Delete</button>
</td>
</tr>
<tr data-id="2">
<td class="name">Sarah</td>
<td class="age">22</td>
<td>
<button type="button" class="edit_button">Edit</button>
<button type="button" class="save_button">Save</button>
<button type="button" class="delete_button">Delete</button>
</td>
</tr>
<tr data-id="3">
<td class="name">Jean</td>
<td class="age">34</td>
<td>
<button type="button" class="edit_button">Edit</button>
<button type="button" class="save_button">Save</button>
<button type="button" class="delete_button">Delete</button>
</td>
</tr>
</table>
Html code:
Below image describes my output.Please kindly some one help me to resolve this issue.
<table class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
<thead>
<tr>
<th>#</th>
<th>SiteName</th>
<th>UserName</th>
<th>Channel</th>
<th>Action</th>
</tr>
</thead>
<tbody id="site-table-body">
<tr>
<td class="countsiteuser">1</td>
<td><select class="form-control" id="siteContainer"></select>
</td>
<td><input type="checkbox" value="user" id="checkboxbutton"><input type="text" class="and" disabled placeholder="Default"/></td>
<td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>
<td><span class="form-control glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>
JavaScript:
$('.tableSiteUser').on('keydown','td:nth-child(4)',function(e){
var keyCode=e.keyCode || e.which;
if(keyCode == 9){
serialUserSite++;
$('tbody#site-table-body').append('<tr>'
+'<td class="beer" contenteditable="false">'+serialUserSite+'</td>'
+'<td><select class="form-control" id="siteContainer">'
+'</select></td>'
+'<td><input type="checkbox" value="user" id="checkboxbutton"><input type="text" class="and" disabled placeholder="Default"/></td>'
+'<td><input type="text" class="form-control" placeholder="Enter the Channel"/></td>'
+'<td><span class="glyphicon glyphicon-trash form-control"></span></td>'
+'</tr>');
}
});
ajax code:
$.ajax({
url : "http://localhost:8080/IDNS_Rule_Configuration/idns/systemData/getAllSites",
type : "GET",
contactType : "application/json",
dataType : "json",
success : function(data){
for(var i=0;i<data.length;i++){
var dataId = data[i].siteId;
var dataArray = data[i].siteName;
$('#siteContainer').populate(dataId, dataArray);
}
}
});
populate jquery code:
$.fn.populate = function(dataId, dataArray) {
var $selectbox = $(this);
// check if eleme nt is of type select
if ($selectbox.is("select")) {
//for (var i = 0; i < dataId.length; i++) {
$selectbox.append('<option value="' + dataId
+ '" stream="' + dataId + '">'
+ dataArray + '</option>');
//}
}
};
This is my output ,site name combo box is loaded from db.In first row it works .At second row it does not work