tags:

views:

411

answers:

2
Q: 

Make onclick event stick after page reload

I have Javascript that opens another window and registers a click handler for all the links:

//Inside a class somewhere
this.file_browser_window = $(window.open("/filebrowser", "file_browser_window",
  "width=800,height=600"))

Event.observe(this.file_browser_window, 'load', function (){
     //This is the event I am after
     Event.observe(this.file_browser_window, 'click', handle_click_in_browser);
}.bindAsEventListener(this));

// The Handler function
function handle_click_in_browser(evt){
   evt.stop();  

   url = evt.target.href;

   if(url && url.endsWith('.png')){
       console.log("Image clicked");
       //REMMEMBER THIS URL ON MAIN PAGE
       this.close();
   }
   else{
       console.log("Regular stuff clicked", this);
       this.location = url; //<-- THIS is the breaking point
   }
}

However, when the user clicks on some link in that popup window, when the page reloads, my CLICK handlers are gone!

The links in the popup window point to the same domain.

Now, I cannot alter the source(html) on the popup window. I need to catch the href of the link-tag (if it points to image) that the user clicked on.

I am running django-filebrowser in the popup window if anyone is interested.

A: 

You should be applying your click event handlers for the popup page, within the popup page itself. I don't see any reason to make the parent window responsible for these event handlers.

Josh Stodola  2009-07-07 16:23:07
See update. I cannot alter popup source.
drozzy  2009-07-07 16:25:43
And why is that?
Josh Stodola  2009-07-07 16:27:42
Because I am using an pre-made filebrowser for my popup. It does all the stuff on it's own, I just need to capture the result. I update the question with the link to it.
drozzy  2009-07-07 16:31:41
So as a workaround, could you popup a custom page with your event binding code in it, but have the filebrowser part load in an iframe on that custom page? The event binding code could look at the document inside the iframe and attached the listeners every time the iframe reloads.
Cory Larson  2009-07-07 16:38:04
Um.. i could do that. Would be great you could present it as an answer.
drozzy  2009-07-07 16:40:58
It's pre-made, but why can't you modify it to include one simple javascript file?
Josh Stodola  2009-07-07 17:57:10
And you say it does all the stuff on it's own, which is clearly untrue, otherwise you wouldn't have to write this code to begin with.
Josh Stodola  2009-07-07 17:57:42
I cannot modify it to add one simple js file because it can change in the future (by the author) and I would not know which changes where mine and which were not mine. Regarding it doing stuff - it does stuff like create folders, upload images etc, stuff that is not related to the functionality i am looking for in this case.
drozzy  2009-07-07 18:29:44
Well, I would never dare put myself in that position, so I can't help you any further!
Josh Stodola  2009-07-07 19:53:23
Lol, it doesn't depend on me. Mr. Never Dare phtttt!
drozzy  2009-07-10 18:48:48
Ok, this is what I did in the end: I changed the source of the popup window. It's a flaw on the django-filebrowser's part that they don't include any callbacks.
drozzy  2009-07-10 18:50:48
You changed the source of the popup?! :-O I thought that was *impossible*
Josh Stodola  2009-07-10 19:33:44
hey, you want your checkmark or not, smartbuzz?
drozzy  2009-07-15 20:09:13
Hahahahahaha!!!!!
Josh Stodola  2009-07-15 21:01:24
+1  A: 

You may be able to work around the issue by putting your filebrowser page inside an iframe on in a new popup window. I may come back to edit this code, but for now here is some code that might get you started (probably will not work as-is -- doing this without testing)

== Page you're launching the popup from ===========

// some code to launch the file browser wrapper popup
var file_browser_popup = $(window.open("/new_wrapper_page.html", "file_browser_popup",
                "width=800,height=600"));

== Inside new_wrapper_page.html ===========

<html>
<head>
<script type="text/javascript">
// most of your existing code stays the same, but things are moved around

function listenForClicks() {
    var ifrm = $('filebrowser_iframe');
    var content = (ifrm.contentWindow ? ifrm.contentWindow.document : (ifrm.contentDocument ? ifrm.contentDocument : null));
    if (content) {
        //This is the event I am after
        Event.observe(content, 'click', handle_click_in_browser);
    }

}

// The Handler function
function handle_click_in_browser(evt){
   evt.stop();  

   url = evt.target.href;

   if(url && url.endsWith('.png')){
       console.log("Image clicked");
       //REMEMBER THIS URL ON MAIN PAGE
       parent.close();
   }
   else{
       console.log("Regular stuff clicked", this);
       parent.location = url; //<-- THIS is the breaking point
   }
}
</script>
</head>
<body>
<iframe id="filebrowser_iframe" src="/filebrowser/" width="800" height="600" onload="listenForClicks();"/>
</body>
</html>

Anyway, it's something to play with. Let me know if you need more direction -- my Prototype skills are weak and I'm only using your existing code to figure out what exactly you're trying to do...

Cory Larson  2009-07-07 17:44:37
what happends when the content in iframe changes? Would the click get re-registered or do I need to do it manually?
drozzy  2009-07-07 18:09:30
oh i guess that onload takes care of that. Nevermind.
drozzy  2009-07-07 18:10:01
How do I keep iframe on the page when I click a link inside the browser? Some like: iframe.contentWindow.location = url OR iframe.content = load_from_url(url)...???
drozzy  2009-07-07 18:25:48
OK. so this works: $('filebrowser_iframe').src = url; BUT what about form posts? They no longer work with this, and I cannot let them go through normally since they will get rid of my iframe.
drozzy  2009-07-07 18:27:56
Damn, i just thought of file uploads they cannot be handled with ajax
drozzy  2009-07-07 18:39:24
Does django have documentation on how you're supposed to use this control?
Cory Larson  2009-07-07 19:00:03
No, it's not django supported. It's independent. But this has little to do with django, just me trying to wrap my head around how to use this type of interaction between windows/frames etc.
drozzy  2009-07-07 19:28:06
Ok, thanks but this didn't work for various reasons, including the uploads etc.. Thanks for the idea though, I ultimately went with changing the source of the popup.
drozzy  2009-07-10 18:50:04

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript