Develop Reference

Modal Box doesn't showing text value

I want make modal boxes for some edit form. The modal box is opening, but my text value does not show up, it only showing my int value (except my 1st value). Whats wrong with my code?
//--Code--//
<button type="button" id="editNilai" class="btn btn-sm btn-info nilai"
data-toggle="modal" data-target="#editNilai"
data-nama="<?= $user['nama'] ?>"
data-nipd="<?= $user['nipd'] ?>"
data-kelas="<?= $user['kelas'] ?>"
data-verifikasi="<?= $user['verifikasi'] ?>"
data-visitasi="<?= $user['visitasi'] ?>"
data-presentasi="<?= $user['presentasi'] ?>" >
Edit
</button>
</td>
</tr>
<?php endforeach; }?>
</tbody></table>
Script for my edit.js
$(document).on("click", ".nilai", function () {
var nama = $(this).data('nama');
var nipd = $(this).data('nipd');
var kelas = $(this).data('kelas');
var verifikasi = $(this).data('verifikasi');
var visitasi = $(this).data('visitasi');
var presentasi = $(this).data('presentasi');
$(".modal-body #nama").val(nama);
$("#nipd_a").val(nipd);
$("#kelas_a").val(kelas);
$("#verifikasi").val(verifikasi);
$("#visitasi").val(visitasi);
$("#presentasi").val(presentasi);
});
Script for My modal box.php
<div class="modal fade" id="editNilai" tabindex="-1" role="dialog" aria-labelledby="user" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="nilai">Edit Nilai Badan Publik</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<?php echo site_url('admin/updateNilai');?>" method="post">
<div class="form">
<div class="">
<div class=" form-group">
<label for="" class="">Badan Publik <span><i class="text-danger">*</i></span></label>
<input name="nama" id="nama" type="" class="form-control text-danger" readonly>
</div>
</div>
<div class="">
<div class=" form-group">
<label for="" class="">NIPD <span><i class="text-danger">*</i></span></label>
<input name="nipd" id="nipd_a" type="number" class="form-control text-danger" readonly>
</div>
</div>
<div class="">
<div class=" form-group">
<label for="" class="">Kategori <span><i class="text-danger">*</i></span></label>
<input name="kelas" id="kelas_a" type="" class="form-control text-danger" readonly>
</div>
</div>
<div class="">
<div class=" form-group">
<label for="" class="">Verifikasi <span><i class="text-danger">*</i></span></label>
<input name="verifikasi" id="verifikasi" type="number" class="form-control text-danger">
</div>
</div>
//---Continue---//
I dont know why data-nipd & data-kelas does not show up, eventhough "button" successfully submitted the value
(From inspect at browser)
<button type="button" id="editNilai" class="btn btn-sm btn-info nilai" data-toggle="modal" data-target="#editNilai" data-nama="Dummy OPD" data-nipd="2101000" data-kelas="OPD Sumbar 2021" data-verifikasi="20" data-visitasi="30" data-presentasi="">
Edit Nilai</button>

I think I found the answer. It the browser cache/cookies, after i clearing my all browsing data, value show up normally now. Sorry, I dont know browser cache can affect this.

Populate modal with a mysql query reult data

i have an html page that shows data populated from mysql database.
I give to user choice to edit records. I would like to use a modal form that, when pressed edit, it open up and display data result from mysql db and realated to a certain "id".
Can you help me to achieve this?
Reading on web i've understood that i have to use jquery, but i cannot find a way.
For now i tried as following:
<form method="post">
<div class="modal fade" id="edit_grp" tabindex="-1" role="dialog" aria-labelledby="edit_grpLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit_grpLabel">Modifica Interno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Sequenza Chiamata</label>
<input type="text" class="form-control" name="edit_grp_pos" id="edit_grp_pos" value="<?php echo $row[0]['grp_pos']; ?>">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="email" class="form-control" name="edit_grp_name" id="edit_grp_name" value="<?php echo $row[0]['grp_name']; ?>">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" name="edit_grp_phone" id="edit_grp_phone" value="<?php echo $row[0]['grp_phone']; ?>">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" name="submit" value="submit" id="submit_edit_grp" class="btn btn-primary" onClick="closeAll()">Modifica</button>
</div>
</div>
</div>
</div>
</form>
EDIT 1:
I'am having some tests.
For now 've changed code like this:
`
<form method="post">
<div class="modal fade" id="edit_grp" tabindex="-1" role="dialog" aria-labelledby="edit_grpLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit_grpLabel">Modifica Interno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="phone_details">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" name="submit" value="submit" id="submit_edit_grp" class="btn btn-primary" onClick="closeAll()">Modifica</button>
</div>
</div>
</div>
</div>
</form>
`
`
$(document).on('click', '.view_phone_data', function(){
var data_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"POST",
data:{data_id:data_id},
success:function(data){
$('#phone_details').html(data);
$('#edit_grp').modal('show');
}
});
});
`
and select.php
`
<?php
if(isset($_POST["data_id"]))
{
$output = '';
$connect = mysqli_connect("localhost","administrator","psw","db");
$query = "SELECT * FROM gruppioxe WHERE id = '".$_POST["data_id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Ordine Chiamata</label>
<input type="tel" class="form-control" id="'.$row["grp_pos"].'" name="'.$row["grp_pos"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="text" class="form-control" id="'.$row["grp_name"].'" name="'.$row["grp_name"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" id="'.$row["grp_phone"].'" name="'.$row["grp_phone"].'">
</div>
</form>
';
}
echo $output;
}
?>
`
But still no result..

