Custom event listeners

5 views
Skip to first unread message

jonbutler88

unread,
Nov 13, 2008, 11:44:50 PM11/13/08
to MochiKit
I have an iframe on a page, and im trying to write some ajax to check
the src variable when onchange is called. However, it has to be
secure, so rather than include onchange='func()' in the HTML, I have
to assign it with javascript. Im still pretty new to mochikit, and im
wondering what the best way to set this up would be?

Thanks in advance, sorry if its a bit vague.

Yoann Aubineau

unread,
Nov 14, 2008, 5:21:25 AM11/14/08
to jonbutler88, MochiKit
Assuming your iframe's id is "foo", you would do :

connect("foo", "onchange", function(e) {
logDebug($("foo").src);
});

Not sure what "onchange" event means on an iframe though.

See http://mochikit.com/doc/html/MochiKit/Signal.html#fn-connect for
more information about signals.

-- Yoann


2008/11/14 jonbutler88 <jonbu...@googlemail.com>:

jonbutler88

unread,
Nov 16, 2008, 1:33:07 AM11/16/08
to MochiKit
Yeah, turns out onchange doesnt detect the change in src.... Im gonna
have to write my own event by the looks of it, something that baffles
me a fair bit. Ive seen lots of tutorials using prototype, but none
that focus around mochikit.... Ive had a good look at the
mochikit.signal docs, but im no closer to understanding how to write
my event. Im clearer about how to attach the event and fire it, but im
lost with how to define when it fires...

Thanks very much for your help so far :)

On Nov 14, 10:21 am, "Yoann Aubineau" <yoann.aubin...@gmail.com>
wrote:
> Assuming your iframe's id is "foo", you would do :
>
> connect("foo", "onchange", function(e) {
>     logDebug($("foo").src);
>
> });
>
> Not sure what "onchange" event means on an iframe though.
>
> Seehttp://mochikit.com/doc/html/MochiKit/Signal.html#fn-connectfor
> more information about signals.
>
> -- Yoann
>
> 2008/11/14 jonbutler88 <jonbutle...@googlemail.com>:

Yoann Aubineau

unread,
Nov 16, 2008, 5:06:27 AM11/16/08
to jonbutler88, MochiKit
> Yeah, turns out onchange doesnt detect the change in src....

Maybe "onload" will do. I never use iframes so I can't say for sure it
will work on every browser. But it sounds like a logical try to me.

If the iframe's source changes on a link or button click, you can also
listen for those events, check if the iframe's source is actually
different from the previous value and then fire the custom event you
need.

Otherwise, setup a loop that check regulary iframe.src but … eark !

-- Yoann

2008/11/16 jonbutler88 <jonbu...@googlemail.com>:

Jon Butler

unread,
Nov 16, 2008, 9:25:00 AM11/16/08
to Yoann Aubineau, MochiKit
Yeah, that was my original thinking, but onload doesnt fire when I
change the src.

I tried using a loop before, but I thought it would be more efficient
to use a custom event. Thiinking about it, the listener would still
need to check when the src changes so it's pretty much the same
solution.

Il have another go and post back if I run into problems.

Cheers

On 16 Nov 2008, at 10:06, "Yoann Aubineau" <yoann.a...@gmail.com>
wrote:

jonbutler88

unread,
Nov 16, 2008, 6:52:57 PM11/16/08
to MochiKit
Ok, so I have this code:

[code]

function check(tab) {
var src = $('editor').src;
if (src.substring(0,31) != "<my site.com>")
{
alert("access violation");
removeElement(tab);
focusTab('ide_tab0', 'start.php');
return false;
}
else
{
setTimeout(check(tab), 1000);
return true;
}
}

[/code]

But this makes an infinite loop, and the function eventually fails due
to recursion errors. Is there any way to have this run in the
background? So other code can run while it is waiting for execution? I
have it setup with connect('editor','onload',check(tab)), so the DOM
should load before it runs, and there should be no errors, it just
needs to be able to load the rest of the page while the loop is
running.

Any thoughts?

Thanks

On Nov 16, 2:25 pm, Jon Butler <jonbutle...@googlemail.com> wrote:
> Yeah, that was my original thinking, but onload doesnt fire when I  
> change the src.
>
> I tried using a loop before, but I thought it would be more efficient  
> to use a custom event. Thiinking about it, the listener would still  
> need to check when the src changes so it's pretty much the same  
> solution.
>
> Il have another go and post back if I run into problems.
>
> Cheers
>
> On 16 Nov 2008, at 10:06, "Yoann Aubineau" <yoann.aubin...@gmail.com>  
> wrote:
>
> >> Yeah, turns out onchange doesnt detect the change in src....
>
> > Maybe "onload" will do. I never use iframes so I can't say for sure it
> > will work on every browser. But it sounds like a logical try to me.
>
> > If the iframe's source changes on a link or button click, you can also
> > listen for those events, check if the iframe's source is actually
> > different from the previous value and then fire the custom event you
> > need.
>
> > Otherwise, setup a loop that check regulary iframe.src but … eark !
>
> > -- Yoann
>
> > 2008/11/16 jonbutler88 <jonbutle...@googlemail.com>:

jonbutler88

unread,
Nov 17, 2008, 12:30:39 AM11/17/08
to MochiKit
Ok, so ive run into a brick wall with this loop. Here is what I have:

function init(tab) {
connect('editor','onload',function () {
if (document.getElementById
('editor').contentWindow.document.designMode != "on")
{
document.getElementById
('editor').contentWindow.document.designMode = "on";
}
document.getElementById('editor').contentWindow.focus();
setInterval("check("+tab+")",5000);
});
}

function check(tab) {
var src = document.getElementById('editor').src;
if (src.substring(0,31) != "<my site.com>")
{
alert("access violation");
removeElement(tab);
focusTab('ide_tab0', 'start.php');
}
}

But im running into problems with the loop. While it is running, the
rest of the page stops loading. Is there any way I can get the loop to
run in the background?

Thanks

On Nov 16, 2:25 pm, Jon Butler <jonbutle...@googlemail.com> wrote:
> Yeah, that was my original thinking, but onload doesnt fire when I  
> change the src.
>
> I tried using a loop before, but I thought it would be more efficient  
> to use a custom event. Thiinking about it, the listener would still  
> need to check when the src changes so it's pretty much the same  
> solution.
>
> Il have another go and post back if I run into problems.
>
> Cheers
>
> On 16 Nov 2008, at 10:06, "Yoann Aubineau" <yoann.aubin...@gmail.com>  
> wrote:
>
> >> Yeah, turns out onchange doesnt detect the change in src....
>
> > Maybe "onload" will do. I never use iframes so I can't say for sure it
> > will work on every browser. But it sounds like a logical try to me.
>
> > If the iframe's source changes on a link or button click, you can also
> > listen for those events, check if the iframe's source is actually
> > different from the previous value and then fire the custom event you
> > need.
>
> > Otherwise, setup a loop that check regulary iframe.src but … eark !
>
> > -- Yoann
>
> > 2008/11/16 jonbutler88 <jonbutle...@googlemail.com>:

Per Cederberg

unread,
Nov 17, 2008, 3:18:58 AM11/17/08
to jonbutler88, MochiKit
When you call setInterval and setTimeout you should provide functions.

In your first example you perform a function call to setTimeout and
then send the result to setTimeout. That leads to an infinite loop.
Instead, do this:

var func = function() { check(tab); };
setTimeout(func, 1000);

In your second example you construct a string which the JS interpreter
does "new Function(...)" with. That is inefficient. And your 'tab'
argument will also be converted into a string (with toString) which is
probably not correct. Instead, do this:

var func = function() { check(tab); };
setInterval(func, 5000);

Or if you want to do it "the MochiKit way":

setInterval(bind(check, this, tab), 5000);

Cheers,

/Per
Reply all
Reply to author
Forward
0 new messages