Using HTML5 Data Attrributes

Using HTML5 Data Attrributes

Old Way

HTML

<tr id="{0D05D17C-C221-8D99-F7B4-426B12AAD41D}">
  <td>
    <i class="fa fa-pencil SelectRedirectForEdit" title="click to edit this redirect"></i>
  </td>
  <td class="RedirectName">Birmingham Small Arms Company</td>
  <td class="RedirectAlias">BSA</td>
</tr>

JQuery

$('#AjaxContentHolder').on('click', '.SelectRedirectForEdit', function (event) {
  var editRedirectRow   = $(this).parents("tr");
  var editRedirectGuid  = editRedirectRow.attr('id');
  var editRedirectAlias = editRedirectRow.find(".RedirectAlias").html();
  var editRedirectName  = editRedirectRow.find(".RedirectName").html();
  $('#AjaxEditRedirectGuid').val(editRedirectGuid);
  $('#AjaxEditRedirectAlias').val(editRedirectAlias);
  $('#AjaxEditRedirectName').val(editRedirectName);
  $('#DialogEditRedirect').modal('show');
});

New Way

HTML

<tr>
  <td>
    <i class="fa fa-pencil SelectRedirectForEdit" title="click to edit this redirect" data-page-guid="{0D05D17C-C221-8D99-F7B4-426B12AAD41D}" data-page-name="Birmingham Small Arms Company" data-page-alias="BSA"></i>
  </td>
  <td>Birmingham Small Arms Company</td>
  <td>BSA</td>
</tr>

JQuery

$('#AjaxContentHolder').on('click', '.SelectRedirectForEdit', function (event) {
  $('#AjaxEditRedirectGuid').val($(this).data('page-guid'));
  $('#AjaxEditRedirectAlias').val($(this).data("page-alias"));
  $('#AjaxEditRedirectName').val($(this).data("page-name"));
  $('#DialogEditRedirect').modal('show');
});

This page was last modified on Thursday, 6th August 2015 at 15:19:12 by Gary Keeling. © 2019 GKWeb Design.

Categorised as: Development

GK5 Footer

and whatever