ajax wont respond after called on dropdown in PHP - javascript

I tried to grab data from API using php through ajax on my html page, when I tried to make direct link it works successfully but when i trying to call it with ajax on my drop down, it is like failed to call ajax..
Here is my html
<head>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<script type="text/javascript" src="js/jquery-2.1.3.min.js">
</script>
<script type="text/javascript" src="js/script.js"></script>
<title>Penggunaan API RajaOngkir | IDMore</title>
</head>
<body>
<div class="container">
<div class="row">
<br />
<div class="twelve columns">
<h1>Hitung Ongkos Kirim</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h5>Masukan Data</h5>
</div>
</div>
<div class="row">
<div class="two columns">Asal
<br />
<select id="oriprovince">
<option>Province</option>
</select></div>
<div class="two columns">
<br />
<select id="oricity">
<option>Kota</option>
</select>
</div>
<div class="two columns">Tujuan
<br />
<select id="desprovince">
<option>Provinsi</option>
</select></div>
<div class="two columns">
<br />
<select id="descity">
<option>Kota</option>
</select>
</div>
<div class="two columns">Layanan
<br />
<select id="service">
<option>JNE</option>
<option>POS</option>
<option>TIKI</option>
</select></div>
<div class="two columns">
<br />
<button id="btncheck">Cek Harga</button>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h5>Harga</h5>
</div>
<hr />
<table class="twelve columns">
<tr>
<th>Servis</th>
<th>Deskripsi Servis</th>
<th>Lama Kirim (hari)</th>
<th>Total Biaya (Rp)</th>
</tr>
<span id="resultsbox">
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</span>
</table>
</div>
</div>
</body>
Here is my javascript.
$(document).ready(function() {
loadProvinsi('#oriprovince');
loadProvinsi('#desprovince');
$('#oriprovince').change(function() {
alert('yussan');
});
$('#desprovince').change(function() {
alert('yussan');
});
});
function loadProvinsi(id) {
$('#oricity').hide();
$('#descity').hide();
$(id).html('loading...');
$.ajax({
url: 'process.php?act=showprovince',
dataType: 'json',
success: function(response) {
$(id).html('');
province = '';
$.each(response['rajaongkir']['results'], function(i, n) {
province = '<option value="n[province_id]">'+n['province']+'</option>';
<option></option>
province = province + '';
$(id).append(province);
});
},
error: function() {
$(id).html('ERROR');
}
});
}


$.each(response['rajaongkir']['results'], function(i, n) {
var option = '<option value="'+n['province_id']+'">'+n['province']+'</option>';
province += option;
});
$(id).append(province);
Please replace your each function with this code.And try again.

Related

Send MultiSelect data to Modal

