[RESOLVED]Detecting Link Click

Hello everyone and thanks for your help in advance.  I am working on an application that passes data to a JQuery dialog through the click of a set of links.  The link looks like:

<a href="#" id="lnkopendialog" data-id="1">Open Dialog</a>

The function that opens if is:

    $(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false, modal:  true });
        $(this).click(
            function () {

                alert($(this).attr("id"));

                $("#dialog").dialog('open');
                return false
            }
        );
        });

However $(this).attr("id")) returns undefined.  However, when I use "#lnkopendialog", a value is returned.  The reason I am using ‘this’ instead is that the page will ultimately have many of these links within a table and I need to determine which link was
clicked.  I’m not really sure why this isn’t working.  Any help would be appreciated.

kmcnet

However $(this).attr("id")) returns undefined.  However, when I use "#lnkopendialog", a value is returned.  The reason I am using ‘this’ instead is that the page will ultimately have many of these links within a table and I need to determine which link was
clicked.  I’m not really sure why this isn’t working. 

If you want to target multiple elements then I would suggest you to use some general selectors like
class selector or something like that,instead of using id selector.

Please modify your function like given below

  <script>$(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false, modal:  true });
        //Use the css selector here
        $(".lnkbuttoncss").click(
            function () {
          
                alert($(this).attr("id")+ $(this).attr("data-id"));

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

Also ensure that you have assigned a class to your hyperlink button

<a href="#" id="lnkopendialog" class="lnkbuttoncss" data-id="1">Open  Dialog</a>

Complete code

<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <script>$(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false, modal:  true });
        //Use the css selector here
        $(".lnkbuttoncss").click(
            function () {
          
                alert($(this).attr("id")+ $(this).attr("data-id"));

                $("#dialog").dialog('open');
                return false
            }
        );
});</script>
</head>
<body>
<a href="#" id="lnkopendialog" class="lnkbuttoncss" data-id="1">Open
  Dialog</a>
  <br/>
  <a href="#" id="lnkopendialog" class="lnkbuttoncss" data-id="2">Open
  Dialog</a>
</body>
</html>

Thanks for the response.  Obviously works, but I am not sure why my code fails.  Also, it seems having to call on a css selector, while it works, is a bit of a hack.  Any more elegant ways?

I appreciate your help.

kmcnet

Also, it seems having to call on a css selector, while it works, is a bit of a hack.  Any more elegant ways?

Well if you don’t want to add the css class then You can use the
element selector
where it will select all anchor tag elements in your page.

Modified Function:

 <script>$(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false, modal:  true });
        //Use the element selector here
        $("a").click(
            function () {
          
                alert($(this).attr("id")+ $(this).attr("data-id"));

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

Complete Code:

<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <script>$(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false, modal:  true });
        //Use the element selector here
        $("a").click(
            function () {
          
                alert($(this).attr("id")+ $(this).attr("data-id"));

                $("#dialog").dialog('open');
                return false
            }
        );
});</script>
</head>
<body>
<a href="#" id="lnkopendialog"  data-id="1">Open
  Dialog</a>
  <br/>
  <a href="#" id="lnkopendialog"  data-id="2">Open
  Dialog</a>
</body>
</html>

You can see a
working Sample Demo here

Thanks again for the response.  But doing this would mean any link on the page would open the dialog box.  Am I correct?

kmcnet

Thanks again for the response.  But doing this would mean any link on the page would open the dialog box.  Am I correct?

Well Yes this will target all the anchor tag elements in your page. You may need to add some kind of attribute value or something like that to differentiate this set of anchor tags from others.

This is the reason I initially used Class selector, that will select all elements with specific class assigned to it.

OK.  Thanks for the help!

Leave a Reply