We Keep Coding

selectbox the option I chose goes back to the top

When the page is redirected, the language I chose in the box does not
appear. At first, whatever is available is chosen.
here is what I want to do: change option data
<select id='lang' class='btn btn-xs btn-primary icons-select2'>
<?php
$query_lang=mysqli_query($con, "SELECT * FROM tb_lang");
while($lang = mysqli_fetch_assoc($query_lang)){
if ($lang['durum']==1)}
?>
<option value = "<?php echo $lang['lang_fix']; ?>" data-min="_<?php echo $lang['lang_fix']; ?>"
data-icon="<?php echo $lang['lang_flag']; ?>">
<?php
echo strtoupper($lang['lang_fix']);
?>
</option>
<?php }} ?>
</select>
<script>
$(document).ready(function () {
$('body').on('change','#lang', function() {
var lang_id= $(this).val();
window.location.replace("index.php?lang="+lang_id);
});
});
</script>

First retrieve the lang sent over GET by
$lang_id = $_GET['lang'];
then check it against the data you are looping through
<option value = "<?php echo $lang['lang_fix']; ?>" data-min="_<?php echo $lang['lang_fix']; ?>" data-icon="<?php echo $lang['lang_flag']; ?>" <?php if ($lang_id == $lang['lang_fix']) echo "selected"; ?>>
making your code look like below, so the option you want to be selected will have the necessary selected attribute.
$lang_id = $_GET['lang'];
<select id='lang' class='btn btn-xs btn-primary icons-select2'>
<?php
$query_lang=mysqli_query($con, "SELECT * FROM tb_lang");
while($lang = mysqli_fetch_assoc($query_lang)){
if ($lang['durum']==1)}
?>
<option value = "<?php echo $lang['lang_fix']; ?>" data-min="_<?php echo $lang['lang_fix']; ?>" data-icon="<?php echo $lang['lang_flag']; ?>" <?php if ($lang_id == $lang['lang_fix']) echo "selected"; ?>>
<?php
echo strtoupper($lang['lang_fix']);
?>
</option>
<?php }} ?>
</select>
<script>
$(document).ready(function () {
$('body').on('change','#lang', function() {
var lang_id= $(this).val();
window.location.replace("index.php?lang="+lang_id);
});
});
</script>

How to populate the div with the response data from Ajax?

I have an Ajax post request which on success returns an array which I would like to load into a div. Now, doing this with single values is quite easy but with an array, I can't seem to find the right way to do it.
<fieldset id="div1" ondrop="remove_from_customer(event)" ondragover="allowDrop(event)">
<legend>Vacant parking spots</legend>
<?php $counter = 0;
echo count(get_free_parking_spots());
foreach (get_free_parking_spots() as $row) { ?>
<div id="count_id<?php echo $counter; ?>" data-parking_gate="<?php echo $row['parking_gate_id']; ?>" data-location_id="<?php echo $row['location_id']; ?>" data-spot_no="<?php echo $row['spot_no']; ?>" draggable="true" ondragstart="drag(event)">
<label><?php echo '' . $row['name'] . '' ?></label>
<label><?php echo '<p>Gate: ' . $row['parking_gate_id'] . '<p>Spot: ' . $row['spot_no'] . '' ?></label>
</div>
<?php $counter++;
} ?>
</fieldset>
<fieldset id="div2" ondrop="drop_to_customer(event)" ondragover="allowDrop(event)">
<legend>Current parking spots of the customer</legend>
<?php $count = 0;
echo count(get_customer_parking_spots($selected_user_id));
foreach (get_customer_parking_spots($selected_user_id) as $user) { ?>
<div id="count_idd<?php echo $count; ?>" data-customerid="<?php echo $user['customer_id']; ?>" data-gate_id="<?php echo $user['gate_id']; ?>" data-spot_id="<?php echo $user['spot_id']; ?>" data-location_id="<?php echo $user['location_id']; ?>" draggable="true" ondragstart="drag(event)">
<label><?php echo '' . $user['location_name'] . '' ?></label>
<label><?php echo '<p>Gate: ' . $user['gate_id'] . '<p>Spot: ' . $user['spot_id'] ?></label>
</div>
<?php $count++;
} ?>
</fieldset>
Ajax:
function drop_to_customer(ev) {
if (<?php echo count(get_customer_parking_spots($selected_user_id)); ?> < 3) {
const el = document.querySelector("[id=" + "\'" + ev.dataTransfer.getData("text") + "\'" + "]");
var add_location = "add location";
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
$.ajax({
type: 'post',
url: 'external_submit.php',
data: {
add_spot: add_location
},
success: function(html) {
$('#div1').html($('#div1', html).html()); //my failed attempt to reload data into the div here
}
});
}
}
As you can see when drop_to_customer() is called I am doing a post request and returning an array which I would like to load into the other div with id div1. The array is json_Encoded and it is returned successfully.
EDIT:
This is how I echo the array in PHP:
echo json_encode(array("array" => get_data($_POST['id']), "html" => $html))

