What is the canonical approach to data transfer in jQuery UI Dialogue?

Question

I have the following markup:

<div data-id="1" data-name="Product 1">Product 1 <a href="#" id="delete_1">Delete</a></div><br />
<div data-id="2" data-name="Product 2">Product 2 <a href="#" id="delete_2">Delete</a></div><br />
<div data-id="3" data-name="Product 3">Product 3 <a href="#" id="delete_3">Delete</a></div><br />
<div data-id="4" data-name="Product 4">Product 4 <a href="#" id="delete_4">Delete</a></div><br />

<div id="delete-product" title="Delete product?">
  <p>
    <span 
      class="ui-icon ui-icon-alert" 
      style="float:left; margin:0 7px 20px 0;">
    </span>
    This product will be permanently deleted and cannot be recovered. Are you sure? 
  </p> 
</div>

I have the following jQuery UI script:

$(function () {
  $("#delete-product").dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Delete": function () {
        $(this).dialog("close");
      },
      "Cancel": function () {
        $(this).dialog("close");
      }
    }
  });

  $("a[id^='delete']").each(function () {
    $(this).click(function () {
      $("#delete-product").dialog('open');
      return false;
    });

  });
});

How to pass the value of a function Deleteso that I can display it in a dialog box? I was thinking about setting a global variable, but that is a little bad.

I don’t mind if I just get a link to the tag <a>that raised the click event. From there, I can handle the rest.

Answer 1

You can use API.data () in jQuery.

$(function () {
  $("#delete-product").dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Delete": function () {
        var id = $(this).data('item-id');
        //Do something with the id
        $(this).dialog("close");
      },
      "Cancel": function () {
        $(this).dialog("close");
      }
    }
  });

  $("a[id^='delete']").each(function () {
    $(this).click(function () {
      var id = $(this).parent().attr('data-id');
      $("#delete-snapshot").data('item-id', id).dialog('open');
      return false;
    });

  });
})

EDIT: Just noticed that ID matches are for dialogue. But the problem is in the code that I copied from your question.