Question

我正在使用带有动态插槽选择的日历来开发医生约会程序，我的问题是在显示医生列表时第一个医生约会日历块显示正确，但下一个医生日历无法正常工作，并且带有空白块。

我的页面数据显示如下：

查看文件

<div class="col-md-9 hsp_list">
    <?php foreach($data as $d){ //print_r($data);exit(); ?>
    <div class="row">

      <div class="col-md-2">
        <figure class="pull-left">
           <img class="media-object img-rounded img-responsive"  src="<?php echo base_url()?>assets/images/random-avatar2.jpg" alt="Doctos" >
        </figure>
       </div>
      <div class="col-md-7">
          <h4 class="list-group-item-heading"><?php echo $d->doctor_name; ?></h4>
          <p class="list-group-item-text"><?php echo $d->doctor_details; ?></p>
          <!-- <p> &nbsp;<span class="fa fa-inr"></span> &nbsp;250 </p> -->
          <p> <span class="glyphicon glyphicon-time"></span> <b>Sunday - Monday</b> <br><small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9 :00 AM To 10:00 PM </small> 5 </p>
          <input type="hidden" name="doctor_id" id="doctor_id" value="<?php echo $d->doctor_id;?>"></input>
      </div>
      <div class="col-md-3 text-center">
          <h4 class="dr-votes"> 14240 <span> votes </span></h4>
          <button type="button" class="btn btn-default btn-md" data-toggle="collapse" data-target="#hsp<?php echo $d->doctor_id;?>" aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-user-plus"></i> Book Appontment </button>
          <div class="stars">
             <span class="glyphicon glyphicon-star"></span>
             <span class="glyphicon glyphicon-star"></span>
             <span class="glyphicon glyphicon-star"></span>
             <span class="glyphicon glyphicon-star"></span>
             <span class="glyphicon glyphicon-star-empty"></span>
          </div>
          <p> Average 4.5 <small> / </small> 5 </p>
      </div>
    </div>
    <div class="divider"></div>

    <div class="row">
      <div class="col-md-12">
       <div class="collapse" id="hsp<?php echo $d->doctor_id;?>">
          <div class="well">
            <div class='row'>
              <form action="" method="post" id="frm" name="frm" accept-charset="utf-8">
                <div class="col-md-12" style="border:0px solid red">
                   <h4>Select Date </h4>
                    <div class="dr-calendar">
                        <div id="embeddedExample" style="height:220px; padding:10px;">
                            <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto;padding:10px;">
                            </div>
                            <br />
                            <!-- <div onchange="get_data()"></div> -->
                            <input type="text" id="embeddedDateField" class="dateField"  placeholder="Select Date" value="" name="sd" 
                               onchange="getdata(this.value)">
                            <br />
                        </div>
                    </div>
                </div>
                <div class="col-md-12" style="border:0px solid red">
                  <span class="glyphicon glyphicon-picture"></span> select slots
                    <br/>
                    <div id="slots" class="slot_free"></div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <?php } ?>
  </div>

jQuery文件

<script type="text/javascript" src="<?php echo base_url();?>assets/calendar/jquery.datetimepicker.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

jQuery代码

<script type="text/javascript">
 function getdata(id)
{

  var doctor=document.getElementById('doctor_id').value;
  var date=document.getElementById('embeddedDateField').value;

   var url1='<?php echo base_url()."home/getslots/";?>'+doctor+'/'+id;

   jQuery.ajax({
       type: "POST",
       url: url1,
        data: id='slots',
       success: function(data){
           //alert(data);
           jQuery('#slots').html(data);
   },
    });
  }

   $('#slots', newRow).each(function(i) { 
      $(this).attr('id', newID);

});

带插槽选择的完整日历

0 个答案: