Eventhandler collision between jscalendar and grid with Firefox

Hello Everybody,

I'm using the grid with jscalendar (http://jscalendar.sourceforge.net) on the same page.

This works with no problem in IE 6 but leads to collision between the event handlers of the grid in gecko.js:

-   58     element.attachEvent = function (name, handler) {
 -   59         if (typeof handler != "function") {return}
 -   60         var nsName = name.replace(/^on/, "");
 -   61         var nsHandler = function(event){
 -   62             window.event = event;
 -   63             handler();
 -   64             window.event = null;
     65         };
 -   66         handler[name] = nsHandler;
 -   67         this.addEventListener(nsName, nsHandler, false);
     68     };
     69

and the eventcode in calendar.js:

-   165 Calendar.getTargetElement = function(ev) {
 -   166     var f = Calendar.is_ie ? window.event.srcElement : ev.target;
 -   167     while (f.nodeType != 1)
 -   168         f = f.parentNode;
 -   169     return f;
     170 };

The event handler from the grid is triggered by the events of the calendar popup which calls the function handler() (gecko.js, line 63) and then sets window.event = null. After this the calendar eventhandler gets the event but it is null. All mouse events on the calendar popup lead to a javascript runtime error and the mouse handling is completely disabled.

The solution would be to check if the call to handler realy handles the event and if it does not leave the event in place (not null assignment to window.event).

Does anyone (Alex?) has an idea on how this could be solved?

Thank you for your patience.

Has anyone got this problem? Please help!

My suspect was that the event handler in gecko.js catches the event and then disables the event.

Is there anyone out there using the grid with jscalendar in FireFox?

Thank you.

Just for pushing this message on the top:

Anyone got an answer?

Hi.

I encountered the same problem but no solution yet. How is your key arrows navigation in Gecko?

John

Do you mean key navigation in the jscalendar?

If yes navigation is working.

I can use the arrow keys to navigate to a date and hit return to select that date or hit esc to cancel date selection.

I can use the space bar to move to the current date.

Arrow up and arrow down navigation is working in the grid.

Maybe Alex can help us?

Dietrich,

I guess the calendar incorrectly detects the browser as Internet Explorer and tries to use IE event handling methods in Gecko. This happens because in ActiveWidgets I emulate some of IE functionality in Gecko (now it does not look like a good idea anymore).

Probably the fix could be either trying to load calendar libraries before AW or just force Calendar.is_ie property to false after you create the calendar object.

Dietrich,

I tried the Alex tip but no good result ev has no properties still coming on.

Did you find a solution?

The arrow keys in the grid are now doing well in the Gecko grid I installed latest release.

John

Alex,

I did a simple dump of Calendar.is_ie after the initialization of the calendar Object ( Calendar.setup() ). The result is 'false'.

And I did already load the calendar libraries before the grid libraries.

Sorry but this is not the solution. Event not with the fresh FireFox 1.0.4.

Anyone got a solution.

Thank you all for helping.

Again pushing this message on the top:

Anyone got an answer?

I looked at jscalendar code - this really is a collision between my IE emulation code and calendar browser detection. Here is the possible fix -change the order of browser checks in calendar.addEvent function.

Original function:

Calendar.addEvent = function(el, evname, func) {
    if (el.attachEvent) { // IE
        el.attachEvent("on" + evname, func);
    } else if (el.addEventListener) { // Gecko / W3C
        el.addEventListener(evname, func, true);
    } else {
        el["on" + evname] = func;
    }
};

Working variant (just check for Gecko first)

Calendar.addEvent = function(el, evname, func) {
    if (el.addEventListener) { // Gecko / W3C
        el.addEventListener(evname, func, true);
    } else if (el.attachEvent) { // IE
        el.attachEvent("on" + evname, func);
    } else {
        el["on" + evname] = func;
    }
};

I understand that it is not nice and I should rather fix my own code, but this is the quickiest solution that I see for now.

Yes! You got it!

Thank you Alex!

Well I'm sure version 2 of the grid solves all these problems ;-)

Not to hijack this thread, but I think Google Maps has the same issue. Everytime I use google maps and AW it'll crash. If I comment out the code in AW for the setCapture / releaseCapture functions, google maps continues to work.

I'd try to find a way to alter google maps, but it's not open source so there's no way. Looks like the only way around this is modifying the AW code. Anyway to fix this?

Hi,

If google maps runs in your browser and is no applet you can look at the code what he is doing and debug the stuff. The code is in your temp browser directory. Pick all files and make a local example of it and start debugging.
Good luck (can be tough)

John

The google maps code is obfuscated so I can't really go through the local code to debug. In addition even if I did find the bug, I wouldn't be able to make any changes since I the code is downloaded from google each time I use the JS.

I see but to know the answere and want to solve it you must make it reproducable.
How is the obfuscating done. It is possible to make it readable again by transforming a compressed js file back to a readable one. There are tools around doing it for you. If the variables are renamed it will be harder of course.
If you find the error you can do 2 things change the grid software somehow or send google a mail with the error so they can change it.

Hola a todos, tengo un problema con JSCALENDAR en MOZILLA.
Calendar.setup() anda bien, pero cuando selecciono una fecha este no me la lleva al campo del formulario.
tienen alguna solucion para esto?

mi codigo es:

<link rel="stylesheet" type="text/css" media="all" href="c:/calendar/calendar-brown.css" />
<script type="text/javascript" src="c:/calendar/calendar.js"></script>
<script type="text/javascript" src="c:/calendar/lang/calendar-sp.js"></script>
<script type="text/javascript" src="c:/calendar/calendar-setup.js"></script>
<INPUT TYPE="text" NAME="P_FECHA_APERTURA" SIZE="11" MAXLENGTH="10" class="texto" width="75%" bgcolor="#E5F5FF" height="30" onBlur="ValidarFecha(this);" ><a href="#" id="P_FECHA_APERTURA1"><img src="/portada1img/calendario.gif" border="0" align="absmiddle" alt="" /></a>

<script type="text/javascript">
Calendar.setup({"ifFormat":"%d-%m-%Y" ,"daFormat":"%d-%m-%Y","firstDay":1,"showsTime":false,"showOthers":true,"timeFormat":12,"inputField":"P_FECHA_APERTURA","button":"P_FECHA_APERTURA1"});</script></TD></TR></TABLE>

Hi... calendar hav other way to open... look my code:

var onSelect = function(calendar, date){
          if(calendar.dateClicked){
              // get the value and do something
              dateEl.value = date;
              calendar.callCloseHandler(); // close calendar
          }
      }

      var onClose = function(calendar){
            calendar.hide(); // hide calendar
            calendar.destroy(); //destroy calendar
      }

      var cal = new Calendar(1, null, onSelect, onClose); //create
      dateEl = document.getElementById("dateElement");
      cal.weekNumbers = false;
      cal.setDateFormat("%d/%m/%Y");
      cal.create();
      cal.parseDate(/*CALENDAR_DATE_INIT*/"17/11/1984");
      cal.showAtElement(/*ELEMENT_APPEND_CALENDAR*/dateEl);

Can this code be used somehow to open JSCalendar instead of popup in Combo Control ? It would be realy great...

I did this not just for you ASJ, but for me too.

javascript.forum.17743.4/example-jscalendar-as-aw-combo.html