So I have a table (tables are for tabular data) with patient information. The user can click the row to select it and when they do the right part of the interface loads some additional information on the patient - quick lookup info if you will, but also provides links to tasks involving that information - edit, view case history, etc.
I’d like to replace the default right click behavior on the rows to create a pop up menu next to the point of click that links to the same list of options for the convenience of the more savvy users.
The project is being built with prototype so no jQuery please. The site is a corporate intranet where Firefox is the only browser it is required to work in. It would be nice to have it work in webkit. IE is banned from our network as much as is possible - our newer Win7 machines do not have it installed at all - so whether the solution works in IE is irrelevant to me, though it might be useful to other folks looking up the information in the thread.
Weird - the Edit button is missing. Anyway, this is the code
<? protected function summaryJavascript() {
ob_start()?><script type="text/javascript">
Event.observe(window, 'load', function(){
$$('#Patients tr').invoke('observe', 'click', function(ev){
ev.stop();
var e = ev.findElement('tr');
$$('#Patients tr').invoke('removeClassName', 'selected');
e.addClassName('selected');
PAMWF.request( '<?= PAMWF_WEBROOT.'/'.PAMWF::$path ?>?action=ajaxViewRecord&table=patients&patients[recordid]='+e.id.split('Row_')[1] );
}).invoke('observe', 'dblclick', function(ev){
ev.stop();
var e = ev.findElement('tr');
window.location = '<?= PAMWF_WEBROOT .'/'.PAMWF::$path ?>?action=view&table=patients&patients[recordid]='+e.id.split('Row_')[1];
});
});
</script><? $this->parseJavascript(ob_get_clean());
}
?>
I’ve noted that if I attach preventDefault() to the document body I can be rid of the context menu default on the page, but right click issues no event at all… What’s going on?
For some reason I cannot edit my posts in this forum so please forgive the repeat posts. I found the answer to the problem, but it’s weird.
Apparently you can only test for right clicks against the document object. so
Event.observe( document, 'click', function(e){
e.isRightClick();
} );
Will work, but
Event.observe( 'SomeDiv', 'click', function(e){
e.isRightClick();
} );
will not. Further a right click doesn’t raise an event on that object, though it does raise an event on the document as a whole.
The solution therefore is to attach the event to the document as a whole. This is a bit messy since the first thing our code has to do is figure out if it should do anything. This isn’t too difficult though, just test event.findElement() against the div that should be watched.
Still, on the whole this feels a bit messy and unnatural. Intuitively we should be able to watch for right clicks on any element, not just the body. I wonder if this a problem in javascript or a problem in prototype’s event system…
EDIT: And now it seems I can edit this post, but not the first two posts of the thread. Weird day indeed.
No the problem is that you are trying to override operating system functionality with something specific to your web page. You are therefore fortunate that it allows you to do it in even the limited situations where you have got it to work. Most browsers will not allow you to touch the contextmenu at all.
Also with editing posts you only have a short period after making a post in which to update it. The reason you can’t update your old posts is that the allowed time for editing them has passed.
Funny then that operating systems allow programs to add items to the context menu. Funny also that Firebug, which works largely in javascript, adds several items to that menu. And Google Maps - now that’s just hilarious - they are idiots in your opinion for implementing this on their page yes?
In any event I’m not trying to alter the context menu - I’m replacing it with one specific to the application I’m writing. ‘Web Page’ isn’t really an accurate description of this thing. And as I stated in the first post as long as it works in Firefox I really don’t care if it works in any other browser. This particular feature though duplicates a menu elsewhere on the page so even when it does fail functionality isn’t inhibited.
And I was unable to edit the first post only 10 minutes or so after making it post. I don’t think the time limit used to be that restrictive.