Confirm button "delete" in CRUD

Question

Confirm button "delete" in CRUD

Navigation

#1 by (3 votes)

2

Good afternoon,

I have a code that works with an id="confirm" so you have to confirm before deleting a record from a CRUD using datatables.

The problem is that since it is a crud, it can not work with ID's since there would be several elements with the same ID, so it would have to use a class instead of an ID, but when trying it it does not work .

Could someone tell me what I did wrong?

Javascript code

    <script type="text/javascript">
    $(".confirm").click(function(e) {
      e.preventDefault();
      var linkURL = $(this).attr("href");
      warnBeforeRedirect(linkURL);
    });

    function warnBeforeRedirect(linkURL) {
      swal({
        title: "¿Estas segur<?php get_Genero($_SESSION['CBSGenero']); ?>?",
        text: "Una vez borrado el usuario, no podrá ser recuperado.",
        type: "warning",
        showCancelButton: true,
      }).then(function(result) {
        console.log(result);
        if (result.value) {
           window.location.href = linkURL;
        }
      });
    }
    </script>

HTML code

<tbody id="tBody">
    <?php 
        $query = $user->getUsers();
        foreach($query as $u) {
    ?>
    <tr>
        <td><?php echo $u['IDUser']; ?></td>
        <td><?php echo $u['Nombre'] ." ". $u['Apellidos']; ?></td>
        <td><?php echo $u['Email']; ?></td>
        <td><?php echo $u['Created']; ?></td>
        <td><?php 
            if ($u['Activacion'] == 1) {
                ?> <span class="labelon"><i class="fa fa-toggle-on" aria-hidden="true"></i> Activado</span> <?php
            } else {
                ?> <span class="labeloff"><i class="fa fa-toggle-off" aria-hidden="true"></i> Inactivo</span> <?php
            }

        ?></td>
        <td><?php 
            if ($u['Online'] == "1") {
                ?> <span class="labelon">Online</span> <?php
            } else {
                ?> <span class="labeloff">Offline</span> <?php
            }

        ?></td>
        <td>
            <div class="btn-group">
                <button type="button" class="btn green-jungle dropdown-toggle btn-xs">Acciones</button>
                <button type="button" class="btn green-jungle dropdown-toggle btn-xs" data-toggle="dropdown">
                    <i class="fa fa-angle-down"></i>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="<?php echo $CRDomain; ?>profile?user=<?php echo $u['IDUser']; ?>"><i class="fa fa-eye" aria-hidden="true"></i> Ver Perfil </a>
                    </li>
                    <li>
                        <?php if($u['Activacion'] == 1): ?>
                        <a href="../assets/controllers/users.php?action=desactivaruser&userid=<?php echo $u['IDUser']; ?>"><i class="fa fa-toggle-off" aria-hidden="true"></i> Desactivar </a>
                        <?php elseif($u['Activacion'] == 0): ?>
                        <a href="../assets/controllers/users.php?action=activaruser&userid=<?php echo $u['IDUser']; ?>"><i class="fa fa-toggle-on" aria-hidden="true"></i> Activar </a>
                        <?php endif; ?>
                    </li>
                    <li>
                        <a href="javascript:;"><i class="fa fa-pencil" aria-hidden="true"></i> Editar </a>
                    </li>
                    <li>
                        <a href="../assets/controllers/users.php?action=eliminaruser&userid=<?php echo $u['IDUser']; ?>"><i class="fa fa-trash" aria-hidden="true"></i> Eliminar </a>
                    </li>
                    <li>
                        <a class="confirm" href="usuarios"><i class="fa fa-trash" aria-hidden="true"></i> Confirm </a>
                    </li>
                    <li class="dropdown-header">Permisos</li>
                    <li>
                        <a href="javascript:;"><i class="fa fa-eye" aria-hidden="true"></i> Ver o Editar </a>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
    <?php
        }
    ?>
</tbody>

javascript datatables sweetalert2

asked by Charlie Clewer 20.12.2017 в 20:31

source

1 answer

Draw squares aligned in a row Question about if else statements

score 3 · Accepted Answer

One solution could be:

Modify the selector of JS to search the "buttons" Eliminar for a class (for example: confirmDelete ) and not for id .
Modify the markup ( HTML ) to assign to the buttons Eliminar a class to identify them and not a id

Example:

JS:
We can use event delegation and even if the elements are created dynamically by DataTable , the event still it will be detected. Then we subscribe to the event click of the document that has been made on a <a> with class confirmDelete . That is:

$(document).on('click', 'a.confirmDelete', function(e) {
  e.preventDefault();
  var linkURL = $(this).attr("href");
  warnBeforeRedirect(linkURL);
});

HTML:

<li>
   <a class="confirmDelete" href="../assets/controllers/users.php?action=eliminaruser&userid=<?php echo $u['IDUser']; ?>">
     <i class="fa fa-trash" aria-hidden="true"></i>
     Eliminar
   </a>
</li>

Demo:

$(document).on('click', 'a.confirmDelete', function(e) {
  e.preventDefault(); // Prevent the href from redirecting directly
  var linkURL = $(this).attr("href");
  warnBeforeRedirect(linkURL);
});

function warnBeforeRedirect(linkURL) {
  swal({
    title: "Leave this site?",
    text: "If you click 'OK', you will be redirected to " + linkURL,
    type: "warning",
    showCancelButton: true,
  }).then(function(result) {
    console.log(result);
    if (result.value) {
      window.location.href = linkURL;
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>Google</td>
    <td>
      <ul>
        <li>
          <a class="confirmDelete" href="https://google.com">
            <i class="fa fa-trash" aria-hidden="true"></i> Eliminar
          </a>
        </li>
      </ul>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yahoo!</td>
    <td>
      <ul>
        <li>
          <a class="confirmDelete" href="https://yahoo.com">
            <i class="fa fa-trash" aria-hidden="true"></i> Eliminar
          </a>
        </li>
      </ul>
    </td>
  </tr>
</table>