0

So, I use jQuery quite extensively and I am well aware of the "right" way to do the below, but there are times where I want to solve it in a more generic way. I'll explain.

So, I may have a link, like this: <a href='menu' class='popup'>Show menu</a>. Now, I have a jQuery function that fires on click for all a.popup that takes the href-attribute and shows the <div id='menu'></div> item (in this case). It also handles URL's if it can't find a DOM item with that ID.

No problem here. But, there are times when I don't have the same control over the coe where I can create a selectable target that way. Either because the code isn't created by me or because it is created through a chain of function that would all need a huge ovrhaul which I won't do.

So, from time to time, I would like to have this code:

<a href="javascript:popup('menu')">Show menu</a>

This would be in a case where I can only submit the label and the HREF for a link. No class, no nothing.

Problem here is that the function popup() has no idea about what element invoked it, and in most cases that's not a problem for me, since I only need to know where the mouse cursor was upon invokation.

But in some cases, I use someone elses jQuery functions, like qTip or something else. so I still want to fire off qTip(); when clicking a link that runs this JS function, but what do I attach it to to make it show? I can't just runt $().qTip(); because that implies $(this) and "this" is undefined inside the function.

So how do I do it? Any ideas?

Alex K.
  • 171,639
  • 30
  • 264
  • 288
Sandman
  • 2,323
  • 5
  • 28
  • 34

3 Answers3

1

Is there anyway you change the javascript method to javascript:popup('menu', this);? I've used this method successfully many times.

Jarrett Meyer
  • 19,333
  • 6
  • 58
  • 52
  • Yes, that would be possible, but when I tried it, the "this" never did seem to point to the A tag. I'll try it again and have a look. – Sandman May 17 '10 at 19:22
  • @Sandman: again, see http://stackoverflow.com/questions/2479557/why-is-it-bad-practice-to-use-links-with-the-javascript-protocol `this` is meaningless when used inside `href="javascript:..."`. – Crescent Fresh May 17 '10 at 19:24
  • Yes, that's what I said. I get an error even when using it as onclick=""... but that could be for some other reason. I know of the difference between onclick and javascript: and the system actually translates javascript: to onclick on the fly, so my examples would actually become onclicks :) – Sandman May 17 '10 at 19:39
1

Instead of referring to "this" try referring to $('a:focus') to refer to the link that was clicked.

Here's a quick and, as @Crescent Fresh would add, dirty (☺) sample:

<body>
<p><a href="javascript:popup('menu')">Show popup()</a></p>
<div id="menu" style="display:none">Today's menu</div>

<script type="text/javascript">
function popup(elm) {
    $('#' + elm).show();
    alert( $('a:focus').text() )
}
</script>
</body>

I tried just ":focus" but IE7 returned too much content. I tested this in FF 3.6.3, IE7, Chrome 4.1.249.1064 (all on Windows) and it seems OK, but I see now (when I was just about to hit "Post Your Answer") this relies on the browser's native support for querySelectorAll - see this jQuery Forum post ":focus selector filter?" and the jQuery.expr entry in the jQuery Source Viewer (where it appears Paul's idea was not implemented).

David Lantner
  • 561
  • 2
  • 10
  • Interesting. It would probably mess upp bested links (which is invalid anyway) and wouldn't work if the onclick="" handler is added to anything but a link. It could be a fallbak if the popup() function fails to find a "this". Thanks! – Sandman May 20 '10 at 11:31
1

How about

<a href="javascript:popup(event, 'menu')">Show menu</a>

Once you get the event object you can virtually do anything to it.

coolnalu
  • 375
  • 1
  • 7