[jQuery] Weekplanner - nie wyswietla zaladowanych eventow Opcje

[uirapuru]

Hej!

Uzywam weekplannera z jquery 1.3.2 i jquery ui 1.7.2. Mam stronę podzieloną na tabs'y z jquery ui, na jednym z nich znajduje się weekplanner (1.2.0 wersja poprawiona troszkę o pare gadżetów). Przesyłam do weekplannera dane w formacie json. Wszystko działało super, dopóki nie wylądował weekplanner na którejś z tabsów - po przełączeniu na zakładkę "grafik" weekplanner się pokazuje, ale bez załadowanych eventów. Jeszcze do wczoraj pomagały na to:
- przy onClick dla tab'sa wywolanie przez js "refresh" dla weekplanner'a
- wchodzenie na stronę z adresu, który ma #grafik na koncu - przez co tabs od razu ustawial się na wlasciwym dla weekplannera divie i wszystko ladnie sie ladowalo.

nie wiem czemu ale metoda z OnClick przestała mi dziś działać mimo braku zmian.

Pomóżcie, bo już nie wiem o co chodzi...

[erix]

Bez kodu?

[uirapuru]

Myślę, że to raczej problem z którym ktoś się już spotkał, ale skoro tak, to wklejam:

Tu kod inicjujący weekplanner'a.

Kod

