yazzgoth.org

I’ve just found a very interesting framework designed for Python/AJAX developers.
It’s called Kinetic Style Sheets, or KSS for short, and it’s goal is to use CSS with some additional syntax to pass marshalled data from server back to the client to manipulate the DOM without using a single line of JavaScript (most of the times).

Apparently it’s included in PLONE 3.0, a new version of framework I’ve used some time back, but due to my migration to lighter frameworks (TurboGears/Django) existence of KSS had evaded my attention until now.
“So what’s so hot about Kinetic Style Sheets?” you may ask “Does it move things?”… Well pretty much But that’s not the killer feat.

It’s designed for Python developers who wish to keep their nose in Python code as much as possible avoiding hairy JavaScript(browser) world.

It’s also designed not to break compatibility with JavaScript-disabled browsers.

Well that’s that for wetting appetite… It’s time to get a bite of this framework, and then I’ll be back with more thoughts.

Cross domain scripting (or XDomain) can be good or evil, depending who is using it. But for an average Joe the Programmer XDomain scripting is blessing. Unfortunately most browsers don’t let your JavaScript to make a request to anything else than the server it was downloaded from.

Just few moments ago I had this problem when I needed to send a GET request to a RESTful server to trigger an action.
Unfortunately for me my script didn’t come from the server I needed to send the request, thus the browser killed the request on the spot.

There is a workaround, at least for simple situations like this one.
If you create an invisible iframe (style=”display: none”) you can set it’s src to the link you need to trigger and it will work without a glitch.

Here’s a sample code:

 Trigger the server without reloading this page!

or this link:  Trigger the server without reloading this page!

I believe that with Dojo it would be even possible to have fairly easy access to the content of the iframe generated this way (I’ll check that and post the results here)

I’ve noticed something weird under Firefox and how it evaluates flow control statements…

Basically what I’ve noticed is that when I did

if(document.getElementById("someID") == null)
{
        // create new element with someID here
}

and I’ve put this in a timer event, so it was called every 60sec.

So what happened? Firefox evaluated it as

if(document.getElementById("someID")) 

Argh, completely the other way around I was expecting it !

Workaround?

if( (document.getElementById("someID") == null ) )
{
       // create new element with someID here
}

God bless FireBug

Well I know… JavaScript is a big quirk in general due to the browser incompatibilities.

When you build an event and attach it to a object in DOM by:

obj.onclick = handlerFunctionName;

and then you have a function declared like this:

function handlerFunctionName(ev)
{
    var element = ev.srcElement ? ev.srcElement: ev.target; // for compatibility between IE and FF
}

IE fails to execute that, where FireFox runs fine.
A quick fix for that is:

function handlerFunctionName(ev)
{
   ev = ev ? ev: event;
   var element = ev.srcElement ? ev.srcElement: ev.target; // for compatibility between IE and FF
}

Variable event is automagically created in IE but it doesn’t exist under FF, while under FF event is passed to the function and under IE it isn’t.

Another bump I’ve hit today was when I tried to selectively remove some images from a form based on their className.
A simple for loop which one may think will work will actually leave behind some of the images that it should remove.
Here is how not to do this:

for(i=0; i< images.length;i++)
{
   if(images[i].className=="deleteMe")
   {
      myForm.removeChild(images[i]);
   }
}

The reason for that is when you remove something from the images array you will skip one place ahead in the for loop iteration.
I’ve found some examples how to remove all child elements, but what I needed was to remove only some, so here is how I did it. It actually loops a bit more times than the previous example, as it’s iterating through all child elements in myForm

var myForm = document.getElementById("myForm");
var i = 0;
while( myForm.childNodes[i])
{
   if(myForm.childNodes[i].className == "deleteMe")
   {
      myForm.removeChild(myForm.childNodes[i]);
   }
   else
   {
      i++;
   }
}