jquery how to get the button that has opened the dialog

Question

Hello,
I have a dialog that is opened by many buttons. How can I know which button has opened that dialog?

$('#dialog').dialog({
  autoOpen: false,
  buttons: {
    "Ok": function() { 
      $(this).dialog("close");
    }, 
    "Cancel": function() { 
      $(this).dialog("close");
    } 
  },
  open: function(event, ui) {
    //HERE ::: how to get an HTML OBJECT TO THE ELEMENT THAT OPENED THE DIALOG
  }
});

This is called by:

$('a').live('click',function(){
  $('#dialog').dialog('open');
});

I want to know which <a> tag has called that dialog. Is this possible?

Thanks!

Answer 1

making the assumption you have a button like such:

<input type="button" class="mybuttons" value="Click Me"/>

and some css like:

.openerclass
{
  background-color: red;
}

add that class when clicked

$(function()
{
    var myevent;
    $(".mybuttons").click(function(event){
       myevent = $(event.target); 
       $(".selector").dialog("open");
    });

    $(".selector" ).dialog({
       open: function(event, ui) { 
       var opener = $(event.target);
       myevent.addClass("openerclass");
       alert(myevent.nodeName);
       ... }
    });
});

Edit: fix syntax error and add another example to make it clear

Edit2: The original was wrong (sort of) in that the opener event is NOT associated with the click event. Modified to use the click event properly.

Answer 2

You can give it an id:

$('a').live('click',function(){
      $('#dialogTrigger').removeAttr('id');
      $(this).attr('id', 'dialogTrigger');
      $('#dialog').dialog('open');
}

open: function(event, ui) {
     // do something with $('#dialogTrigger')
}

Answer 3

In your .live() handler you could store a reference to the element that was clicked on using .data(), like this:

$('a').live('click',function(){
  $('#dialog').data('opener', this).dialog('open');
});

Then to get it later you can grab it from $('#dialog').data('opener'), or $.data(this, 'opener') in the case of the open callback (because this refers to the dialog element). For example your open function may look like this:

open: function(event, ui) {
  $(this).html("Hi, I was opened by: " + $.data(this, 'opener').id);
}

This would show the id property of the anchor you clicked on to open the dialog...you can do whatever you want really, $.data(this, 'opener') refers to the <a /> DOM element.

You can give try a demo of this here