Andry Priandani Andry Priandani - 4 years ago 154
Ajax Question

Show Multiple Value With Ajax

I have 2 db 'srtptr' and 'deskripsisrt' and I want to show them with modal bootstrap
I successfully show from 'srtptr' but I don't know how to show from 'deskripsisrt',..

this my db 'deskripsisrt'

+--------------+------------------+-----------+
| id_des | deskripsi | id_srt |
+--------------+------------------+-----------+
| 1 | Test 4 | 4 |
| 2 | Test 2 | 4 |
+--------------+------------------+-----------+


I want to show multiple values on my modal.

Modal script:

<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Add User</h4>
</div>
<div class="modal-body" style="max-height: 600; overflow-y: scroll;">

<div class="alert alert-danger" role="alert" id="removeWarning">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Anda yakin ingin menghapus user ini
</div>
<br>
<form class="form-horizontal" id="formUser" method="post" target="blank">
<input type="hidden" class="form-control" id="type" name="type">
<input type="hidden" class="form-control" id="id_srt" name="id_srt">
<input id="desc" value="1" type="hidden" >

<span style="font-weight: bold">Kepada PT</span>
<div class="input-group">
<input type="text" class="form-control" name="tujuan_srt" id="tujuan_srt" value="" title="Tujuan Surat" placeholder="Tujuan Surat" maxlength="25" size="100">
</div>
</br>
<span style="font-weight: bold">Kepada Nama</span>
<div class="input-group">
<input type="text" class="form-control" name="kepada_srt" id="kepada_srt" value="" title="Tujuan Surat" placeholder="Tujuan Surat" maxlength="25" size="100">
</div>
</br>
<span style="font-weight: bold">Tanggal</span>
<div class="input-group">
<input type="text" name="tanggal" class="form-control" id="tanggal" value="<?php echo $fungsi->Tanggal('tgl').' '.$fungsi->Tanggal('blnL').' '.$fungsi->Tanggal('THN'); ?>" title="Tanggal Pembayaran" readonly="readonly" size="100">
</div>

</br>
<div class="col-md-6 konten "></br>
<span style="font-weight: bold">Deskripsi</span>
</div>

<div class="col-md-6 konten " style="Text-align: Right;"></br>
<button type="button" onclick="tambahDesc(); return false;" style="cursor:pointer; font-size:8pt; border-radius:2px; min-width:10px; border:0px; background:#4D4D4D; color:#FFFFFF; font-weight:bold;">Tambah Deskripsi</button>
</div>

<table border="1" style="width:30%" id="test">
<tr><td>deskripsi</td></tr>
**I WANT TO SHOW VALUE FROM DB 'deskripsisrt' HERE!!**
</table>
<div id="divDesc"> </div>
</br></br></br></br>
</form>
</div>



<div class="modal-footer">
<button type="submit" id="btn1" class="btn btn-default" style="align:left">Cetak</button>
<button type="button" onClick="submitUser()" class="btn btn-default" data-dismiss="modal">Submit</button>
<button type="button" onClick="clearModals()" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>


AJAX Code:

//Show Modal
function showModals( id_srt )
{
waitingDialog.show();
clearModals();


// For Execute Data (EDIT & DELETE)
if( id_srt )
{
$.ajax({
type: "POST",
url: "crud.php",
dataType: 'json',
data: {id_srt:id_srt,type:"get"},
success: function(res) {
waitingDialog.hide();
setModalData( res );
}
});
}

// FOR ADD Data
else
{
$("#myModals").modal("show");
$("#myModalLabel").html("New User");
$("#type").val("new");
waitingDialog.hide();
}
}

//Show Data On Modal For Edit
function setModalData( data )
{

$("#myModalLabel").html(data.id_srt);
$("#id_srt").val(data.id_srt);
$("#type").val("edit");
$("#tujuan_srt").val(data.tujuan_srt);
$("#kepada_srt").val(data.kepada_srt);
$("#tanggal").val(data.tanggal);
$("#myModals").modal("show");
}


//For Execute EDIT/DELETE/ADD NEW To DB
function submitUser()
{
var formData = $("#formUser").serialize();
waitingDialog.show();
$.ajax({
type: "POST",
url: "crud.php",
dataType: 'json',
data: formData,
success: function(data) {
dTable.ajax.reload(); // Automatic Reload Table Page
waitingDialog.hide();
}
});
}

$('#btn1').click(function()
{
$('#formUser').attr('action','setcetak.php');
$('#formUser').submit();
}
);

//Delete Data
function deleteUser( id_srt )
{
clearModals();
$.ajax({
type: "POST",
url: "crud.php",
dataType: 'json',
data: {id_srt:id_srt,type:"get"},
success: function(data) {
$("#removeWarning").show();
$("#myModalLabel").html("Delete User");
$("#id_srt").val(data.id_srt);
$("#type").val("delete");
$("#tujuan_srt").val(data.tujuan_srt).attr("disabled","true");
$("#kepada_srt").val(data.kepada_srt).attr("disabled","true");
$("#tanggal").val(data.tanggal).attr("disabled","true");
$("#myModals").modal("show");
waitingDialog.hide();
}
});
}

//Clear Modal
function clearModals()
{
$("#removeWarning").hide();
$("#tujuan_srt").val("").removeAttr( "disabled" );
$("#kepada_srt").val("").removeAttr( "disabled" );
$("#tanggal").val("").removeAttr( "disabled" );

}

// ADD Description Field
function tambahDesc() {
var desc = document.getElementById("desc").value;
var stre;
stre="<div id='srow" + desc + "'><div class='col-md-12 konten' style='Text-align: Right;'></br><a href='#' style=\"color:#EC090D; cursor:pointer; text-align: Right;\" onclick='hapusElemen(\"#srow" + desc + "\"); return false;'>hapus</a><div class='input-group'><textarea rows='6' cols='100' type='text' class='desce form-control' name='deskripsi[]' placeholder='deskripsi' size='100'></textarea></br></div></div></div>";
$("#divDesc").append(stre);
desc = (desc-1) + 1;
document.getElementById("desc").value = desc;
}

//Delete Description Field
function hapusElemen(desc) {
$(desc).remove();
}

$(function(id_srt) {

var data_table = "";
$.ajax({
type:"POST",
url: "crud.php",
dataType: "json",
data:{id_srt:id_srt,type:"getdes"},
success: function(data) {
for (var i =0; i<data.length; i++){
data_table +="<tr> <td> "+data[i].deskripsi+"</td></tr>";
}
$('#test').append(data_table);
}
});
});


Controller Code :

<?php
require 'config/action.php';
$fungsi = new Fungsi();
//Connection Database
$con = mysqli_connect("localhost","root","","kw");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

switch ($_POST['type']) {

//Tampilkan Data
case "get":

$SQL = mysqli_query($con, "SELECT * FROM srtptr WHERE id_srt='".$_POST['id_srt']."'");
$return = mysqli_fetch_array($SQL,MYSQLI_ASSOC);
echo json_encode($return);
break;

case "getdes": // NEW CODE This Show a table 'deskripsisrt'

$SQL =mysqli_query($con,"SELECT * FROM deskripsisrt WHERE id_srt = '".$_POST['id_srt']."'");
while ($return = mysqli_fetch_array($SQL,MYSQLI_ASSOC)) {
$rows[] = $return;
}
echo json_encode($rows);
break;

//Tambah Data
case "new":

$SQL = mysqli_query($con,
"INSERT INTO kwitansi SET
kwnum='".$_POST['kwnum']."',
tglkw='".$_POST['tglkw']."',
dari='".$_POST['dari']."',
penerima='".$_POST['penerima']."',
nominal='".$_POST['nominal']."',
pembayaran='".$_POST['pembayaran']."'
");
if($SQL){
echo json_encode("OK");
}
break;

//Edit Data
case "edit":

$SQL = mysqli_query($con,
"UPDATE srtptr SET
tujuan_srt='".$_POST['tujuan_srt']."',
kepada_srt='".$_POST['kepada_srt']."',
tanggal='".$_POST['tanggal']."'
WHERE id_srt='".$_POST['id_srt']."'
");
if($SQL){
echo json_encode("OK");
}
break;

//Hapus Data
case "delete":

$SQL = mysqli_query($con, "DELETE FROM srtptr WHERE id_srt='".$_POST['id_srt']."'");
if($SQL){
echo json_encode("OK");
}
break;
}
?>


I think this needs a loop on ajax but I don't know to make the loop ajax.

Answer Source

Assuming that the json coming from controller is like this

    [
     {"id_des":45,"deskripsi":"test","id_srt":2},
     {"id_des":46,"deskripsi":"test1","id_srt":3},
     {"id_des":47,"deskripsi":"test2","id_srt":4},
    ]

update your function of success like this 
   success: function(data) {

    $.each(data, function() {
      $.each(this, function(k, v) {
        console.log(k + " " +v);
      });
    });
   }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download