Not able to get value from bootstrap select picker

https://stackoverflow.com/questions/60651405/not-able-to-get-value-from-bootstrap-select-picker

I am using selectpicker first time and newbie to PHP so I don’t where I am wrong

I am using bootstrap selectpicker on edit modal selectpicker creating dynamically and data presented in the database selected and show on selectpicker but when I click on the update button I am not able to get select picker data

Page Where data is showing http://igaurav.co.in/starRatingSystem/first.php

click on edit sign and saved day and time will automatically select on popup modal click on update and see on console.log you will find day will be print but select picker selected data will not print.

So please help me out.

<?php 

error_reporting(E_ALL);

ini_set("display_errors",1);

require_once'configuration/config.php';

$hp_id = 'INRJAPPO2E381F220220';

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')));

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Latest compiled and minified JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

    <link rel="stylesheet" type="text/css" href="grow.css">

    <script type="text/javascript">

        

</script>

</head>

<body>

    <div class="row">

        <div class="col-sm-5">

            <div class="panel-heading bg-info">

                <h4 class="panel-title">View Doctor's</h4>

            </div>  

        </div>

        <div class="col-sm-5">

            <div class="form-group" style="margin-right: 10px;">

                <input type="text" class="form-control" id="myInput" placeholder="Search" name="search">

            </div>

        </div>

        <div class="col-sm-2">

            <div class="form-group" style="margin-right: 10px;">

      

                <!-- Edit Modal -->

                <div class="modal" id="editModal">

                    <div class="modal-dialog">

                        <div class="modal-content" style="width: 130%">

                            <!-- Modal Header -->

                            <div class="modal-header">

                                <h4 class="modal-title">Edit Doctor</h4>

                                <button type="button" class="close" data-dismiss="modal">&times;</button>

                            </div>

                            <!-- Modal body -->

                            <div class="modal-body">

                                <div class="row">

                                    <div class="col-sm-6">

                                        <div class="form-group">

                                            <label>Doctor ID</label>

                                            <input type="text" name="edit_docId" class="form-control" id="edit_doctor_ID" placeholder="Doctor ID" disabled>

                                        </div>

                                    </div>

                                    <div class="col-sm-6">

                                        <div class="form-group">

                                            <label >Doctor Name</label>

                                            <input type="text" name="edit_docName" class="form-control" id="edit_doctor_Name" placeholder=" Doctor Name" disabled>

                                        </div>

                                    </div>

                                    <table class="table table-hover">

                                        <thead class="bg-primary">

                                            <tr>

                                                <th>Days</th>

                                                <th>Timings</th>

                                            </tr>

                                        </thead>

                                        <tbody id="display">

                                        </tbody>

                                    </table>

                                    <div class="col-sm-12" style="float: right;">

                                        <button type="submit" class="btn btn-info pull-right" id="update_doc">Update</button>

                                        <!-- <button type="button" class="btn btn-danger pull-right" data-dismiss="modal">Close</button> -->

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!--End Edit Modal-->

            </div>

        </div>

    </div>

    <table class="table table-stripped table-responsive">

        <thead class="bg-info">

            <tr>

                <th>Sno.</th>

                <th>Doctor ID</th>

                <th style="width: 230px">Days</th>

                <th style="width: 310px">Morning Timings</th>

                <th>Evening Timings</th>

                <th>Actions</th>

            </tr>

        </thead>

        <tbody>

            <?php 

            $count=1;

            $stmt = $con->prepare('SELECT tb_doc_loc.doc_id AS doc_id,tb_doc_loc.days AS days,tb_doc_loc.mtimings AS mtimings,tb_doc_loc.etimings AS etimings FROM tb_doc_loc WHERE tb_doc_loc.hp_id = ?');

            $stmt->bind_param('s',$hp_id);

            $stmt->execute();

            $res = $stmt->get_result();

            while($row = $res->fetch_array()):

                ?>

                <tr>

                    <td><?php echo $count;?></td>

                    <td><?php echo $row['doc_id']; ?></td>

                    <td><?php

                    $col = '#F694C1,#D59BF9,#F694C1,#D59BF9,#F694C1,#D59BF9,#E71D36';

                    $colors = explode(',',$col);

                    $day = explode(',',$row['days']);

                    for($i=0;$i<count($day);$i++):?>

                        <button class="btn "  style="width:72px;font-size: small;color:#fff;padding: 1.5%;background-color:<?php echo $colors[$i];?>"><?php echo $day[$i]?></button>

                    <?php endfor ?>

                </td>

                <td><?php

                $col = '#F694C1,#D59BF9,#F694C1,#D59BF9,#F694C1,#D59BF9,#E71D36';

                $colors = explode(',',$col);

                $mtime = array_chunk(explode(',',$row['mtimings']),2);

                for($i=0;$i<count($day);$i++):?>

                    <?php if($mtime[$i][0] == '--' && $mtime[$i][1] == '--'):?>

                        <button class="btn"  style="width:auto;font-size: small;color:#fff;padding: 1.5%;background-color:<?php echo $colors[$i];?>"><?php echo 'No Schedule'?></button>

                        <?php else: ?>

                            <button class="btn"  style="width:auto;font-size: small;color:#fff;padding: 1.5%;background-color:<?php echo $colors[$i];?>"><?php echo date('h:i a',strtotime($mtime[$i][0])) ." TO ". date('h:i a',strtotime($mtime[$i][1]))?></button>

                        <?php endif; ?>

                    <?php endfor ?>

                </td>

                <td><?php

                $col = '#F694C1,#D59BF9,#F694C1,#D59BF9,#F694C1,#D59BF9,#E71D36';

                $colors = explode(',',$col);

                $etime = array_chunk(explode(',',$row['etimings']),2);

                for($i=0;$i<count($day);$i++):?>

                    <?php if($etime[$i][0] == '--' && $etime[$i][1] == '--'):?>

                        <button class="btn"  style="width:auto;font-size: small;color:#fff;padding: 1.5%;background-color:<?php echo $colors[$i];?>"><?php echo 'No Schedule'?></button>

                        <?php else: ?>

                            <button class="btn"  style="width:auto;font-size: small;color:#fff;padding: 1.5%;background-color:<?php echo $colors[$i];?>"><?php echo date('h:i a',strtotime($etime[$i][0])) ." TO ". date('h:i a',strtotime($etime[$i][1]))?></button>

                        <?php endif; ?> 

                    <?php endfor ?>

                </td>

                <td>

                    <i class="fa fa-pencil-square-o fa-2x editModals" id="<?php echo$row['doc_id'];?>" aria-hidden="true" style="color:green" data-toggle="modal" data-target='#editModal'></i>

                    <a href="#"><i class="fa fa-trash fa-2x" aria-hidden="true" style="color:red"></i></a>

                </td>

            </tr>

            <?php $count++;?>

        <?php endwhile;?>

    </tbody>

