2013-11-02 57 views
0

ATTR ID我使用http://www.symfocal.com/无法获得与jQuery

我试图改变日历diplayed方式symfony应用程序(2.3),但我有一些麻烦用jQuery:

这里的修改后的代码中关于我的问题的部分。

使用jQuery的树枝文件:

<script> 
... 
jQuery(document).ready(function() { 

var cal1 = $('#cal1'); 
var cal2 = $('#cal2'); 

function fillCalendar(mois, annee, cal) 
{ 
    $(cal).css('display', 'none'); 
    $(cal).find('a').removeClass().unbind(); 
    {% if admin == false %} 
    $(cal).find('a').click(function(e){e.preventDefault();}); 
    {% endif %} 

    ... 
    var id = $(cal).attr('id'); 

    $.post(url,{ 
     month: mois, 
     year: annee, 
     },function(data){ 
      if(data.responseCode==200) 
      { 
       var days_previous_month=data.days_previous_month; 
       var nb_days_prev=data.nb_days_prev; 
       $('#'+id+'_title').html(data.current_month); 
       var count=1; 
       while(count<43) 
       { 
        {% if admin %} 
        if(data.calendar[(count-1)].dates!="") 
        { 
         $('#'+id+'_cell_'+count).attr("title", data.calendar[(count-1)].dates).click(changeState); 
        } 
        else 
        { 
         $('#'+id+'_cell_'+count).click(function(e){e.preventDefault();}); 
        } 
        {% endif %} 
        if(data.calendar[(count-1)].booked==-1) $('#'+id+'_cell_'+count).html(days_previous_month - nb_days_prev + count); 
        else $('#'+id+'_cell_'+count).html(data.calendar[(count-1)].fill); 
        if(data.calendar[(count-1)].booked==1) $('#'+id+'_cell_'+count).addClass(data.calendar[(count-1)].classe); 
        else if(data.calendar[(count-1)].booked<0) $('#'+id+'_cell_'+count).addClass("dates_preview"); 
        count++; 
       } 
       $(cal).css('display', 'block'); 
      } 
      else 
... 
function changeMonths(step) 
{ 
    gap = gap + step; 

    var newMonth = month + (1 * gap)%12; 
    var gapYear = (1 * gap)/12; 
    var newYear = year + gapYear - gapYear%1; 
    if (newMonth<=0) 
    { 
     newMonth+=12; 
    } 

    {% for item in items %} 
     fillCalendar(newMonth-12*Math.floor((newMonth)/13), newYear+Math.floor((newMonth)/13), 'cal{{ item.id }}'); 
    {% endfor %} 
} 
... 
$(window).load(function(){ 
    changeMonths(0); 
}); 


});  
</script> 

和HTML部分 - 用树枝包括:

<div class="calendar_wrapper"> 
    <div id="cal1" class="calendar"> 
     <table class="tab_calendar" align="center"> 
      <tr> 
       <td class="title_calendar" colspan="43" width="100%"> 
        <span id="cal1_title"></span> 
       </td> 
      </tr> 
      <tr> 
       <td class="tech" > 
       <span>Technicien</span> 
       </td> 
       {% for i in 1..6 %} 
        <td class="cell_jour" > 
        <span>Lun</span> 
        </td> 
        <td class="cell_jour" > 
        <span>Mar</span> 
        </td> 
        <td class="cell_jour" > 
        <span>Mer</span> 
        </td> 
        <td class="cell_jour" > 
        <span>Jeu</span> 
        </td> 
        <td class="cell_jour" > 
        <span>Ven</span> 
        </td> 
        <td class="cell_jour" > 
        <span>Sam</span> 
        </td> 
        <td class="cell_jour" > 
        <span>Dim</span> 
        </td> 
       {% endfor %} 
      </tr> 
      {% for item in items %} 
       <tr> 
        <td class="{{ item.id }}">{{ item.name }}</td> 
        {% for i in 1..42 %} 
         <td class="cell_calendar"><a id="cal{{ item.id }}_cell_{{ i }}" href="#"></a></td> 
        {% endfor %} 
       </tr> 
      {% endfor %} 
      </table> 
    </div> 
</div> 

我发生了什么事的理解:

$(窗口)。负载(函数费用更改月份(0)

changeMonths调用函数fillCalendar for eac^h项(此时为测试有两个项目(ID为1和ID 2)

这是我的错误:

指令:

var id = $(cal).attr('id'); 

没有得到id - 其未定义

但是,作为参数接收到的变量cal是cal1 &,然后是cal2,并应返回id,即cal1或cal2。

有人可以帮我解决这个问题吗?

编辑: 我跟着伊赫桑的答案 - 它现在更好,但只有第一个日历线填补了一个月的天

console.log(cal); shows now : 

#cal1 
#cal2 

编辑2: 好吧,我不得不改变我的HTML,使CAL2工作太 - 感谢您的帮助

+0

在fillCalendar的开头添加console.log(cal)并告诉我们出现了什么 – phil

回答

0

HTML的一部分:

... 
<td id="cal{{ item.id }}">{{ item.name }}</td> 

JS部分:

... 
fillCalendar(newMonth-12*Math.floor((newMonth)/13), newYear+Math.floor((newMonth)/13), '#cal{{ item.id }}'); 
+0

我照你所说的做了,第一个日历行(cal1)填满了月份的日期,但没有填写第二个日期行cal2)!?! –