2013-11-02 59 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)!?! –