JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id='loader'></div>
<div data-userid="1" class="userTableBody">
            <div class="idRow">1</div>
            <div class="usernameRow">user 1</div>
            <div class="useremailRow"><a href="mailto:[email protected]">[email protected]></a></div>

            <div class="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
</div> 
<div data-userid="2" class="userTableBody">
            <div class="idRow">2</div>
            <div class="usernameRow">user 2</div>
            <div class="useremailRow"><a href="mailto:[email protected]">[email protected]</a></div>

            <div class="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
</div> 

<div id="dialog-confirm" title="Delete user?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>

JavaScript

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:250,
      modal: true,
      autoOpen:false,
      buttons: {
        "Yes": function() {
            var $this = $(this);
            $.ajax({
                url:'action/deleteUser.php?id='+$( this ).data('userid'),
                success:function(){$this.dialog( "close" )}
            });
          
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
    
    $( ".toPopupButton" ).click(function() {
        var userid = $(this).parentsUntil('.userTableBody').parent().data('userid');
        console.log(userid);
      $( "#dialog-confirm" ).data('userid',userid).dialog( "open" );
    });
  });