I would like to help with this code:
I am sending information from a table to the modal and in that table
there will be data from the groups separated by commas
I would like it to be selected in the modal in MultiSelect like the
example of low users.
The bottom MultiSelect works perfectly but I don't know how to do it
on that first model.
Model was removed from this site loudev
enter image description here
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://loudev.com/css/multi-select.css" />
<script src="https://loudev.com/js/jquery.multi-select.js"></script>
</head>
<body>
<div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
<table class="table">
<thead class="thead-dark">
<tr class="text-center">
<th class="d-none"></th>
<th>Página</th>
<th>Cód. Página</th>
<th>Tipo</th>
<th>Grupos</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="d-none">
<input type="radio" id="customRadio" name="customRadio" data-envia-id="1" data-envia-pagina="Nome Exemplo" data-envia-codpagina="Situação Exemplo" data-envia-tipo="Pagina" data-envia-grupo="Suporte, Comercial" data-envia-usuarios="usuario1, usuario2"
data-envia-observacao="Observacao Exemplo">
</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">1</th>
<td class="d-none">
<input type="radio" id="customRadio" name="customRadio" data-envia-id="1" data-envia-pagina="Nome Exemplo" data-envia-codpagina="Situação Exemplo" data-envia-tipo="22" data-envia-grupo="Suporte, Comercial" data-envia-observacao="Observacao Exemplo">
</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /Modal para cadastro de contratos -->
<div class="modal fade" id="Modal-Editar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel"> Realizar Alterações</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="teste.php">
<div class="modal-body">
<div class="row justify-content-center">
<div class="col-md-9 col-sm-12 form-group has-feedback">
<input type="text" name="pagina" id="RecebPagina" class="form-control has-feedback-left" placeholder="Nome da Página" required>
<span class="fa fa-check-square-o form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-10 col-sm-12 form-group has-feedback">
<select id="RecebGrupo" class="custom-select text-center" multiple>
<option></option>
<option value="Suporte">Suporte</option>
<option value="Comercial">Comercial</option>
<option value="Agenda">Agenda</option>
<option value="Financeiro">Financeiro</option>
</select>
</div>
<div class="col-md-12 col-sm-12 form-group has-feedback">
<select id="RecebUsuarios2" class="custom-select" multiple>
<option></option>
<option value="usuario1">usuario1</option>
<option value="usuario2">usuario2</option>
<option value="usuario3">usuario3</option>
<option value="usuario3">usuario3</option>
</select>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary" name='btnValue' value='btnEdiPermissoes'>Editar</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.modal-content').resizable({
//alsoResize: ".modal-dialog",
minHeight: 300,
minWidth: 300
});
$('.modal-dialog').draggable();
$('#myModal').on('show.bs.modal', function() {
$(this).find('.modal-body').css({
'max-height': '100%'
});
});
</script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.modal-dialog').draggable();
$(document).ready(function() {
$('input:checkbox').not(this).prop('checked', this.checked);
});
//Função para marcar o checkbox ao clicar na linha: ondblclick
$("table tr").on("dblclick", function() {
$(this).children().children()[0].click();
$('#Modal-Editar').modal('show');
$.each($("input[name='customRadio']:checked"), function() {
VarId = $(this).data('envia-id');
VarPagina = $(this).data('envia-pagina');
VarCodpagina = $(this).data('envia-codpagina');
VarTipo = $(this).data('envia-tipo');
VarUsuarios = $(this).data('envia-usuarios');
VarGrupo = $(this).data('envia-grupo');
VarObservacao = $(this).data('envia-observacao');
$('#RecebId').val(VarId);
$('#RecebId2').html(VarId);
$('#RecebPagina').val(VarPagina);
$('#RecebCodpagina').val(VarCodpagina);
$('#RecebTipo').html(VarTipo);
$('#RecebUsuarios').html(VarUsuarios);
$('#RecebObservacao').val(VarObservacao);
$('#RecebGrupo option').each(function(index) {
var str = VarGrupo;
var substr = str.split(', ');
for (var i = 0; i < substr.length; i++) {
if (substr[i] == $(this).val()) {
//$("option:selected", this).attr();
$(this).attr('selected', 'selected');
//$(this).attr('selected', true);
//$(this).addClass('ms-elem-selectable ms-hover ms-selected').show();
//$(this).addClass('ms-hover').show();
//$(this).addClass('ms-selected').show();
//$(this).Attr('hidden');
//$(this).Attr('id', '-190140734-selection');
}
}
});
$('#RecebUsuarios2 option').each(function(index) {
var str = VarUsuarios;
var substr = str.split(', ');
for (var i = 0; i < substr.length; i++) {
if (substr[i] == $(this).val()) {
//$("option:selected", this).attr();
$(this).attr('selected', 'selected');
//$(this).attr('selected', true);
//$(this).addClass('ms-elem-selectable ms-hover ms-selected').show();
//$(this).addClass('ms-hover').show();
//$(this).addClass('ms-selected').show();
//$(this).Attr('hidden');
//$(this).Attr('id', '-190140734-selection');
}
}
});
});
});
</script>
<script type="text/javascript">
// MultiSelect Cadastro de Grupo
$('#Selected-GrupoCad').multiSelect();
// MultiSelect Editar Grupo
$('#RecebGrupo').multiSelect();
</script>
</body>
</html>

Ajax not working on multiple inserts - CI

