使用带有JQUERY UI功能的Codeigniter日历功能中的AJAX POST数据

时间:2013-01-02 13:37:11

标签: codeigniter jquery

以下代码是来自here的Codeigniter事件日历功能。

日历是可点击的,您可以通过“提示”框将数据输入到日期字段中。然后,数据显示在日历日期字段中。

但是我试图使用带有'微调器'的JQUERY'对话框'作为输入字段而不是'提示'框。

当我尝试使用AJAX来发布数据时,下面的所有代码都完全接受JQUERY部分。 Codeigniter无法从对话框中检测到POST数据。

有人可以帮忙吗?

     //CONTROLLER

    class Mycal extends CI_Controller {

    public function index() {
       $this->display();
    }

    function display($year = null, $month = null){

    if (!$year) {
        $year = date('Y');
    }
    if (!$month) {
        $month = date('m');
    }

    $this->load->model('Mycal_model');

    if($day = $this->input->post('day')){
        $this->Mycal_model->add_calendar_data(
            "$year-$month-$day",
            $this->input->post('data')
        );
    }

    $data['calendar'] = $this->Mycal_model->generate($year, $month);

    $this->load->view('mycal_view', $data); 
}

}

    //MODEL

    class Mycal_model extends CI_Model{

    function get_calendar_data($year, $month){

    $query = $this->db->select('date, data')->from('calendar')
        ->like('date', "$year-$month", 'after')->get();

    $cal_data = array();

    foreach ($query->result() as $row){
        $cal_data[substr($row->date,8,2)] = $row->data;
    }

    return $cal_data;
}

function add_calendar_data($date, $data){

    if($this->db->select('date')->from('calendar')
        ->where('date', $date)->count_all_results()) {

        $this->db->where('date', $date)->update('calendar', array(
            'date'=>$date,
            'data'=>$data
        ));

    }else{

        $this->db->insert('calendar', array(
            'date'=>$date,
            'data'=>$data
        ));
    }
}

function generate ($year, $month){

    $this->load->library('calendar', $this->conf);
    $cal_data = $this->get_calendar_data($year, $month);    
    return $this->calendar->generate($year, $month, $cal_data)      
}


    //VIEW

    <?php echo $calendar; ?>

    <div id="dialog-form" title="Select number of items">

    <p>
        <label for="spinner">Number of items:</label>
        <input id="spinner" name="spinner" value="0" />
    </p>

    </div>

    //JQUERY

    <script type="text/javascript">

$(document).ready(function() {

    $(function() {
        $( "#spinner" ).spinner({
            min: 0,
            max: 10,
            step: 1,
        });
    });

    $('.calendar .day').click(function() {
        $('#dialog-form').dialog("open");
    }); 

    $(function() {  
        $('#dialog-form')
            .attr('title', 'Number of items')
            .dialog({ 
                autoOpen: false,
                buttons: { 
                    'Ok': function() {
                        day_num = $(this).find('.day_num').html();
                        day_data = $("#spinner").val();


                            $.ajax({
                                url: window.location,
                                type: 'POST',
                                data: {
                                    day: day_num,
                                    data: day_data
                                },
                                success: function(msg){
                                    location.reload();
                                }
                            })      
                    },

                },

            });

    });
}); 
</script>

1 个答案:

答案 0 :(得分:1)

我们感谢帮助,我发现了如何解决问题。这是我的代码。

//JQUERY

    <script type="text/javascript">

$(document).ready(function() {
    $('.calendar .day').click(function() {
      $('#dialog-form').dialog("open");

      day_num = $(this).find('.day_num').html();
      day_data = $("#spinner").val();
    });


    $(function() {
        $( "#spinner" ).spinner({
            min: 0,
            max: 10,
            step: 1,
        });
    });



    $(function() {  
        $('#dialog-form')
            .attr('title', 'Number of items')
            .dialog({ 
                autoOpen: false,
                buttons: { 
                    'Ok': function() {

                            $.ajax({
                                url: window.location,
                                type: 'POST',
                                data: {
                                    day: day_num,
                                    data: day_data
                                },
                                success: function(msg){
                                    location.reload();
                                }
                            })      
                    },

                },

            });

    });
}); 
</script>