JQuery 选择器的困难
好吧,我知道我在这里遗漏了一些东西。我正在尝试 ajaxify 日历。日历加载了指向其他页面的 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">>></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"><<</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>
Ok, I know I am missing something here. I am trying to ajaxify a calendar. The calendar loads with html links to other pages. I have part of it working but I am having difficulty with the navigation links to other months.
I am able to load the calendar, display it, and even get the modal dialog to open and close when the event link is clicked. What I can't get to work is the changing of the url for the prev and next links in the table header.
Thank you for you help.
Here is the 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;
});
}
});
});
The html:
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用 .attr 方法时,可以将要设置属性的值作为第二个参数传递给该方法。
查看 jquery 文档 了解更多说明。
When you use the .attr method, you pass the value you want to set the attribute to in as the second parameter to the method.
Check out the jquery documentation for more explanation.