$(document).ready(function() {
    var $calendar = $('#kalendarz');
    var id = 10;
        
    $calendar.weekCalendar({
        useShortDayNames: true,
        timeSeparator: ' do ',
        timeFormat: 'G:i',
        dateFormat: 'd.m.y',
        buttons: false,
        timeslotHeight: '12',
        timeslotsPerHour : 2,
        allowCalEventOverlap : true,
        businessHours :{start: 8, end: 22, limitDisplay: true },
        shortMonths: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paz', 'Lis', 'Gru'],
        longMonths: ['Styczen', 'Luty', 'Marzec', 'Kwiecien', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpien', 'Wrzesien', 'Pazdziernik', 'Listopad', 'Grudzien'],
        shortDays : ['Nie', 'Pon', 'Wto', 'Sro', 'Czw', 'Pia', 'Sob'],
        longDays : ['Niedziela', 'Poniedzialek', 'Wtorek', 'Sroda', 'Czwartek', 'Piatek', 'Sobota'],
      
        eventRender : function(calEvent, $event) {
            if (calEvent.end.getTime() < new Date().getTime()) {
                $event.css("backgroundColor", "#aaa");
                $event.find(".time").css({
                            "backgroundColor" : "#999",
                            "border" : "1px solid #888"
                        });
            }
        },
        draggable : function(calEvent, $event) {
           return calEvent.readOnly != true;
        },
        resizable : function(calEvent, $event) {
            return calEvent.readOnly != true;
        },
        eventNew : function(calEvent, $event) {
            var $dialogContent = $("#event_edit_container");
            resetForm($dialogContent);
            var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
            var endField =  $dialogContent.find("select[name='end']").val(calEvent.end);
            var titleField = $dialogContent.find("input[name='title']");
            var bodyField = $dialogContent.find("textarea[name='body']");
                        
            $dialogContent.dialog({
                modal: true,
                title: "Nowe zdarzenie",
                close: function() {
                   $dialogContent.dialog("destroy");
                   $dialogContent.hide();
                   $('#kalendarz').weekCalendar("removeUnsavedEvents");
                },
                buttons: {
                    save : function(){
                        calEvent.id = id;
                        id++;
                        calEvent.start = new Date(startField.val());
                        calEvent.end = new Date(endField.val());
                        calEvent.title = titleField.val();
                        calEvent.body = bodyField.val();

                        $calendar.weekCalendar("removeUnsavedEvents");
                        $calendar.weekCalendar("updateEvent", calEvent);
                        $dialogContent.dialog("close");
                        
                        zapiszEvent(calEvent,"/zf/ajax/saveevent");
                        
                    },
                    cancel : function(){
                        $dialogContent.dialog("close");
                    }
                }
            }).show();
            
            $dialogContent.find(".date_holder").text(calEvent.start.getFullYear() + "-" + calEvent.start.getMonth() + "-" + calEvent.start.getDate());
            setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
            $(window).resize(); //fixes a bug in modal overlay size   
        },
        // przeniesienie wydarzenia
        eventDrop : function(calEvent, $event) {
            zapiszEvent(calEvent,"/zf/ajax/updateevent");
        },
        
        // zmiana rozmiaru wydarzenia
        eventResize : function(calEvent, $event) {            
            zapiszEvent(calEvent,"/zf/ajax/updateevent");        
        },
        
        eventClick : function(calEvent, $event) {
            
            if(calEvent.readOnly) {
                return;
            }
            
            var $dialogContent = $("#event_edit_container");
            resetForm($dialogContent);
            var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
            var endField =  $dialogContent.find("select[name='end']").val(calEvent.end);
            var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
            var bodyField = $dialogContent.find("textarea[name='body']");
            bodyField.val(calEvent.body);

            $dialogContent.dialog({
                modal: true,
                title: "Zmień - " + calEvent.title,
                close: function() {
                   $dialogContent.dialog("destroy");
                   $dialogContent.hide();
                   $('#kalendarz').weekCalendar("removeUnsavedEvents");
                },
                buttons: {
                    save : function(){
  
                        calEvent.start = new Date(startField.val());
                        calEvent.end = new Date(endField.val());
                        calEvent.title = titleField.val();
                        calEvent.body = bodyField.val();
              
                        $calendar.weekCalendar("updateEvent", calEvent);
                        $dialogContent.dialog("close");
                        
                        zapiszEvent(calEvent,"/zf/ajax/updateevent");
                        
                    },
                    "delete" : function(){
                        $calendar.weekCalendar("removeEvent", calEvent.id);
                        $dialogContent.dialog("close");
                        $.post("/zf/ajax/deleteevent", {
                            id: calEvent.id,
                            club_id: klub_id                                 
                        }, function(data){
                        if(data != "OK") {
                          alert("Komunikat bledu: " + data);
                        }
                    });
                        
                    },
                    cancel : function(){
                        $dialogContent.dialog("close");
                    }
                }
            }).show();

Kod

            var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
            var endField =  $dialogContent.find("select[name='end']").val(calEvent.end);
            $dialogContent.find(".date_holder").text(calEvent.start.getFullYear() + "-" + calEvent.start.getMonth() + "-" + calEvent.start.getDate());
            setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
            $(window).resize(); //fixes a bug in modal overlay size
        
        },
        eventMouseover : function(calEvent, $event) {
        },
        eventMouseout : function(calEvent, $event) {
        },
        noEvents : function() {
            
        },

//        data : function(start, end, callback) {
//              $.getJSON("/zf/ajax/getevents/id/"+klub_id, function(result) {
//                 callback(result);
//               });
//            }

        data : "/zf/ajax/getevents/id/"+klub_id

    });
    
    function resetForm($dialogContent) {
         $dialogContent.find("input").val("");
         $dialogContent.find("textarea").val("");
    }
    
    function zapiszEvent(calEvent,akcja) {
        $.post(akcja, {
            id: calEvent.id,
            club_id: klub_id,
            start: calEvent.start ,
            end: calEvent.end,
            nazwa: calEvent.title,
            opis: calEvent.body                                 
        }, function(data){
        if(data != "OK") {
          alert("Komunikat bledu: " + data);
        }
    });
        
    }
    
    /*
     * Sets up the start and end time fields in the calendar event
     * form for editing based on the calendar event being edited
     */
    function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {
            
       for(var i=0; i<timeslotTimes.length; i++) {
            var startTime = timeslotTimes[i].start;
            var endTime = timeslotTimes[i].end;
            var startSelected = "";
            if(startTime.getTime() === calEvent.start.getTime()) {
                startSelected = "selected=\"selected\"";
            }
            var endSelected = "";
            if(endTime.getTime() === calEvent.end.getTime()) {
                endSelected = "selected=\"selected\"";
            }
            $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
            $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");
      
        }
        $endTimeOptions = $endTimeField.find("option");
        $startTimeField.trigger("change");
    }
  
   var $endTimeField = $("select[name='end']");
   var $endTimeOptions = $endTimeField.find("option");
    
   //reduces the end time options to be only after the start time options.
   $("select[name='start']").change(function(){
        var startTime = $(this).find(":selected").val();
        var currentEndTime = $endTimeField.find("option:selected").val();
        $endTimeField.html(
            $endTimeOptions.filter(function(){
                return startTime < $(this).val();
            })
        );
        
        var endTimeSelected = false;
        $endTimeField.find("option").each(function() {
            if($(this).val() === currentEndTime) {
                $(this).attr("selected", "selected");
                endTimeSelected = true;
                return false;
            }
        });
        
        if(!endTimeSelected) {
           //automatically select an end date 2 slots away.
           $endTimeField.find("option:eq(1)").attr("selected", "selected");
        }
        
    });
});

a tu kod od tabsów i html

Kod

<div id="tabelka">
    <ul>
        <li><a href="#klub">Klub</a></li>
        <li><a href="#grafik" OnClick="$('#kalendarz').weekCalendar('today')">Grafik</a></li>
        <li><a href="#kadra">Kadra</a></li>
        <li><a href="#foto">Zdjęcia</a></li>
        <li><a href="#film">Film</a></li>
        <li><a href="#mapa">Mapa</a></li>
        <li><a href="#opinie">Opinie</a></li>
    </ul>
    
    <div id="klub">
    <?=$this->klubForm; ?>
    </div>
    
    <div id="grafik"><div id="kalendarz"></div></div>
    <div id="kadra"></div>
    <div id="foto"></div>
    <div id="film"></div>
    <div id="mapa">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
        <form onSubmit="return false";><button OnClick="szukaj_klub();">Znajdź klub</button></form>
        <div class="error" style="display: none;"></div>
    </div>
    <div id="opinie"></div>
</div>

a tu jeszcze json, którego wywalam sobie z bazy

Kod

[{"id":11,"start":"2009-08-04T09:00:00+01:00","end":"2009-08-04T13:00:00+01:00","title":"fdgdfsg"},{"id":12,"start":"2009-08-09T12:00:00+01:00","end":"2009-08-09T19:30:00+01:00","title":"dfgdsgdsfgdsfg"},{"id":13,"start":"2009-08-06T08:00:00+01:00","end":"2009-08-06T13:00:00+01:00","title":"435435"},{"id":14,"start":"2009-08-06T16:00:00+01:00","end":"2009-08-06T20:00:00+01:00","title":"test"}]