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

Try removing '_blank' property? _blank is suppose to open link in new tab. — Asad Ullah, Apr 26 '14 at 17:32
@AsadMalik Actualy thats not the problem as I wrote that window.open() is working fine. what I need is to open jQuery popups like http://jsfiddle.net/HmBmU/5/ — analyticalpicasso, Apr 26 '14 at 17:43
Forgive me if i am wrong, but in my view you are making things complicated, just capture the click event using jquery click function, and then open the popup.. — Asad Ullah, Apr 26 '14 at 17:46
@AsadMalik I know its easy enuf but I am unable to understand that why its not working I have tried various formats of jQuery popups and events but nothing is working — analyticalpicasso, Apr 26 '14 at 18:26
@AsadMalik I also made this http://plnkr.co/edit/PDv7bgyvfhMqLIfQxR32?p=preview but even this is not firing click event — analyticalpicasso, Apr 26 '14 at 18:31
The issue is with brackets, your syntax is wrong, you should close brackets, please compare @FernOfTheAndes code with yours, and mark his answer as accepted.. Thanks — Asad Ullah, Apr 28 '14 at 05:36

score 1 · Accepted Answer · answered Apr 27 '14 at 10:57

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>

answered Apr 27 '14 at 10:57

FernOfTheAndes

4,975
2
17
25

Thank You. Can you please guide me that what am I doing wrong ? I even am providing the click event and proper id but still unable to open the dialog box. – analyticalpicasso Apr 27 '14 at 12:21

score 0 · Answer 2 · answered Jun 17 '14 at 19:21

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.

open jQuery dialogue box on click of hyperlink

2 Answers2