how to load the value of <a href=“”> tag using ajax

Question

I'm working with Codeigniter Calendar Class library and I want the "next month" and "previous month" button work without reloading the page, just refresh the month.

In my Model I've created the calendar template with the following configuration:

        $this->conf = array(
            'start_day' => 'monday',
            'show_next_prev' => true,
            'next_prev_url' => base_url().'index.php/admin/reservation'             
        );
    $this->conf['template'] = '

     {table_open}<table border="0" cellpadding="0" cellspacing="0"class="calendar">{/table_open}

       {heading_row_start}<tr>{/heading_row_start}

       {heading_previous_cell}<th class="prev_button"><a href="{previous_url}">&lt;&lt;</a></th>{/heading_previous_cell}
       {heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell}
       {heading_next_cell}<th class="next_button"><a href="{next_url}">&gt;&gt;</a></th>{/heading_next_cell}

       {heading_row_end}</tr>{/heading_row_end}

       {week_row_start}<tr>{/week_row_start}
       {week_day_cell}<td>{week_day}</td>{/week_day_cell}
       {week_row_end}</tr>{/week_row_end}

       {cal_row_start}<tr class="days">{/cal_row_start}
       {cal_cell_start}<td>{/cal_cell_start}

       {cal_cell_content}
            <div class="day_num">{day}</div>
            <div class="content">{content}</div>
       {/cal_cell_content}
       {cal_cell_content_today}
            <div class="day_num highlight">{day}</div>
            <div class="content">{content}</div>
       {/cal_cell_content_today}

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

       {cal_cell_blank}&nbsp;{/cal_cell_blank}

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

       {table_close}</table>{/table_close}

And in my View:

 <script type="text/javascript">
    $(document).ready(function(){
        $('.next_button').click(function(){
            alert("working");
        });         
    });     

</script>

I just really don't know on how to load the value of the class "prev_button" and "next_button" in my calendar template. So please help!

Answer 1

If you need to just add the class to a link then you can use:

<script type="text/javascript">
   $(document).ready(function(){
        $('.next_button').click(function(){
           $('a').addClass('YourClass');
        });
   });
</script>

Answer 2

Try

$('.next_button').click(function(){
    var href = $(this).find('a').attr('href');

    $.ajax({
     url: href
    });
}); 

Answer 3

Finally found the solution. See below:

    <script>
    $(document).ready(function(){       
    $(document).on('click','.next_button', function() {
        var href = $(this).find('a').attr('href');
        $.post(href, { }, function(data){
            $('#calendar').html(data);
        })

        return false;
    });

    $(document).on('click','.prev_button', function() {
        var href = $(this).find('a').attr('href');
        $.post(href, { }, function(data){
            $('#calendar').html(data);
        })

        return false;
    });

   });
   </script>