-1
[OK]を、私はここで何かが不足していることを知っています。私はカレンダーを邪魔しています。カレンダーは他のページへのhtmlリンクで読み込まれます。私はその一部を稼働させていますが、他の月へのナビゲーションリンクには問題があります。JQueryセレクターの問題
カレンダーを読み込んで表示し、イベントリンクをクリックするとモーダルダイアログを開いて閉じることもできます。私が働くことができないのは、テーブルヘッダー内の前リンクと次リンクの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">>></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:あなたが.ATTRメソッドを使用する場合
<div id="calendar"><table id="" class="calendar">
<tbody><tr>
<th><a id="calendar-prev-nav" href="http://localhost/mysite/calendar/index/2011/09"><<</a></th>
<th colspan="5">October 2011</th>
<th><a id="calendar-next-nav" href="http://localhost/mysite/calendar/index/2011/11">>></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"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </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"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td>
</tr>
</tbody></table></div>