kasthuri S kasthuri S - 6 months ago 14
jQuery Question

How to append the value in table

I am doing one date range form field,here console.log(fname) means i got all values and i want to append this value in one table td,i am trying like this method,but it is not working,how can i append this value in td



<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="reservation">
</div>

<script type="text/javascript">
$(document).ready(function() {
$("#reservation").on("change", function() {
var reservation = $(this).val();
$.ajax({
type: 'post',
url: 'date-range.php',
data: {
logindate: reservation,
},
success: function(data) {
var res = jQuery.parseJSON(data); // convert the json
console.log(res);
if (res['status'] == "success") {

var htmlString = '';

$.each(res['data'], function(key, value) {

htmlString += '<tr>';
var ssm_id = value.ssm_id; // here i got ssmid
htmlString += '<td>' + value.ssm_id + '</td>';
$.ajax({
type: 'post',
url: 'config/functions.php',
data: {
ssm_id: ssm_id,
},
success: function(fname) {
console.log(fname); //here i got all names
// kani
// mahi
// kogila like this ans it will come console.log(fname),i want appent this value in hmlString+='<td>'+fname+'</td>';
htmlString += '<td>' + fname + '</td>'; // here value is not appending,nothing is happen
}
});

htmlString += '<td>' + 'Muthuraja' + '</td>';
htmlString += '<td>' + '20-05-2016' + '</td>';
htmlString += '<td>' + 'status' + '</td>';
htmlString += '<td>' + value.source + '</td>';
htmlString += '<td>' + "<span style='color:green'>View Profile</span>" + '</td>';

htmlString += '</tr>';
});
$('#datatable-editable > tbody').empty().append(htmlString);
} else {
$('#datatable-editable > tbody').empty().append("<center style='height:100px;padding-top:36px;color:red;font-size:17px;'><b>No matching records found</b></center>");
}
}
});
});
});
</script>


functions.php

<?php
$ssm_id = $_POST['ssm_id'];
if(!empty($ssm_id)){
echo firstname($ssm_id);
}

function firstname($id)
{
$f="SELECT firstname FROM register WHERE matri_id='$id'";
$rr=mysql_query($f);
while($row=mysql_fetch_array($rr))
{
$firstname = $row['firstname'];
}
return $firstname;
}

?>




Answer

Just writing the success part. Hope you will get this to working structure.

success: function(data) {
  var res = jQuery.parseJSON(data); // convert the json
  console.log(res);
  if (res['status'] == "success") {
    $('#datatable-editable > tbody').empty();//emtpy tbody at the begining
    $.each(res['data'], function(key, value) {
      var htmlString = ''; //Place declaration inside each
      htmlString += '<tr>';
      var ssm_id = value.ssm_id; // here i got ssmid
      htmlString += '<td>' + value.ssm_id + '</td>';
      $.ajax({
        type: 'post',
        url: 'config/functions.php',
        data: {
          ssm_id: ssm_id,
        },
        success: function(fname) {
          htmlString += '<td>' + fname + '</td>'; 
          //move the whole set inside success of this ajax
          htmlString += '<td>' + 'Muthuraja' + '</td>';
          htmlString += '<td>' + '20-05-2016' + '</td>';
          htmlString += '<td>' + 'status' + '</td>';
          htmlString += '<td>' + value.source + '</td>';
          htmlString += '<td>' + "<span style='color:green'>View Profile</span>" + '</td>';
          htmlString += '</tr>';
          $('#datatable-editable > tbody').append(htmlString);
        }
      });

    });

  }
}