How to get the clicked elements' id and open a popup in jquery

Question

I have some <div> tags created by Javascript each having different "id" and "class" attribute.

Some samples of div tags

<div id="demoid1" onclick="javascript:openDialog(this)" class="demoClass1">demoTag1</div>
<div id="demoid2" onclick="javascript:openDialog(this)" class="demoClass2">demoTag2</div>
<div id="dialog-1" title="Test Case Details">
    <P>This my first jQuery UI Dialog!</P>
</div>

Code done so far:

function openDialog(ev) {
var docid= ev.id;
 $(function () {
    $("#dialog-1").dialog({
        autoOpen: false,
    });
    $("#"+docid).click(function () {
        $("#dialog-1").dialog("open");
    });
});
}

Please help. Update: I have such 10-15 <div> tags and each one different ID.

I want those <div> tags to be clickable and on click it will pop up a small display window.

Before I needed the ID of the element clicked so that I can fetch information dynamically from JSON so that I can display the information.

Your question is not clear – Gaurav Aggarwal Apr 06 '16 at 07:40 — Gaurav Aggarwal, Apr 06 '16 at 07:40
Sorry, but what does `$m()` do? – SamGhatak Apr 06 '16 at 07:40 — SamGhatak, Apr 06 '16 at 07:40

score 0 · Answer 1 · answered Apr 06 '16 at 07:40

0

$(document).ready(function() {
   $(document).on('click', '#test', function (event) {
      alert($('#test').attr('id'));
       });
   });

Try this :).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="test">ghnhjg</div>

answered Apr 06 '16 at 07:40

Rakesh Lankapalli

106
3

While this answers the question in the title, if you look at the code in the question you will see that there are other issues to be solved. As such, this doesn't really help anyone. – Rory McCrossan Apr 06 '16 at 07:43

Roy · Answer 2 · 2016-04-06T07:54:30.707

Considering $m is $ of jQuery function object.

Note: This is not a good idea to approach the issue. The click should be invoked with class selector and the numeric data should come from data-numeric attribute or something similar.

Try this: (Steps are explained with comments.)

$m("[id^=demoid]").click(function () {
    $m(this).prop('id') // this is how you get id of the clicked element
    // now I am hoping you are trying to extract the numeric value from the id
    //for that you need to do the next line
    var numeric = $m(this).prop('id').replace('demoid', '');
    $m("#dialog-"+numeric).dialog("open"); // concatinate the numeric value to the #dialog-* 
});

SamGhatak · Accepted Answer · 2016-04-06T07:56:45.193

First, you need some resources. check this link.

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

https://code.jquery.com/ui/1.11.4/jquery-ui.js

Here is a fiddle where its working.

And try this:

$(document).ready(function() {
  $(".demoClass").click(function() {
    $("#dialog-1").dialog({
      resizable: false,
      height: 140,
      modal: true,
      buttons: [{
          text: "Yes",
          click: function() {
            $(this).dialog("close");
          },
        }, {
          text: "No",
          click: function() {
            $(this).dialog("close");
          },
        }

      ],
    });
  });
});

AND HTML:

<div id="demoid1" class="demoClass">demoTag1</div>
<div id="demoid2" class="demoClass">demoTag2</div>
<div id="dialog-1" title="Test Case Details">
  <P>This my first jQuery UI Dialog!</P>
</div>

thanks, it helped. My htmls were dynamically generated. To use jquery on them follow this http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Jyotirmaya Prusty, Apr 06 '16 at 10:13

How to get the clicked elements' id and open a popup in jquery

3 Answers3