Question

I have an org chart using slickmap.css which I modified with toggle show/hide. It’s all working fine but now I need to add a modal dialog window on click and display info form the a tag.

I managed to do this but had to add a return false to prevent the toggle close action from happening. Now when I display the info it completely removes the a tag from the page. I think when I add html(this), it ignores the return false at the end.

Please can anyone help me make these two functions work together.

Here is the code I am using to call the modal-dialog, sorry I havent posted a fiddle but I think this is where the problem lies

$('#samplelink').click(function(){
  $('#modal_window').dialog('open').html(this);
  return false;
}); //end click handler

Answer 1

You cannot pass this to the html() method.

Since that code lies inside an event handler, this will be the DOM element handling the event (click in our case). html() can only take a string or a function argument.

If your goal is to fill the dialog with the contents of #samplelink, you should call html() on the current element without arguments, then call html() on the dialog with the resulting string:

$("#samplelink").click(function() {
    $("#modal_window").dialog("open").html($(this).html());
    return false;
});