</table>

</div>

</div>

<!-- for Search box -->

<script>

    $(document).ready(function(){


        //Edit Modal

        $('.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();

                }

            })
        });

        var checkBox = $(' #editModal input[name="edit_days"]');

        checkBox.on('click',function(){

            if(checkBox.is(':checked')){

                checkedBox = $(this).val();

                $('#'+checkedBox+'_Morning_time').prop("disabled",false);               

                $('.selectpicker').selectpicker('refresh'); 

                $('#'+checkedBox+'_Evening_time').prop("disabled",false);

                $('.selectpicker').selectpicker('refresh');

            }else{

                $('#'+checkedBox+'_Morning_time').prop("disabled",true);

                $('#'+checkedBox+'_Morning_time').prop("selectedIndex",-1);

                $('.selectpicker').selectpicker('refresh');

                $('#'+checkedBox+'_Evening_time').prop("disabled",true);

                $('#'+checkedBox+'_Evening_time').prop("selectedIndex",-1);

                $('.selectpicker').selectpicker('refresh');

                

            }

        });

        $('#update_doc').on('click',function(e){

            e.preventDefault();

            var day     = [];

            var morning = [];

            var evening = [];

            var comb    = [];

            var mor     = [];

            var eve     = [];

            var data    = [];

            var id = $('#edit_doctor_ID').val();

            function get1DArray(arr){

                return arr.join().split(",");

            }

            $('input[name="edit_days"]').each(function(){ 

                    if(this.checked){

                        checkBoxName = ($(this).val()).toString();

                            // var count = $('#'+checkBoxName+'_Morning_time').val().length;

                            // console.log(count)

                            morning.push($('#'+checkBoxName+'_Morning_time').val().toString());

                            evening.push($('#'+checkBoxName+'_Evening_time').val().toString());

                            day.push(checkBoxName);

                            mor  = get1DArray(morning);

                            eve  = get1DArray(evening); 

                            comb.push(checkBoxName,$('#'+checkBoxName+'_Morning_time').val(),$('#'+checkBoxName+'_Evening_time').val());

                        }

                    });

                    console.log(day);

                    console.log(mor);

                    // console.log(eve);

                    data = get1DArray(comb);

                    //console.log(data);

            // $.ajax({

            //  url:'update_doctor.php',

            //  type:'POST',

            //  data:{doc_id:id,days:day,Morning:mortime,Evening:evetime,Combine:comb},

            //  success:function(data){

            //      if(data == 'updated'){

            //          swal('Data Updated','','success');

            //      }else{

            //          swal('Erro Occured','','error');

            //      }

            //  }

            // });

        });

    });

</script>

  
</body>

</html>

OP reported in another forum problem has been fixed.

Sponsor our Newsletter | Privacy Policy | Terms of Service