未在视图页面中加载Ajax响应

时间:2017-07-25 04:17:25

标签: mysql ajax codeigniter

Iam使用完整的日历功能。但是视图页面中没有显示数据。只显示日历本身。任何人都可以帮我找到解决方案。这是我的代码:

查看页面:

<script type="text/javascript">

        $(document).on("click", ".calendarview", function () {  

        var roomid = $(this).data('id');
        //alert(roomid);exit;

         $('#calendar_view').fullCalendar({
            //events: [
    //          {
    //                  title: 'All Day Event',
    //                  start: roomid
    //              }
    //                  ]
            events: {
            url: base_url+'home/calview',
                dataType: 'json',
               data: {roomid: roomid},
               type: 'POST', // Send post data
               error: function() {
                 alert('There was an error while fetching events.');
               }
            }
         });
    });
</script>

IN CONTROLLER

function calview()
       {
                    $room_id =$this->input->post('roomid');
                    $events=$this->Home_model->find_room_availability($room_id); 
                        $data_events = array();
                        foreach($events as $r) {
                    $data_events[] = array(
            //"title" => $r->available,
                    "description" => 'available',
                    "start" => $r->dt);
                        }
                echo json_encode(array("events" => $data_events));
                exit();
        }

MODEL:

function find_room_availability($room_id){
    $result = $this->db->query("SELECT x.dt , r.room_cnt - COALESCE(SUM(`booking_cnt`),0) available FROM calendar_table x LEFT JOIN bookinglist y ON x.dt >= y.`date_from` AND x.dt < y.`date_to` LEFT JOIN rooms r ON r.id=$room_id WHERE x.dt BETWEEN now() - interval 3 month AND now() + interval 5 month GROUP BY dt ");                                           
    //echo $this->db->last_query();
    //exit;
  return $result->result();     

}

Ajax响应就像

[[{"title":"10","start":"2017-04-26"},
  {"title":"10","start":"2017-04-27"},
  {"title":"10","start":"2017-04-28"},
  {"title":"10","start":"2017-04-29"},
  {"title":"10","start":"2017-04-30"},
  {"title":"10","start":"2017-05-01"},
  {"title":"10","start":"2017-05-02"},
  {"title":"10","start":"2017-05-03"},
  {"title":"10","start":"2017-05-04"},
  {"title":"10","start":"2017-05-05"},
  {"title":"10","start":"2017-05-06"},
  {"title":"10","start":"2017-05-07"},
  {"title":"10","start":"2017-05-08"},
  {"title":"10","start":"2017-05-09"},
  {"title":"10","start":"2017-05-10"},
  {"title":"10","start":"2017-05-11"},
  {"title":"10","start":"2017-05-12"},
  {"title":"10","start":"2017-05-13"},
  {"title":"10","start":"2017-05-14"},
  {"title":"10","start":"2017-05-15"},
  {"title":"10","start":"2017-05-16"},
  {"title":"10","start":"2017-05-17"},}]]

任何人都可以帮我找到解决方案

2 个答案:

答案 0 :(得分:0)

单击日历名称类,您将在AJAX SUCCESS CALL中以json的形式获取数据,现在您需要使用帮助java脚本.html()格式分配该数据

由于您没有直接向视图页面发送数据,因此您将以ajax格式发送成功响应

success: function (data) {
  var obj = JSON.parse(data);
  $('#testdiv').val(obj.test);
 }

答案 1 :(得分:0)

在控制器

中设置页眉
function calview(){
    $room_id =$this->input->post('roomid');
    $events=$this->Home_model->find_room_availability($room_id); 
    $data_events = array();
    foreach($events as $r) {
        $data_events[] = array(
            "title" => $r->available,
            "description" => 'available',
            "start" => $r->dt
        );
    }
    //set output header as json
    $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode(array('events' => $data_events)));
}

更改你的js脚本

<script type="text/javascript">
$(document).on("click", ".calendarview", function () {
    var roomid = $(this).data('id');
    $('#calendar_view').fullCalendar({
    events: function(start, end, timezone, cb) {
    $.ajax({
      url: '<?=base_url("home/calview");?>',
      dataType: 'json',
      data: {roomid: roomid},
      success: function(response) {
          var events = response.events;
          //pass object to callback function
          cb(events);
      }
    });
  }
 });
});
</script>