Solved!!!
i've changed select.php as following:
`
$output .= '
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Ordine Chiamata</label>
<input type="tel" class="form-control" id="grp_pos" name="grp_pos" value="'.$row["grp_pos"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="text" class="form-control" id="grp_name" name="grp_name" value="'.$row["grp_name"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" id="grp_phone name="grp_phone" value="'.$row["grp_phone"].'">
</div>
</form>
';
}
echo $output;
`

PHP Code Igniter cannot show data in modal bootstrap

I'm using codeigniter franmework. I try to appear the data into a modal. but i have a problem with my datas. They don't appear in modal. I followed the tutorial on the internet but it doesn't work. Here is my button click code which purposed to show data :
<a href="javascript:;"
data-id="<?php echo $row->id ?>"
data-kode="<?php echo $row->kode ?>"
data-subkode="<?php echo $row->subkode ?>"
data-nama_kegiatan="<?php echo $row->nama_kegiatan ?>"
data-toggle="modal" data-target="#edit-data">
<button data-target="#ubah-data" data-toggle="modal" class="btn btn-info">Ubah</button>
</a>
This is my modal code
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit-data" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Ubah Data</h4>
</div>
<form class="form-horizontal" action="<?php echo base_url('dashboard/rka2/ubah')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Kode</label>
<div class="col-lg-10">
<input type="hidden" id="id" name="id">
<input type="text" class="form-control" id="kode" name="kode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Subkode</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="subkode" name="subkode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Nama Kegiatan</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="nama_kegiatan" name="nama_kegiatan">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" type="submit"> Simpan </button>
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
</div>
</form>
</div>
</div>
And this is the script for getting datas
<script>
$(document).ready(function() {
// Untuk sunting
$('#edit-data').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#id').attr("value",div.data('id'));
modal.find('#kode').attr("value",div.data('kode'));
modal.find('#subkode').attr("value",div.data('subkode'));
modal.find('#nama_kegiatan').attr("value",div.data('nama_kegiatan'));
});
});
</script>

Insert data to my CRUD table

I have this AJAX code that will insert data to my CRUD table. But when I click the button that will save/insert the data to my table it will not show. All I want here is to insert my data using AJAX to my table without refreshing or using the form element in html.
Here is my code with my modal and the body of my table:
$(document).ready(function() {
// Add
$('#btn_add').click(function() {
var id = $('#brand_id').val();
var bname = $('#bname').val();
var bstatus = $('#bstatus').val();
$.ajax({
url: 'add_brand.php',
method: 'POST',
data: {
bname: bname,
bstatus: bstatus
},
success: function(data) {
$('#' + id).children('td[data-target=brand_name]').text(bname);
$('#' + id).children('td[data-target=brand_status]').text(bstatus);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="modal-default">
<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">×</span></button>
<h4 class="modal-title">Add a brand</h4>
</div>
<div class="modal-body">
<input type="hidden" id="brand_id" />
<div class="form-group">
<label for="bname">Brand Name</label>
<input type="text" class="form-control" id="bname" name="bname" placeholder="Brand Name" />
</div>
<div class="form-group">
<label for="bstatus">Status</label>
<select class="form-control select2" style="width: 100%;" id="bstatus" name="bstatus">
<option>Available</option>
<option>Not Available</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btn_add">Save Changes</button>
</div>
</div>
</div>
</div>
<tbody>
<?php
include("db_connect/connect.php");
$query = mysqli_query($con, "SELECT * FROM brand");
while ($row = mysqli_fetch_array($query)) { ?>
<tr id="<?php echo $row['brand_id']; ?>">
<td data-target="brand_name"><?php echo $row["brand_name"]; ?></td>
<td data-target="brand_status"><?php echo $row["brand_status"]; ?></td>
<td>
<a data-role="edit" data-id="<?php echo $row['brand_id']; ?>" class="btn btn-success"><i class="fa fa-edit"></i> Edit</a>
<i class="fa fa-trash-o"></i> Delete
</td>
</tr>
<?php
}
?>
</tbody>

set selectbox as selected while updating opened in modal

Here am I updating the data through modal and its working but the thing is, I want to show the selected data as selected. The update function is working but not getting idea for the value to be selected.
Here is my view
<td><a class="btn btn-primary vehicle_user" data-toggle="modal" data-target="#myModaledit" id="<?php echo $row->id;?>" vehicle="<?php echo $row->vehicle_id; ?>">Edit</a></td>
This is my modal
<div class="modal fade" id="myModaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Vehicle</h4>
</div>
<form action="<?php echo base_url();?>vehicle/vehicle_control/edit_vehicle_user" method="post">
<div class="modal-body">
<div class="form-group">
<label for="vehicle" class="control-label">Vehicle:</label>
<select name="vehicle" class="form-control">
<?php foreach($vehicles as $res){?>
<option <?php if($res->id==$row->vehicle_id)echo 'selected' ?> value="<?php echo $res->id;?>"><?php echo $res->name;?></option>
<?php }?>
</select>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" value="" id="vehicle_user_id">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Here is my jQuery script
$(document).ready(function() {
$(".vehicle_user").click(function() {
var id = $(this).attr('id');
//alert(id);
$("#vehicle_user_id").val(id);
$("#vehicle").val($(this).attr('vehicle'));
});
});

As you not specified the ID attribute. You need to use Attribute Selector to target the vehicle drop-down element.
$("[name='vehicle']").val($(this).attr('vehicle'));
OR, Set the ID attribute of vehicle drop-down element.
<select id="vehicle" name="vehicle" class="form-control">
</select>