Select Picker Is Not Showing When i call Using Ajax - php

Question

I am Calling this File using Ajax But this file is displaying but without selectpicker, I don't see any error if anyone can help me?
Bootstrap Selectpicker Will Show Timing From Monday to Sunday
IF condition is used to check whether this time is present in the database or not if present check the checkbox and show the time in bootstrap Selectpciker
All the condition displaying in this file is important I cant remove them
<?php
error_reporting(E_ALL);
ini_set("display_errors",1);
require_once'configuration/config.php';
date_default_timezone_set("Asia/Kolkata");
$startTime = strtotime(date("H:i:s",strtotime('00:00:00')));
$endTime = strtotime(date('H:i:s',strtotime('23:59:00')));
if(isset($_POST['doc_id'])){
$days = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
$doc_id ='921007GAURAV984934';
$hp_id = 'INRJAPPO2E381F220220';
$stmt = $con->prepare('SELECT * FROM tb_doc_loc WHERE doc_id=? AND hp_id= ?');
$stmt->bind_param('ss',$doc_id,$hp_id);
$stmt->execute();
$res = $stmt->get_result();
while($row = $res->fetch_array()){
$data = $row['datas'];
}
$datas = explode(',',$data);
$chunk = array_chunk($datas,5);
for($i=0;$i<count($chunk);$i++): ?>
<?php if($chunk[$i][0] == $days[$i]): ?>
<tr>
<td>
<div class=" form-check" style="margin-top: 7px;">
<input class="form-check-input" type="checkbox" name="edit_days" value="<?php echo $chunk[$i][0]?>" checked="checked">
<?php echo $chunk[$i][0]?>
</div>
</td>
<td>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label>Morning Timings</label><br>
<select class="selectpicker " id="<?php echo $chunk[$i][0]?>_Morning_time" title="Select Timings" multiple data-max-options="2" data-size="5">
<?php for($k=$startTime;$k<=$endTime;$k = $k + 30*60): ?>
<option value="<?php echo date('H:i',$k);?>"<?php if($chunk[$i][1] == date('H:i',$k) ||$chunk[$i][2] == date('H:i',$k)){echo"Selected";}?> ><?php echo date('H:i',$k)?></option>
<?php endfor; ?>
</select>
</div>
<div class="col-sm-6">
<label>Evening Timings</label><br><!-- line 73 -->
<select class="selectpicker" id="<?php echo $chunk[$i][0]?>_Evening_time" title="Select Timings" multiple data-max-options="2" data-size="5">
<?php for($k=$startTime;$k<=$endTime;$k = $k + 30*60): ?>
<option value="<?php echo date('H:i',$k);?>"<?php if($chunk[$i][3] == date('H:i',$k) ||$chunk[$i][4] == date('H:i',$k)){echo"Selected";}?> ><?php echo date('H:i',$k)?></option>
<?php endfor; ?>
</select>
</div>
</div>
</div>
</td>
</tr>
<?php endif;?>
<?php endfor;?>
<?php for($j=$i;$j<count($days);$j++): ?>
<tr>
<td>
<div class=" form-check" style="margin-top: 7px;">
<input class="form-check-input" type="checkbox" name="edit_days" value="<?php echo $days[$j]?>"><?php echo $days[$j]?>
</div>
</td>
<td>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label >Morning Start</label><br>
<select class="selectpicker " id="<?php echo $days[$j]?>_Morning_time" title="Select Timings" multiple data-max-options="2" data-size="5">
<?php for($k=$startTime;$k<=$endTime;$k = $k + 30*60): ?>
<option value="<?php echo date('H:i',$k)?>"><?php echo date('H:i',$k)?></option>
<?php endfor; ?>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label >Morning End</label><br>
<select class="selectpicker " id="<?php echo $days[$j]?>_Evening_time" title="Select Timings" multiple data-max-options="2" data-size="5" >
<?php for($k=$startTime;$k<=$endTime;$k = $k + 30*60): ?>
<option value="<?php echo date('H:i',$k)?>"><?php echo date('H:i',$k)?></option>
<?php endfor; ?>
</select>
</div>
</div>
</div>
</td>
</tr>
<?php endfor;
}
?>
output of this model:
SelectPicker is displaying when I use inspect element on the main page but problem what I find it having CSS property
.bootstrap-select > select.bs-select-hidden, select.bs-select-hidden, select.selectpicker {
display: none !important;
}
[2
why I don't know

Answer 1

Finally, I got the answer after reading documentation again and again that I have to call selectpicker function after displaying the Ajax output.
Ajax Call:-
$('.editModals').on('click',function(){
docId = $(this).attr('id');
$.ajax({
url:'doc_timings2.php',
data:{doc_id:docId},
type:'POST',
success:function(data){
$('#display').html(data);
$('select').selectpicker();// That's the function
}
});