ajax 成功并加载特定的 div 后内容消失了

Question

I am making an event calendar. After adding an event, only the cells of the calendar will be load after insertion of the data is successful. Adding event is fine but when div loaded the content disappear. Here's my code:

* Ajax *

$('.savedata').on('click', function () {
                // alert('savedata');
                var testchecked = $('#testchecked').val();
                var testingcheck = $('#testingcheck').val();
                $.ajax({
                    type : "POST",
                    url  : "<?php echo site_url()?>/CalendarController/savedata",
                    // dataType : "JSON",
                    data : { testchecked : testchecked, testingcheck : testingcheck },
                    success: function(data){
                        // alert('success');
                        //console.log('asd '+data);

                        $('#events-modal').modal('hide');
                        // cal-month-box
                        // $(".cal-month-day").append(JSON.stringify(data));
                        // $(".cal-month-day").load(window.location + " .cal-month-day");
                        // $('.cal-month-day').prepend(_newData);
                        $(".cal-month-day").load(location.href + " .cal-month-day");
                    },
                    error : function(data, ajaxOptions, thrownError) {
                        console.log(data.status);
                    }
                    });
                });

* Before adding data *

* after adding event *

* Here's the HTML *

* Controller *

public function savedata()
    {
        $this->load->view('calendarView');

        $this->em->form_insert();

    }

* Model *

function form_insert()
    {
        $abc            = $this->input->post('testchecked');

        $array = array('id' => $abc);
        $this->db->select("*");
        $this->db->where($array);
        $query = $this->db->get('dev_adkt_events_type');
        $response = $query->result_array();
        foreach($response as $res){
            $title = $res['id'];
        }


        $url            = 'URL';
        $class          = $this->input->post('testchecked');
        $start_date     = $this->input->post('testingcheck');
        $end_date       = $this->input->post('testingcheck');

        $data = array(
            'title'     => $title,
            'url'       => $url,
            'class'     => $class,
            'start_date'=> $start_date ,
            'end_date'  => $end_date 
        );

        // $this->db->insert('event',$data);
        $result = $this->db->insert('event',$data);
        return $result;

    }

Hope you could help me guys. Thank you in advance.

* Displaying the Calendar *

Controller

public function index() {
        $this->load->helper('url');
        // var_dump($postData);
        $result['eventcatresult'] = $this->em->geteventcategory();
        $result['data'] = $this->em->getevent();
        $result['data'] = $this->em->getnotes();

        $this->load->view('calendarView',$result);
    }

* Model *

function getevent()
    {
        $this->db->select("*");
        $query = $this->db->get($this->event);
        if ($query) {
            return $query->result();
        }
        return NULL;
    }

Answer 1

you better change this

$(".cal-month-day").load(location.href + " .cal-month-day");

to this

$("#calendar").load(location.href + " #calendar");

because you have multiple 'cal-month-day' for every event and if the last element empty your all elements will be empty
better refresh all calendar