Я нахожусь в приложении Symfony (2.3), используя http://www.symfocal.com/
Я пытаюсь изменить способ календаря diplayed, но у меня есть некоторые проблемы с jquery:
Вот часть измененного кода, касающегося моей проблемы.
Файл twig с 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>
Мое понимание того, что происходит:
$ (window).load (сборы функций changeMonths (0)
changeMonths вызывает функцию fillCalendar для каждого элемента (в это время для тестирования есть два элемента (с id 1 и id 2)
Это была ошибка:
Инструкция:
var id = $(cal).attr('id');
не получает идентификатор - его неопределенный
Но переменная cal, полученная как параметр, - cal1 & then cal2 и должна возвращать id, что означает cal1 или cal2.
Может ли кто-нибудь помочь мне решить эту проблему?
EDIT: я последовал за ответом ihsan - теперь это лучше, но только первая календарная строка заполняется месячными днями
console.log(cal); shows now :
#cal1
#cal2
EDIT 2: Хорошо, мне пришлось изменить свой html, чтобы сделать работу cal2 тоже - спасибо за вашу помощь
html часть:
...
<td id="cal{{ item.id }}">{{ item.name }}</td>
js part:
...
fillCalendar(newMonth-12*Math.floor((newMonth)/13), newYear+Math.floor((newMonth)/13), '#cal{{ item.id }}' );