I want to save multiple data in one go using codeigniter and then on success load the data on my datatable wihtout refreshing the whole page. I am able to do this successfully if I use modal and insert a single value but when I try to save multiple values, it doesn't work. I produce my input boxes on button click. Below are my codes:
CONTROLLER
public function add_multiple_orders(){
$dataset=[];
$item_name=$this->input->post('m_item_name');
$quantity=$this->input->post('m_quantity');
$amount=$this->input->post('m_amount');
$order_comment=$this->input->post('m_order_comment');
$branch_name=$this->input->post('m_branch_name');
$date_added=$this->input->post('m_date_added');
for($i=0;$i<sizeof($item_name);$i++){
$dataset[$i]=array(
'date_added'=>$date_added,
'item_name'=>$item_name[$i],
'quantity'=>$quantity[$i],
'amount'=>$amount[$i],
'ordered_by'=>$this->session->userdata['username'],
'order_status'=>'ordered',
'order_comment'=>$order_comment[$i],
'branch_name'=>$branch_name
);
}
$result=$this->sales_model->insert_mult_orders($dataset);
}
VIEW
<a name="mult_page">
<button class="btn btn-info" data-toggle="collapse" data-target="#add_multiple" style="margin-left: 20px;">Add Multiple Orders</button>
<div class="collapse" id="add_multiple" style="width: 95%; margin: 0 auto; margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
</div>
<div class="panel-body">
<form class="form_mult_ordrs form-inline" method="post">
<div class="form-group">
<label for="m_date_added">Date</label>
<input type="date" name="m_date_added" required>
</div>
<div class="form-group">
<label for="m_branch_name" class="control-label">Branch Name</label>
<select name="m_branch_name" class="form-control">
<option value="superdome">Superdome</option>';
<option value="seaside">Sea Side</option>
<option value="robinsons">Robinsons</option>
</select>
</div>
<div class="btn btn-warning pull-right" onclick="add_new_row()">Add more</div>
<hr>
<div style="font-weight: bold;">Total Php <input type="text" id="total_result" placeholder="0.00" class="form-control"></div>
<br>
<table id="mult_ord_tbl" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="ui-help-center">Item Name</th>
<th class="ui-help-center">Quantity</th>
<th class="ui-help-center">Amount</th>
<th class="ui-help-center">Comment</th>
<th class="ui-help-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="item_name[]" class="form-control">
<?php foreach($items as $item){
echo '<option value"='.$item->item_name.'">'.$item->item_name.'</option>';
} ?>
</select>
</td>
<td><input type="text" name="m_quantity[]" placeholder="Quantity"></td>
<td><input type="text" name="m_amount[]" id='m_amount[]' placeholder="Amount" onblur="total_values()"></td>
<td><input type="text" name="m_order_comment[]" placeholder="Commment"></td>
<td>
<button class="btn btn-danger" onclick="delete_row(this)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
</tbody>
</table>
<tr>
<td colspan="12">
<button id="btn_mult_ordrs" class="btn btn-success" onclick="save_mult_ordrs()" value="">Submit All</button>
</td>
</tr>
</form>
</div> <!-- end of panel body -->
<div class="panel-footer">
footer
</div>
</div> <!-- end of panel primary -->
</div> <!-- end of column 12 -->
</div> <!-- end of row -->
</div> <!-- end of collapse -->
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({
"order":[[0,"desc"]]
});
});
function save_mult_ordrs(){
if(confirm("Are you done?")){
var url="<?php echo site_url('sales/add_multiple_orders')?>";
add_new_row();
// $("#form_mult_ordrs").submit();
$.ajax({
url:url,
type:"POST",
data:$('#form_mult_ordrs').serialize(),
datatype:"JSON",
success:function(data)
{
alert('All data has been saved.');
location.reload();
},
error:function(jqXHR, textStatus, errorThrown){
alert('Error in saving.');
}
});
}
}
function add_new_row(){
var arrTables = document.getElementById('mult_ord_tbl');
var oRows = arrTables.rows;
var numRows = oRows.length;
var newRow = document.getElementById('mult_ord_tbl').insertRow( numRows );
var cell1=newRow.insertCell(0);
var cell2=newRow.insertCell(1);
var cell3=newRow.insertCell(2);
var cell4=newRow.insertCell(3);
var cell5=newRow.insertCell(4);
cell1.innerHTML = "<tr><td><select name='m_item_name[]' class='form-control'>" +
<?php
foreach($items as $item){
echo ('"<option value=\"'.$item->item_name.'\">'.$item->item_name.'</option>"+');
}
?>
+ "</select></td>";
cell2.innerHTML="<td height='5'><input type='text' name='m_quantity[]' placeholder='Quantity'></td>";
cell3.innerHTML="<td height='5'><input type='text' name='m_amount[]' placeholder='Amount' onblur='total_values()'></td>"
cell4.innerHTML="<td height='5'><input type='text' name='m_order_comment[]' placeholder='Comment'></td>";
cell5.innerHTML="<td><button class='btn btn-danger' onclick='delete_row(this)''><i class='glyphicon glyphicon-remove'></i></button></td></tr>";
}
</script>
MODEL
public function insert_mult_orders($data){
$this->db->insert_batch('piercapitan.sls_ordrs',$data);
return $this->db->affected_rows();
}
Your help is immensely appreciated.