Load function in loop

I have an working loadfunction. But when I use this in an loop it won't work, the data is not pulled or the code is not (correctly) triggered. When viewing the console there is no error. So hard to determine why the data is not shown.
In this code when the users selects an item of the first select list the second select list is updated with the corresponding data.
<select class="form-control" id="add_off_relatie_id" name="add_off_relatie_id" onchange="add_contact_table_4()">';
foreach ($rows_adr as $row_adr)
{
echo '<option ';if($row['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
}
echo '
</select>
<select class="form-control" id="add_off_contact_id" name="add_off_contact_id" onchange="validate_add_off_table_4()">';
foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row['relatie_id'])
{
echo '<option ';if($row['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
}
echo '
</select>
<script type="text/javascript">
function add_contact_table_4()
{
$('#add_off_contact_id').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('add_off_relatie_id').value)
}
</script>
But when using the same structure in an for loop and the user select an new item in the first select list the data in the second select list is not updated.
<select class="form-control" id="edit_off_relatie_id['.$i.']" name="edit_off_relatie_id" onchange="edit_contact_table_4(this, '.$i.')">';
foreach ($rows_adr as $row_adr)
{
echo '<option ';if($row_table_4['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
}
echo '
</select>
<select class="form-control" id="edit_off_contact_id['.$i.']" name="edit_off_contact_id" onchange="validate_edit_off_table_4(this, '.$i.')">';
foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row_table_4['relatie_id'])
{
echo '<option ';if($row_table_4['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
}
echo '
</select>
<script type="text/javascript">
function edit_contact_table_4(selectVeld, nr)
{
$('edit_off_contact_id['+nr+']').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('edit_off_relatie_id['+nr+']').value)
}
</script>
Any suggestions would be fantastic.

Square brackets are used to special tasks, like getting attributes, like in input[name=something], so they need to be escaped:
$('edit_off_contact_id\\['+nr+'\\]').load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById('edit_off_relatie_id\\['+nr+'\\]').value)
Or you can change string format for your ids:
<select class="form-control" id="edit_off_relatie_id-' . $i . '" name="edit_off_relatie_id" onchange="edit_contact_table_4(this, ' . $i . ')">';
foreach ($rows_adr as $row_adr)
{
echo '<option ';if($row_table_4['relatie_id'] == $row_adr['id']) { echo 'selected="selected"';} echo 'value="'.$row_adr['id'].'">'.$row_adr['naam'].'</option>';
}
echo '
</select>
<select class="form-control" id="edit_off_contact_id-' . $i . '" name="edit_off_contact_id" onchange="validate_edit_off_table_4(this, ' . $i . ')">';
foreach ($rows_cnt as $row_cnt) if($row_cnt['relatie_id'] == $row_table_4['relatie_id'])
{
echo '<option ';if($row_table_4['contact_id'] == $row_cnt['id']) { echo 'selected="selected"';} echo 'value="'.$row_cnt['id'].'">'.$row_cnt['naam'].'</option>';
}
echo '
</select>
<script type="text/javascript">
function edit_contact_table_4(selectVeld, nr)
{
$(`edit_off_contact_id-${nr}`).load('includes/dynamic_drop/relatie_contact.php?choice=' + document.getElementById(`edit_off_relatie_id-${nr}`).value)
}
</script>

To display data stored on the dropdown menu

I have a problem for the results to appear in my dropdown menu. For the dropdown menu I don't directly choose the type that matches the id that appears.
How to make the dropdown menu to appear according to the item ID?
This View.
label for="type">Type</label>
<select class="form-control" id="type_id" name="type_id">
<?php foreach($type as $types) : ?>
<?php if( $types == $barang['type_id']) : ?>
echo '<option value="<?php echo "$types->type_id"?>" selected><?php echo "$types->type_nama"?></option>';
<?php else : ?>
echo '<option value="<?php echo "$types->type_id"?>"><?php echo "$types->type_nama"?></option>';
<?php endif; ?>
<?php endforeach; ?>
</select>
This Model.
public function getTypeQuery()
{
$this->db->order_by('type_id', 'asc');
$query = $this->db->get('type');
return $query->result();
}
public function getTypeById($id)
{
return $this->db->get_where('barang', ['barang_id' => $id])->row_array();
}
public function ubahTypeBarang ()
{
$data = [
"barang_kode"=> $this->input->post('barang_kode', true),
"type_id"=> $this->input->post('type_id', true),
"barang_nama"=> $this->input->post('barang_nama', true),
];
$this->db->where('barang_id', $this->input->post('barang_id'));
$this->db->update('barang', $data);
}
This Controller.
public function ubah_type($id)
{
$data['judul'] = 'Form Ubah Data Mahasiswa';
$data['barang'] = $this->Gudang_model->getTypeById($id);
$data['type'] = $this->Gudang_model->getTypeQuery();
$this->form_validation->set_rules('barang_kode', 'Kode', 'required');
$this->form_validation->set_rules('type_id', 'Type', 'required');
$this->form_validation->set_rules('barang_nama', 'Nama Barang', 'required');
if($this->form_validation->run() == FALSE)
{
$this->load->view('templates/header', $data);
$this->load->view('gudang/ubah_type', $data);
$this->load->view('templates/footer');
} else {
$this->Gudang_model->ubahTypeBarang();
$this->session->set_flashdata('flash', 'Diubah');
redirect('gudang/lihat_type');
}
}
`

Try change the views like this :
<label for="type">Type</label>
<select class="form-control" id="type_id" name="type_id">
<?php foreach($type as $types) : ?>
<?php if( $types->type_id == $barang['type_id']) : ?>
<option value="<?php echo $types->type_id ?>" selected><?php echo $types->type_nama ?></option>
<?php else : ?>
<option value="<?php echo $types->type_id ?>"><?php echo $types->type_nama ?></option>
<?php endif; ?>
<?php endforeach; ?>
</select>

codeigniter 3rd combo box does not display data

This is my Model
function getMatkul($dosen) {
$data = array();
$query = $this->db->get_where('input_jadwal', array('dosen' => $dosen));
if ($query->num_rows() > 0) {
foreach ($query->result_array() as $row){
$data[] = $row;
}
}
$query->free_result();
return $data;
}
function getKelas($matkul) {
$data = array();
$query = $this->db->get_where('input_jadwal', array('kode_matkul'=>$matkul));
if ($query->num_rows() > 0) {
foreach ($query->result_array() as $row){
$data[] = $row;
}
}
$query->free_result();
return $data;
}
This is my View
<select name="dosen" id="dosen" class="form-control" required="">
<option disabled="" selected="">Dosen</option>
<?php foreach($dosen as $d){ ?>
<option value="<?php echo $d['dosen']; ?>"><?php echo $d['dosen']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-12 form-group">
<select name="matkul" id="matkul" class="form-control" required="">
<option disabled="" selected="">Mata Kuliah</option>
<?php foreach($matkul as $m) {?>
<option value="<?php echo $m['kode_matkul']; ?>"><?php echo $m['matkul']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-12 form-group">
<select name="kelas" id="kelas" class="form-control" required="">
<option disabled="" selected="">Kelas</option>
<?php foreach($kelas as $k) {?>
<option value="<?php echo $k['kelas']; ?>"><?php echo $k['kelas']; ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-12 form-group">
<button name="mysubmit" class="btn btn-primary pull-left btn-flat" type="submit">Show Record</button>
</div>
</div>
</div>
</form>
</div>
</section>
<script type="text/javascript">
<?php
$this->load->model('combobox_model');
foreach($dosen as $dm) { ?>
var <?php echo str_replace(' ','',$dm['dosen'].$dm['dosen']); ?> = [
<?php $resultM = $this->combobox_model->getMatkul($dm['dosen']); ?>
<?php foreach ($resultM as $rm) { ?>
{display: "<?php echo $rm['matkul']; ?>", value: "<?php echo $rm['kode_matkul']; ?>" },
<?php } ?>];
<?php } ?>
$("#dosen").change(function() {
var parent = $(this).val();
switch(parent){
<?php foreach($dosen as $dd){ ?>
case '<?php echo $dd['dosen']; ?>':
lista(<?php echo str_replace(' ','',$dd['dosen'].$dd['dosen']); ?>);
break;
<?php } ?>
default: //default child option is blank
$("#matkul").html('');
break;
}
});
function lista(array_list)
{
$("#matkul").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#matkul").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}
</script>
<script type="text/javascript">
<?php
$this->load->model('combobox_model');
foreach($matkul as $mk) { ?>
var <?php echo str_replace(' ','',$mk['matkul'].$mk['kode_matkul']); ?> = [
<?php $resultK = $this->combobox_model->getKelas($mk['kode_matkul']); ?>
<?php foreach ($resultK as $rk) { ?>
{display: "<?php echo $rk['kelas']; ?>", value: "<?php echo $rk['kelas']; ?>" },
<?php } ?>];
<?php } ?>
$("#matkul").change(function() {
var parent = $(this).val();
switch(parent){
<?php foreach($matkul as $tt){ ?>
case '<?php echo $tt['kode_matkul']; ?>':
listb(<?php echo str_replace(' ','',$tt['matkul'].$tt['kode_matkul']); ?>);
break;
<?php } ?>
default: //default child option is blank
$("#kelas").html('');
break;
}
});
function listb(array_list)
{
$("#kelas").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#kelas").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}
</script>
Combobox 1 linked to combobox 2, combobox 2 linked to combobox 3. when When I run it, only combo box 1 and 2 which have the data. I think the problem is on javascript. Need help, thank you. This is the pic of my combobox