Question

I have a HTML table with a column per row with this html code inside the <td></td> tags:

 <a onclick="modalDialog(this); return false;" href="javascript:void(0)">17795</a>
    <div style="display: none;" class="MessageDataDiv">
     some text to show up in my jquery modal window when function modaldialog is clicked.
    </div>

And the jQuery function that is called when onclick is fired within a href link

function modalDialog(event) {
        $('a.message').click(function () {
         var div = new $(this).closest("td").find(".MessageDataDiv").clone();
         div.show().dialog();
          event.preventDefault();
        });
    }

How can I write the jQuery function so the function only fires one time when the linked is clicked? I need to have the jQuery function modalDialog as a separate function because the html table use AJAX partial rendering.

The problem is when I click the a href link first time nothing happens, second click on the links gives me two modal dialog and third click gives me three modal dialog and so on…

Answer 1

I think the simplest way is to have a single div that shows every other text.

<div id="MessageDataDiv"></div>

<script>
$(function() {
  $('#MessageDataDiv').dialog({ autoOpen: false });
});
function modalDialog(a) {
  if($(a).data('clicked')) return false;
  $(a).data('clicked', true);
  $('#MessageDataDiv').html($(a).next().text()).dialog();
  return false;
}
</script>

This way you don’t have to create a every time you open a dialog.