Блог

Хорошо, я знаю, что здесь чего-то не хватает. Я пытаюсь преобразовать календарь в ajax. Календарь загружается с HTML-ссылками на другие страницы. У меня часть этого работает, но у меня возникают трудности с навигационными ссылками на другие месяцы.

Я могу загружать календарь, отображать его и даже открывать и закрывать модальное диалоговое окно при нажатии на ссылку события. Что я не могу заставить работать, так это изменение URL-адреса для предыдущей и следующей ссылок в заголовке таблицы.

Спасибо за помощь.

Вот jquery:

 $(document).ready(function() {

/*-------------------------------------*/
/*       Event Calendar Methods        */
/*-------------------------------------*/
$.ajax({ url: '<?php echo site_url("servicebay/ajax/getCalendar");?>', success:    function( data ) {

    // Setup the calendar
    $("#calendar").html(data);
    // Setup event lists
    $('.event-detail-link').click(function(eventdata){
        var href = $(this).attr('href');
        //alert('Event Click'  $(this).text() ' ' href);
        $.ajax({url: href, success: function(data) {
            $('#basic-modal-content').html(data);
            $('#basic-modal-content').modal({escClose:true, backgroundColor:"#FFCC00", borderColor:"#FFCC00"});
            return false;
        }}
        ); //End click()
        // Event-detail-link failure
        return false;
    });

    /* Calendar Next Link */
    /* <a id="calendar-next-nav" href="http://localhost/mysite/calendar/index/2011/11">amp;>amp;></a>*/       
    $('#calendar-next-nav').click(function(eventdata){
        var href = $(this).attr('href');
        var x = href.substring(x.lastIndexOf("/") 1, x.lastIndexOf("/"));
        alert('Clicked'  x);
        $(this).attr('href') ='/servicebay/ajax/getCalendar/' x;
        return false;
    });

  }
});
});
  

HTML:

 <div id="calendar"><table id="" class="calendar">

<tbody><tr>
<th><a id="calendar-prev-nav" href="http://localhost/mysite/calendar/index/2011/09">amp;<amp;<</a></th>
<th colspan="5">Octoberamp;nbsp;2011</th>
<th><a id="calendar-next-nav" href="http://localhost/mysite/calendar/index/2011/11">amp;>amp;></a></th>
</tr>

<tr>
<td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td>
</tr>

<tr class="calendar-days">
<td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day"><div class="calendar-day-num">1</div></td>
</tr>

<tr class="calendar-days">
<td class="calendar-day"><div class="calendar-day-num">2</div></td><td class="calendar-day"><div class="calendar-day-num">3</div></td><td class="calendar-day"><div class="calendar-day-num">4</div></td><td class="calendar-day"><div class="calendar-day-num">5</div></td><td class="calendar-day"><div class="calendar-day-num">6</div></td><td class="calendar-day"><div class="calendar-day-num">7</div></td><td class="calendar-day"><div class="calendar-day-num">8</div></td>
</tr>

<tr class="calendar-days">
<td class="calendar-day"><div class="calendar-day-num">9</div></td><td class="calendar-day"><div class="calendar-day-num">10</div></td><td class="calendar-day"><div class="calendar-day-num">11</div></td><td class="calendar-day"><div class="calendar-day-num">12</div></td><td class="calendar-day"><div class="calendar-day-num">13</div></td><td class="calendar-day"><div class="calendar-day-num">14</div></td><td class="calendar-day"><div class="calendar-day-num">15</div></td>
</tr>

<tr class="calendar-days">
<td class="calendar-day"><div class="calendar-day-num">16</div></td><td class="calendar-day"><div class="calendar-day-num">17</div></td><td class="calendar-day"><div class="calendar-day-num">18</div></td><td class="calendar-day"><div class="calendar-day-num highlight">19</div></td><td class="calendar-day">
                <div class="calendar-day-num">20</div>
                <div class="calendar-content"><ul class="calendar-event-list"><li><a class="event-detail-link" href="http://localhost/mysite/servicebay/ajax/eventDetail/7">Oil Change</a></li></ul></div>
           </td><td class="calendar-day"><div class="calendar-day-num">21</div></td><td class="calendar-day"><div class="calendar-day-num">22</div></td>
</tr>

<tr class="calendar-days">
<td class="calendar-day"><div class="calendar-day-num">23</div></td><td class="calendar-day"><div class="calendar-day-num">24</div></td><td class="calendar-day"><div class="calendar-day-num">25</div></td><td class="calendar-day"><div class="calendar-day-num">26</div></td><td class="calendar-day"><div class="calendar-day-num">27</div></td><td class="calendar-day"><div class="calendar-day-num">28</div></td><td class="calendar-day"><div class="calendar-day-num">29</div></td>
</tr>

<tr class="calendar-days">
<td class="calendar-day"><div class="calendar-day-num">30</div></td><td class="calendar-day"><div class="calendar-day-num">31</div></td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td><td class="calendar-day">amp;nbsp;</td>
</tr>

</tbody></table></div>
  

Когда вы используете метод .attr, вы передаете значение, которое хотите присвоить атрибуту, в качестве второго параметра метода.

 $('selector').attr('attribute', 'value_to_set');
  

Ознакомьтесь с документацией jquery для получения дополнительных объяснений.