Never mind guys. I found what's wrong. It's my form id! I somehow placed the name on the class and not on the id.
<form class="form_mult_ordrs form-inline" method="post">
It should have been:
<form id="form_mult_ordrs" class="form-inline" method="post">

How to reload table content only whenever a database record is added/changed

I have a PHP page which contains 2 tabs Entry and View. From the Entry tab I can insert data in a database and on my View tab I have an HTML table which displays the data. There is also a provision to insert data from my View tab as well.
I want to reload my table every time some new data is added. I tried this using jQuery but the problem is that it reloads my entire page and sends me back to my Entry tab, even if I have inserted the data from my View tab. Can anyone tell me if there is any provision to reload just HTML table every time I add new data to the database and stay on the same tab from wherever I have added my data?
Here is what I have tried:
$(document).ready(function(e) {
var refresher = setInterval("update_content();", 60000);
})
function update_content(){
$.ajax({
type: "GET",
url: "main.php",
cache: false,
}).done(function( page_html ) {
// alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
});
}
main.php code goes here-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Logsheet-Dhanraj & Co.</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/table_edit.css" rel="stylesheet">
<link href="css/styleinputcontainer.css" rel="stylesheet">
<link href="css/footable.standalone.css" rel="stylesheet">
<link href="css/footable.core.css" rel="stylesheet">
<link rel="stylesheet" href="jquery-ui\jquery-ui-themes-1.11.4\jquery-ui-themes-1.11.4\themes/smoothness/jquery-ui.css" />
</head>
<body>
<header>
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title ">Logsheet-Dhanraj
<button type="button" class="close" data-dismiss="panel">×</button></div>
</div><!--panel heading-->
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active">Entry</li>
<li >View</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="Entry">
<div class="container-fluid">
<form id="dataentry" action="insert_data.php" method="post">
<div class="row">
<br />
<br />
</div><!--empty row-->
<div class="row">
<div class="form-group col-md-2">
<label for="Date">Date</label></br>
<input type="text" name="date" id="date" autocomplete="off"/>
</div><!--col 1-->
<div class="form-group col-md-3">
<div class="input_container">
<label for="Clientname">Client Name</label></br>
<input type="text" name="clientname" id="clientname" onkeyup="autocomplete_client()" autocomplete="off" />
<ul id="clientlist_id"></ul>
</div><!--inputcontainer client-->
</div><!--col 2-->
<div class="form-group col-md-4">
<div class="input_container">
<label for="Staff">Staff</label></br>
<input type="text" name="staff" id="staff" onkeyup="autocomplete_staff()" autocomplete="off"/>
<ul id="stafflist_id"></ul>
</div><!--inputcontainer staff-->
</div><!--col 3-->
</div><!--row1-->
<div class="row">
<div class="form-group col-md-12">
<label for="Matter">Matter</label></br>
<textarea rows="4" cols="60" name="matter" id="matter" ></textarea>
</div><!--matter col-->
</div><!--row2-->
<div class="row">
<div class="col-md-9">
<button id="sub" name="submit" class="btn btn-info">Submit</button>
<button id="cancel" class="btn btn-danger">Cancel</button>
</div><!--button col-->
</div><!--row3-->
</form>
<div class="container-fluid">
<br />
<div class="row">
<br />
<p id="result"></p>
</div>
</div><!--result-container-->
</div><!--entry container-->
</div><!--entry tab-->
<div class="tab-pane fade" id="View">
<div class="container-fluid" id="view_result"><br />
<form id="viewentry" action="view_insert.php" method="post">
<div class="inputWrapper">
<div class="row">
<div class="col-md-3">
<div class="input_container">
<label for="Client Name">Client Name</label><br />
<input type="text" name="viewclientname" id="viewclientname" onkeyup="viewautocomplete_client()" autocomplete="off"/>
<ul id="viewclientlist_id"></ul>
</div>
</div>
<div class="col-md-3">
<div class="input_container">
<label for="Staff Name">Staff Name</label><br />
<input type="text" id="viewstaff" name="viewstaff" onkeyup="viewautocomplete_staff()" autocomplete="off"/>
<ul id="viewstafflist_id"></ul>
</div>
</div>
<div class="col-md-4">
<label for="Matter">Matter</label><br />
<input type="text" id="matter" name="matter" />
</div>
<div class="col-md-1">
<br />
<button id="add" class="btn btn-info">Add New</button>
</div>
<div class="col-md-1">
<br />
<button id="can" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</form>
<p id="done"></p>
<div class="row">
<br /><br /><label for="Search">Search:</label>
<input type="text" id="filter" /><br><br>
</div>
<div id="divGrid">
<table class="footable" data-filter="#filter" id="tableresult">
<thead>
<th>Client name</th>
<th>Staff name</th>
<th>Matter</th>
<th> Delete</th>
</thead>
<?php
include('db.php');
$sql=mysql_query("SELECT * FROM newdata ORDER BY client_name ASC");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$clientname=$row['client_name'];
$staff=$row['staff'];
$matter=$row['matter'];
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td" >
<span id="client_<?php echo $id; ?>" class="text"><?php echo $clientname; ?></span>
<input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="staff_<?php echo $id; ?>" class="text"><?php echo $staff; ?></span>
<input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="matter_<?php echo $id; ?>" class="text"><?php echo $matter; ?></span>
<input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
</td>
<td class="delete_td"><input type="button" id="del" class="btn btn-danger" value="×"></input></td>
</tr>
<?php
}
?>
</tbody>
<tfoot class="hide-if-no-paging">
<th> </th>
<th>
<div class="pagination pagination-centered"></div>
</th>
<th> </th>
<th> </th>
</tfoot>
</table>
</div>
</div>
</div><!--view tab-->
</div><!--tab content-->
</div><!--panel body-->
</div><!--panel info-->
</div><!--container-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/footable.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/footable.filter.js"></script>
<script type="text/javascript" src="js/footable.paginate.js"></script>
<script type="text/javascript" src="scripts/autocomplete.js"></script>
<script type="text/javascript" src="scripts/view_autocomplete.js"></script>
<script type="text/javascript" src="scripts/footable.js"></script>
<script type="text/javascript" src="scripts/insert_submit.js"></script>
<script type="text/javascript" src="scripts/view_insert.js"></script>
<!--<script type="text/javascript" src="scripts/selected_row.js"></script>-->
<script type="text/javascript" src="scripts/table_edit.js"></script>
<script type="text/javascript" src="scripts/deletefootable_row.js"></script>
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true
});
});
</script>
<script>
$(document).ready(function(e) {
var refresher = setInterval("update_content();",60000); // 60 seconds
})
function update_content(){
$.ajax({
type: "GET",
url: "main.php", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
cache: false, // be sure not to cache results
})
.done(function( page_html ) {
// alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
//alert(page_html);
newDoc.close();
});
}
</script>
</body>
</html>

