open jQuery dialogue box on click of hyperlink

Question

I am using exhibit-api.js and D3.js

Problem I am having is that on map-lens in my map I have provided the hyperlink. Until yet its opening the new window or new page fine from hyperlink. But what I need is to open the page in jQuery popup window.

I have tried everything but the javascript is unable to find the <a> tag with id or class what am I doing wrong ?

What have I tried:

---

Following line of code is working but it opens page in new window, what I need is popup.

<a id="file" data-ex-href-content=".url" onclick="javascript:window.open('this.href','_blank','height=300;width=300;');">Interest Graph</a>

---

<script type="text/javascript">
$('#display').popupWindow({
        centerScreen:1
        })
</script>

Following is my code

Answer 1

Based on your plunk, I created this PLUNK example which I believe has the desired results. Please check.

<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false });

        $("#hlOpenMe").click(
            function () {
                $("#dialog").dialog('open');
                return false;
            }
        );
    });
</script>

Answer 2

It looks like you're trying to bind the click event before the element you want to bind it to exists. Remember that lens popups are created by exhibit on the fly, so if if you e.g. $("#display").bind("click") before someone clicks on the link, then the event will be bound to the element in the lens template instead of the actual popup lens. One way around this is to use jquery's event delegation mechanism, for example assign class "popopen" to the link in the lens template, then use $('body').on("click",".popopen", function () {your handler}). That way jquery will trigger the click event on any .popopen element even if it is created after you do the event binding.