php – Get the attribute of a button with jQuery and Ajax?

Question:

$(document).ready(function() {

  $(".eliminar").click(function(e) {

    e.preventDefault();
    var id = $(this).attr('data-id');

    //alert(id);
    $(this).closest('.holder-cesta').remove();

    //Esta parte no me funciona.
    $.post('./php/carro_compra/eliminar.php', {
      Id: id
    }, function(a) {
      if (a == '0') {
        location.href = "./cesta";
      }
    });


  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="holder-cesta">
  <h4>Product 1</h4>
  <button class="eliminar" data-id="1">Delete</button>
</div>

<div class="holder-cesta">
  <h4>Product 3</h4>
  <button class="eliminar" data-id="3">Delete</button>
</div>

<div class="holder-cesta">
  <h4>Product 2</h4>
  <button class="eliminar" data-id="2">Delete</button>
</div>

I am creating the boton to remove the products from the basket. Each added product will have a delete boton .

I $_SESSION['carrito']; results of the shopping cart in a session called $_SESSION['carrito'];

Here is the code where I call the products and their delete button:

<?php
    //Array carrito de compras.
    $data = $_SESSION['carrito'];
    $total = 0;                                     

    for ($i=0; $i<count($data); $i++) {
?>

      <div class="holder-cesta">
         <h4><?php echo $data[$i]['Titulo']; ?></h4>    
         <button class="eliminar" data-id="<?php echo $data[$i]['Id']; ?>">Eliminar</button>    
      </div>
<?php
     }
?>

data-id I get the product id .

Let's see the jQuery code:

$(document).ready(function() {

    $(".eliminar").click(function(e) {

        e.preventDefault();
        //Obtengo el id desde nuestro boton.
        var id = $(this).attr('data-id');       

        //Mi alert lanza correctamente el id associado.
        //alert(id);
        $(this).closest('.holder-cesta').remove();//Remueve correctamente           
        //AJAX
        //Aqui viene mi problema,no obtengo var id en $.post y tampoco parece que vaya a la url eliminar.php
        $.post('./php/carro_compra/eliminar.php', {
            Id:id
        },function(a) {
            if (a=='0') {
                location.href="./cesta";
            }
        });


    });
});

if I do a var_dump($_POST['Id']); In my delete.php file, this function does not really do anything, if I modify the ajax a bit, it sends me a NULL.

The jQuery works fine, since it correctly triggers the alert and also removes the div .holder-basket, but the problem is as if it never goes to the url of $.post where I want to update the array using the Id as follows :

if ($arreglo[$i]['Id']!= $_POST['Id']) {

}

I also attach the delete.php file with which I want to update my shopping cart when deleting a product:

  <?php
//Session start
session_start();
//Get shoping cart data.
$arreglo = $_SESSION['carrito'];

for ($i=0; $i<count($arreglo); $i++) { 
    //Logica, si id del articulo es diferente a la variable obtenido por Ajax.
    if ($arreglo[$i]['Id']!= $_POST['Id']) {

        $datosnuevos[] = ['Id' => $arreglo[$i]['Id'], 'Titulo' =>$arreglo[$i]['Titulo'], 'Precio' => $arreglo[$i]['Precio'], 'Icon' => $arreglo[$i]['Icon'], 'Cantidad' => $arreglo[$i]['Cantidad'] ];
    }
}

if (isset($datosnuevos)) {
    //Modifico la sesion, dejando el resto de articulos comprados.
    $_SESSION['carrito'] = $datosnuevos;
    //Modificamos el valor del carro.
    $data = $_SESSION['carrito'];
    $value_carrito = count($data);
    $_SESSION['compras'] = $value_carrito;
    //Asi tambien se recarga la página con los datos actualizado
    echo "0";

} else {
    unset($_SESSION['carrito']);
    unset($_SESSION['compras']);
    echo "0";
}
?>

Answer:

if the content of the cart is added by ajax and jquery it will not serve you:

 $(".eliminar").click(function(e) {

Change it to:

 $(document).on("click",'.eliminar', function (event, xhr, settings) {

what is happening to you is that you have a DOM Bind problem and a new element.

Post Views: 8
Scroll to Top