jquery's .load() method does exactly this:
function update_content() {
$('#divGrid').load('main.php #divGrid>table');
}

fetching rows from ajax and append in existing last row

This is my view of page.
This is the code of above page.
When i click on any page button i got that page script in alert(data). but i want from here only rows of this page and
append below the existing rows
.
<script>
$( document ).ready(function() {
$('button[id^="next"]').on('click', function() {
var page = ($(this).attr('value'));
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
alert(data); // what to do i here. please suggest me.
}
});
});
});
</script>
My existing rows is here
<tbody>
<?php foreach($products as $product){ ?>
<tr>
<td class="text-center"><input name="checkbox[]" type="checkbox" value="<?php echo $product['product_id']; ?>"></td>
<td class="text-center"><?php echo $product['name']; ?></td>
<td class="text-center"><?php echo $product['sku']; ?></td>
<td class="text-center"><?php echo $product['status']; ?></td>
<td class="text-center"><?php echo $product['date_time']; ?></td>
<td class="text-center"> Edit</td>
</tr>**//here in the last but this is dynamic <tr>.**
<?php } ?>
</tbody>
Sample of alert(data) is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!----amit bootstrap---->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="view/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="view/css/style.css">
<script src="view/js/jquery.min.js"></script>
<script src="view/bootstrap/js/bootstrap.min.js"></script>
<!--validation code start------->
<link rel="stylesheet" href="view/css/jquery-ui.css"/>
<script src="view/js/jquery-ui.js"></script>
<script src="view/js/jquery.validate.min.js"></script>
<script src="view/js/additional-methods.min.js"></script>
<!-- amit bootstrap end ---->
</head>
<script>
function ToggleAll(source) {
var checkboxes = document.getElementsByName('checkbox[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<script>
$( document ).ready(function() {
$('button[id^="next"]').on('click', function() {
var page = ($(this).attr('value'));
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
alert(data);
}
});
});
});
</script>
<body>
<div class="jumbotron text-center">
<h2>View Upload Product</h2>
</div>
<div class="col-sm-12 menu">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-9 text-right"> Back </div>
<div class="col-sm-1 text-right"> Logout </div>
<div class="col-sm-1"></div>
</div><br/>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-1"></div>
<form role="form" name="deleteproduct" id="deleteproduct" method="POST" action="index.php?act=deleteproduct" class="form-horizontal">
<div class="col-sm-10">
<div class="row">
<div class="col-sm-10"> </div>
<div class="col-sm-2 text-center"><button class="btn btn-primary btn-md" type="submit" name="delete" value="delete">Delete</button></div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th class="text-center"><input type='checkbox' name='checkall' onclick='ToggleAll(this);'></th>
<th class="text-center">Name</th>
<th class="text-center">SKU</th>
<th class="text-center">Status</th>
<th class="text-center">Date & Time</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><input name="checkbox[]" type="checkbox" value="27"></td>
<td class="text-center">test</td>
<td class="text-center">123</td>
<td class="text-center">Y</td>
<td class="text-center">2015-08-14 17:38:29</td>
<td class="text-center"> Edit</td>
</tr>
<tr>
<td class="text-center"><input name="checkbox[]" type="checkbox" value="28"></td>
<td class="text-center">test2</td>
<td class="text-center">1qas</td>
<td class="text-center">Y</td>
<td class="text-center">2015-08-14 17:38:29</td>
<td class="text-center"> Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<button class="btn btn-default btn-md" type="submit" name="magento" value="magento">Magento Upload</button>
</div>
</div>
</div>
</form>
<div class="col-sm-1"></div>
</div>
</div>
<div class="col-sm-12"><br/>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 text-center">
<button class='btn page' id='next1' value='1'>1</button><button class='btn page' id='next2' value='2'>2</button> </div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>

