How to get attr of element from ajax success result of codeigniter calendar?

Question

I going to work with codeigniter calendar for showing the events. By default, when I am generate the calender and showing each events, there is no problem. Each events can shown on the bootstrap modal depend on the day that (clicked) dan pass to the my controller function. The problem is when I click the prev or next link by using jquery ajax to load the prev or next month, after the month changed, and then I click on a day, the attr value can't catch by jquery $(this) function. There is my snipped code :

CI calendar template snipped :

{cal_cell_content}<div data-toggle="modal" data-target=".mymodal" class="detail" val="{day}"><span class="myclass">{day}</span><span class="d{day}">{content}</span></div>{/cal_cell_content}

function to load calendar :

public function show_cal_ajax($yr = NULL, $mth = NULL)
    {
        $this->load->model('m_cal');
        $this->load->library('calendar', $this->_calconfig()); 
        $year = $month = "";
        if($yr != NULL && $mth != NULL)
        {
            $month = $mth;
            $year = $yr;
        }
        else
        {
            $month = date('m');
            $year = date('Y');
        }

        $numEvent   = $this->m_cal->numOfEvent($month, $year);
        $data           = array(
                            'cal_data' => $this->calendar->generate($year, $month, $numEvent)
                        );
        echo $data['cal_data'];
    }

and the jquery ajax for load the event detail :

$(".detail").on('click',function(){
        var day = $(this).attr('val');

        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: <?php echo "'".base_url('view/show_event_detail')."'"; ?>,
            data:{<?php echo "y: $year, m: $month";?>, d: day}, 
            success: function( data ) {
                $( ".modal-content").html(data);
            },
            error: function(){
                alert('Error: ajax request error.');
            } 
        });
});

So, after the calendar changed by clicking the prev or next link, the jquery detail function not work, I guess that the $(this).attr('val') have not a value because the calendar data/month was changed by ajax request and append it on the #calendar on the html.. anyone can help me how to get the attr value although the month was changed...

btw, the full code can be found here : http://pastebin.com/VgydABai thanks...

Answer 1

Add the year month and day to your template then use the individual values for the post

class="detail" data-day="{day}" data-month="{month}" data-year="{year}"


var caldata = {};
$(document).on('click', ".detail", function() {
    caldata["y"] = $(this).attr('data-year');
    caldata["m"] = $(this).attr('data-month');
    caldata["d"] = $(this).attr('data-year');

    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: <?php echo "'".base_url('view/show_event_detail')."'"; ?>,
        data: caldata, 
        success: function( data ) {
            $( ".modal-content").html(data);
        },
        error: function(){
            alert('Error: ajax request error.');
        } 
    });
});