Posts tagged ‘javascript’

Through the Square (javascript) Window

For the Cohere site, I’ve been trying to figure out how you can keep track of a pop up window using Javascript even when the parent page changes (to another page on same domain) and to know whether the pop up window is already open. I’m having exactly the problem mentioned in this forum post – but as yet no solution.

All the example scripts I’ve found so far will only work if the parent page remains the same. I.e. you’re testing whether the pop up is already open, but applying this test on the document/page that originally opened the popup. What I’m looking to do is subtly different – so the pop up remains open so as you are browsing Cohere you can add ideas to make connections between.

I would think that this ought to be possible, because if you open a popup window with the same name as an existing one, the old one will get overwritten – so it ‘knows’ that the pop up exists. Plus, this is all running from the same domain, so there won’t be any cross domain issues.

If anyone has any pointers as to how to achieve this, it would be much appreciated. Or if you have other suggestions for how the same results could be achieved. Cheers ;-)

IE crashing with MSG

Came back from holiday yesterday (see the pics!) , to find a stack of emails about problems with MSG crashing IE. This is a bit odd as we’ve not updated MSG for a little while, so strange that it just seems to have started occuring. It seems quite an erratic problem, but it does bring the whole browser down – something I find a little odd for a purely javascript application.

I’m really hoping to get this fixed very soon, but haven’t yet found the root cause, I can reliable recreate the issue, so just need to find why it’s happening.

Plus I need to get my presentation for next weeks OpenLearn conference written sometime soon!

Update (29th Oct)… I have now got the problem resolved, though still don’t know the real root cause. I fixed it by going back through the changes I’ve made recently and seeing at what point the error started occuring.
The change which appears to have been causing the error was when I switched from using <a href=”javascript:….”> to using (what I thought was the proper way!) of adding/removing event listeners. The actual problem occured with the call to detach event, although it didn’t fail everytime – it would work for the first few times and then randomly cause the browser to crash. I did notice that the carsh would only happen if I had the MSG client and the referring site (the one with the users presence icon) open at the same time, if only one was open the crash wouldn’t occur.

For info this was the code that was causing problems:

var oldImg = presenceNode.firstChild;
//remove any current listeners
if(oldImg.removeEventListener){ // Mozilla, Netscape, Firefox
oldImg.removeEventListener('click', launchClick, false);
oldImg.removeEventListener('click', readMessageClick, false);
} else { // IE
oldImg.detachEvent('onclick', launchClick);
oldImg.detachEvent('onclick', readMessageClick);
}

So I replaced this with the code below that just alters the location and title of the link (also a bit of adjusting to add the <a> in):

var oldAnchor = presenceNode.firstChild;
var newAnchor = oldAnchor.cloneNode(true);
newAnchor.href = "javascript:readMessageClick();";
newAnchor.title = MSGAPIconf.str_oneMessageUnread;


So, glad to have got it fixed, but would be even better to know why this was really happening at all!

Update Number 2 (1st Nov) – The fix has now been made live on the MSG-OpenLearn servers.

Javascript addEventListener – peculiarity or bug?

Yesterday I was writing some javascript code to dynamically produce a list and add an event listener for when an item in the list was clicked on. When I then tested it out, for some reason the last event listener seems to have overridden all the others in the list. I’m not sure if the is a Javascript ‘feature’ or bug, but it occurs in both Firefox (v2) and IE (v6).
This is the code I tested:


function init(){
	var myUl = document.getElementById("test");

	for(var i=0; i<10; i++){
		var myLi = document.createElement("li");
		mySpan = document.createElement("span");
		mySpan.setAttribute("id","myspan"+i);
		myLi.appendChild(mySpan);
		myUl.appendChild(myLi);

		mySpan.appendChild(document.createTextNode(i));
		if(mySpan.addEventListener){ // Mozilla, Netscape, Firefox
			mySpan.addEventListener('click', function(){test(i);}, false);
		} else { // IE
			mySpan.attachEvent('onclick', function(){test(i);});
		}
	}
}

function test(myNum){
	alert(myNum);
}

This produces an unordered list of 10 items – (0-9), but when you click on any of the numbers the alert returns ’10′, rather than the expected 0-9 depending on which on you click. I could understand if it returned ’9′ for every item in the list – but why 10?? I spent ages fiddling with this, but never did find what was actually causing this to occur – it seems like a bug to me – unless I’m just misunderstanding how the addEventListeners work? Maybe something to do with the fact I’m using anonymous functions?

If anyone has an explanation (or can point me to an explanation) as to what I’ve done wrong it would be much appreciated.

For info I managed to get around the problem by using the code below instead, though I’d still like to know what was wrong with my original code!


function init(){
	var myUl = document.getElementById("test");

	for(var i=0; i<10; i++){
		var myLi = document.createElement("li");
		mySpan = document.createElement("span");
		mySpan.setAttribute("id",i);
		myLi.appendChild(mySpan);
		myUl.appendChild(myLi);

		mySpan.appendChild(document.createTextNode(i));
		if(mySpan.addEventListener){ // Mozilla, Netscape, Firefox
			mySpan.addEventListener('click', eventHandler, false);
		} else { // IE
			mySpan.attachEvent('onclick', eventHandler);
		}
	}
}

function eventHandler(e){
	var e=e? e : window.event;
	var el=e.target? e.target : e.srcElement;
	alert(el.id);
}

Friday 25 August 06

Found a way to replace the alt text – it involves creating a new element, assigning the required attributes and finally then overwriting the original img tag, here is some sample code:

var oldImg = myNode.firstChild;
var newImg = document.createElement(‘img’);
newImg.src = "/new/path/to/image/jpg";
newImg.alt = "my new alt text";
           
myNode.replaceChild(newImg,oldImg);

Note that this is very basic example and probably only works when ‘myNode’ has a single child node which is of type ‘img’.

Friday 25 August 06

With the problems etc I outlined yesterday I’ve been thinking that we might be trying to make it all overcomplicated by allowing the user to change their presence from within the block – and all the associated problems this entails with maintaining session ids in Moodle and JavaScript, knowing when they’ve expired etc. I think our best bet would be maybe concentrate on getting ‘live’ presences showing in the forums, and just have the Moodle block as a link out to launch the MSG window – maybe just have the block showing number of online users. So today I think I look into how I can make the no users online appear as a live count and how the users presence can be made ‘live’ in the forum display.