Depending on your ajax response format, if it where json, it could be done like this:
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
var my_data = jQuery.parseJSON(data);
for (var i = 0; i < my_data.length; i++) {
var my_row = $('<tr>');
var my_html = '<td>'+my_data[i].field+'</td>';
my_html += '<td>'+my_data[i].field2+'</td>';
my_row.html(my_html);
$('tbody').append(my_row);
}
}
});
EDIT: But given your code, you need to parse the and append them to your DOM
-EDIT: If you need to make the call just once:
var requestDone = false;
$( document ).ready(function() {
$('button[id^="next"]').on('click', function() {
if( !requestDone) {
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
var my_rows = $(data).find('tbody').html();
$('tbody').append(my_rows);
requestDone = true;
}
});
}
});
});

append a row dyanamically inside a table using javascript

I need to append some number of rows(say 10) in a table using javascript. The row will be fetched from a separate static html page(i guess using the id can fetch them ). The html will be static, so it is been used like a template. How can it be done. since im a beginner am unable to think beyond the below code.
var myTableDiv = document.getElementById("DivTable");
var tableBody = document.getElementById("tBody");
var table = document.getElementById('Table');
for (var i = 0; i < 3; i++) {
var tr = document.getElementById('tableRow');
var TD1= document.getElementById('FirstColumn');
var TD2= document.getElementById('ScondColumn');
var TD3= document.getElementById('ThirdColumn');
var TD4= document.getElementById('FourthColumn');
var TD5= document.getElementById('FifthColumn');
tr.appendChild(TD1);
tr.appendChild(TD2);
tr.appendChild(TD3);
tr.appendChild(TD4);
tr.appendChild(TD5);
tableBody.appendChild(tr);
myTableDiv.appendChild(table);
}
I guess this ll result in overlapping of rows. Not sure. Kindly correct it.
HTML here...
<div class="MgmtView" id="DivTable">
<table class="projectMgmtTable" width="100%" id="Table">
<thead>
<tr>
<th><h4>Review</h4></th>
<th>Sort
<select>
<option>Sample 1</option>
<option>Sample 2</option>
</select>
<div>
<div class="sortUpArrow"></div>
<div class="sortDownArrow"></div>
</div>
</th>
</tr>
</thead>
<tbody id="tBody">
<tr class="rowTable" id="tableRow">
<td id="FirstColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">ID</div>
<div class="labelRight">1</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Address</div>
<div class="labelLeft">
<textarea placeholder="Risk Description Here" rows="11"></textarea>
</div>
</div>
</div>
</td>
<td id="ScondColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Location</div>
<div class="labelRight">
<select disabled="disabled">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Country</div>
<div class="labelRight">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Division</div>
<div class="labelRight">
<select class="showRpn">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<div class="table-row rpnSection dispNone">
<div class="table-cell">
<div class="labelLeft">Amount</div>
<div class="labelRight">
<input value="123" class="greenBg" type="text" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">date of birth</div>
<div class="labelRight">
<input type="text" disabled="disabled" class="calendar" />
</div>
</div>
</div>
</td>
<td id="ThirdColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Relationship</div>
<div class="labelLeft">
<textarea disabled="disabled" placeholder="Risk Description Here" rows="8"></textarea>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Date</div>
<div class="labelRight">
<input disabled="disabled" type="text" class="calendar" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">MStatus</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
</td>
<td id="FourthColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Plan</div>
<div class="labelLeft">
<textarea placeholder="Risk Description Here" rows="8"></textarea>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Target Date</div>
<div class="labelRight">
<input type="text" class="calendar" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
</td>
<td id="FifthColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Category</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Action</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
</td>
</tr>
<tr class="noBorder">
<td colspan="5"> </td>
</tr>
</tbody>
</table>

Try this Code :
With the help of append() function you will add it Like that way :
check the fiddle link also for demo
$(document).ready(function(){
$("table tbody").append("<tr><td>asdf</td><td>asasdsdf</td></tr>");
});
JSFIDDLE

The javascript appendChild() function append the content to the selected elements. Here, if you want to add the rows to existing table then you have to create the string of the table row with require content. Then you can append it.
So, Consider this is your HTML table.
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody id="tBody">
<tr><td>Sam</td>India</tr>
</tbody>
</table>
If you want to add new row, create row element (string) in javascript
var str="<tr><td>Bob</td><td>India Maharashtra</td></tr>";
var tableBody = document.getElementById("tBody");
tableBody.appendChild(str);
If you want to add blank row then only pass blank td like,
var str="<tr><td></td><td></td></tr>";
Try this.

check this demo --- fiddle
var myTable = document.getElementById("tableID");
var appenDiv = document.getElementById("wrap");
var newTable = document.createElement("table");
appenDiv.appendChild(newTable);
for(var i=0;i<2;i++){
var tr = myTable.rows[i];
var cln = tr.cloneNode(true);
newTable.appendChild(cln);
}
I believe that it will help you to understand how to append an html table rows.

Categories