Question

我正在使用codeigniter日历库。

我正在尝试能够在具有事件的表td中获取标记的id

但由于某种原因，它仍会在没有事件的其他日子运行脚本。

问题如何确保当我点击一个表格时，我有一个事件，我可以得到attr（）的id正确。

我认为因为Codeigniter日历是由库生成的，它对脚本有一些影响

https://www.codeigniter.com/user_guide/libraries/calendar.html

<?php echo $calendar;?>

<script type="text/javascript">
$(document).on('click', '#calendar td' function(e){
    var id = $('#calendar table tr td a').attr('id');

    if (id.length > 0) {
        alert(id);
    }
}); 
</script>

控制器代码

<?php

class Events extends CI_Controller {

    public function __construct() {
        parent::__construct();
    }

    public function index() {

    }

    public function calendar($year = '', $month = '') {
        $this->load->model('events_model');

        $prefs = array(
            'start_day' => 'monday',
            'month_type' => 'long',
            'day_type' => 'short',
            'show_next_prev' => FALSE,
            'next_prev_url' => base_url('welcome')
        );

        $prefs['template'] = '
        {table_open}<table class="table" border="0" cellpadding="0" cellspacing="0">{/table_open}

        {week_row_start}<tr>{/week_row_start}
        {week_day_cell}<td class="week_day">{week_day}</td>{/week_day_cell}
        {week_row_end}</tr>{/week_row_end}

        {cal_row_start}<tr>{/cal_row_start}
        {cal_cell_start}<td>{/cal_cell_start}
        {cal_cell_start_today}<td>{/cal_cell_start_today}
        {cal_cell_start_other}<td class="other-month">{/cal_cell_start_other}
        {cal_cell_content}{day}<br/>{content}{/cal_cell_content}
        {cal_cell_content_today}<div class="highlight"><a href="{content}">{day}</a></div>{/cal_cell_content_today}

        {cal_cell_no_content}{day}{/cal_cell_no_content}
        {cal_cell_no_content_today}<div class="highlight">{day}</div>{/cal_cell_no_content_today}

        {cal_cell_blank}&nbsp;{/cal_cell_blank}

        {cal_cell_other}{day}{/cal_cel_other}

        {cal_cell_end}</td>{/cal_cell_end}
        {cal_cell_end_today}</td>{/cal_cell_end_today}
        {cal_cell_end_other}</td>{/cal_cell_end_other}
        {cal_row_end}</tr>{/cal_row_end}

        {table_close}</table>{/table_close}
        ';

        $this->load->library('calendar', $prefs);

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

        $cdata = $this->events_model->geteventevent($year, $month);

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

        return $this->load->view('default/template/events/calendar', $data);
    }
}

Answer 1

您可以使用e.target.id

var id = $('#calendar table tr td a').attr('id');

上面的行总是会给你a，但e.target会得到准确的结果

＆＃13;

$(document).on('click', '#calendar td ', function(e){    	
	console.log(e.target.id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar">
		<table>
			<tr>
				<td><a href="#" id="a">a</a></td>
			</tr>
			<tr>
				<td><a href="#" id="b">b</a></td>
			</tr>
			<tr>
				<td><a href="#" id="c">c</a></td>
			</tr>
			<tr>
				<td><a href="#" id="d">d</a></td>
			</tr>
		</table>
	</div>

＆＃13;

Answer 2

解决

似乎是codeigniter日历库的一个问题。

所以我现在为自定义日历创建了一些合适的代码

我希望此代码可以帮助其他用户。

<?php

class Events extends CI_Controller {

    public function __construct() {
        parent::__construct();
    }

    public function calendar($year = '', $month = '') {

        $data['calendar'] = $this->draw_calendar(date('m'), date('Y'));

        return $this->load->view('default/template/events/calendar', $data);
    }


    function draw_calendar($month,$year){

        /* draw table */
        $calendar = '<table class="calendar table">';

        /* table headings */
        $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
        $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';

        /* days and weeks vars now ... */
        $running_day = date('w',mktime(0,0,0,$month,1,$year));
        $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
        $days_in_this_week = 1;
        $day_counter = 0;
        $dates_array = array();

        /* row for week one */
        $calendar.= '<tr class="calendar-row">';

        /* print "blank" days until the first of the current week */

        for($x = 0; $x < $running_day; $x++) {

            $calendar.= '<td class="calendar-day-np"> </td>';
            $days_in_this_week++;

        }

        /* keep going with days.... */
        for($list_day = 1; $list_day <= $days_in_month; $list_day++) {

            $this->db->where('month', $month);
            $this->db->where('year', $year);
            $this->db->where('day', $list_day);
            $query = $this->db->get('event');

            if ($query->num_rows() > 0) {

                $calendar.= '<td class="calendar-day a">';
                /* add in the day number */
                $calendar.= '<div class="day-number">' . $list_day. '</div>';

                /** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !!  IF MATCHES FOUND, PRINT THEM !! **/

                    foreach ($query->result_array() as $result) {

                        if ($result['postpone'] > 0) {
                            $label_class = 'label-warning';
                        } elseif ($result['canceled'] > 0) {
                            $label_class = 'label-danger';
                        } else {
                            $label_class = 'label-success';
                        }

                        $calendar.= '<ul class="list-unstyled"><li><div style="cursor: pointer;" id="event-label" class="label ' . $label_class . '" data-id="' . $result['event_id'] . '">' . $result['event'] . '</div></li></ul>';
                    } 

                } else {

                    $calendar.= '<td class="calendar-day">';

                    /* add in the day number */
                    $calendar.= '<div class="day-number">' . $list_day. '</div>';

                    //$calendar.= ' ';
                }

            $calendar.= '</td>';

            if($running_day == 6) {

                $calendar.= '</tr>';

                if(($day_counter+1) != $days_in_month) {

                    $calendar.= '<tr class="calendar-row">';
                }

                $running_day = -1;
                $days_in_this_week = 0;
            }

            $days_in_this_week++; $running_day++; $day_counter++;

        }

        /* finish the rest of the days in the week */
        if($days_in_this_week < 8) {

            for($x = 1; $x <= (8 - $days_in_this_week); $x++) {
                $calendar.= '<td class="calendar-day-np"> </td>';
            }
        }

        /* final row */
        $calendar.= '</tr>';

        /* end the table */
        $calendar.= '</table>';

        /* all done, return result */
        return $calendar;
    }   

    public function geteventdataAjax() {
        $json = array();

        if ($this->input->post('event_id')) {

            $this->db->where('event_id', $this->input->post('event_id'));
            $query = $this->db->get('event');

            if ($query->num_rows() > 0) {

                $event_data = $query->row_array();

                // $json['event_title'] = $event_data['title'];

                $json = array(
                    'event' => $event_data['event'],
                    'postpone' =>  $event_data['postpone'],
                    'canceled' => $event_data['canceled']
                );
            }

        }

        $this->output->set_content_type('application/json');
        $this->output->set_output(json_encode($json));
    }
}

日历视图

<?php echo $calendar;?>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Bowling Event</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).on('click', '#event-label', function(){
    $.ajax({
        url : "<?php echo base_url('events/geteventdataAjax'); ?>",
        type : "POST",
        dataType : "json",
        data : {
            "event_id" : $(this).attr('data-id'), 
        },
        success : function(data) {

            $('#myModal').modal('show');

            $('#myModal').find('.modal-body').html(data['event']);

        },
    });

}); 
</script>

在codeigniter日历中点击事件时没有获得正确的ID

2 个答案:

解决