Question 7964 in PHP Versions Question posted in
You can find a list of all versions here.

Ajax function does not work and neither does it call the php function – PHP Versions

so I’m creating an online shop website and the admin is suppossed to be able to add,edit or remove the products. I’ve successfully finished coding the first two actions using php, and now I want to make the delete function.
I add the products from database to a table using a foreach php loop. I want the admin to be able to delete a product without refreshing the page, however, my ajax function does not work at all(I’m a noob in js btw), and it does not call my php page that I want to use to access database. My javascript is not that good so I’m wondering if it’s the way I’m adding the actionlisteners that ruins the code. Here is a simplified version of my code:

Javascript 

 $(document).ready(function(){
    let buttons = document.querySelectorAll('.rmvElement');
    for (let i=0; i<buttons.length; i++) {
        buttons[i].addEventListener('click', clickFunc(i));
        }
    
        function clickFunc(i) {
            $.ajax({
                type:'post',
                url:'./backend/adminAccess/deleteItem.php',
                dataType: 'json',
                data:(id=buttons[i].children[0].id ),
                cache: false,
                dataType: 'json',
                success:function(data){
                    console.log(data);
                }
                
            })
        }
 });

php

<php>
var_dump("100");
</php>

I have tried changing the code of the ajax function, using it without the "$.ajax" attribute, using "jQuery.ajax", adding a php function and changing the code so that it calls the function instead, and so many other things. I have been working on this code for a few days now, but still havent got results. I’d be forever thankful if you helped me.

Edit:This is the php page I created the buttons:

<?php
    require_once './backend/connection.php';
    require_once './backend/adminAccess/product.php';
    echo "<script src='./public/js/deleteItem.js'> </script>";

$sql="SELECT * FROM products";
$query=mysqli_query($conn,$sql);
$queryarray=mysqli_fetch_assoc($query);
$details='';
?>
<table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Product name</th>
        <th scope="col">Product type</th>
        <th scope="col">Additional info</th>
        <th scope="col">Items left</th>
        <th scope="col">Price</th>
        <th scope="col">Thumbnail</th>
        <th scop="col">Edit</th>
        <th scop="col">Delete</th>
        <!-- fix the scroll bar just in case. -->
      </tr>
    </thead>
    <tbody>
       <?php foreach($query as $key=>$value):?>
          <tr id="$key">
              <td><?php echo $key+1; ?></td>
              <td><?php echo $value['product_name']; ?></td>
              <td><?php echo $value['product_type']; ?></td>
              <?php $details=product::productListItems($conn,$value['product_type_id'],$value['product_type']);?>
              <?php if($value['product_type']=='stationery'):?>
                <td><?php echo 'type:'.$details['stationery_type']; ?></td>
              <?php elseif($value['product_type']=='cosmetics'):?>
                <td><?php echo 'type:'.$details['cosmetics_type'].', brand:'.$details['brand_name'].
                    ', color:'.$details['cosmetics_color'].', expire date:'.$details['expire_date']; ?></td>
              <?php elseif($value['product_type']=='attire'):?>
                <td><?php echo 'type:'.$details['attire_type'].', color:'.$details['attire_color'].', size:'.$details['attire_size']; ?></td>
              <?php else:?>
                <td><?php echo '_';endif; ?></td>
              <td><?php echo $value['items_left']; ?></td>
              <td><?php echo $value['price'].'$'; ?></td>
              <?php if($value['thumbnail']!=''): ?>
                <td><img src="<?php echo substr($value['thumbnail'],6);?>">
              <?php else: ?>
                <td><img src="./public/thumbnails/temp.jpeg"></td>
              <?php endif; ?>
              <?php if($value['product_type']=='stationery'):?>
                <td><?php echo'<a type="submit" id="'.$value['id'].'" class="btn btn-info" href="?admin=editStationery'.$value['id'].'-'.$details['id'].'">Edit </a></td>'
                .'<td class="rmvElement"><a class="btn btn-danger" id="'.$value['id'].'_'.$details['id'].'" >Delete</a></td>'
                ?>
              <?php elseif($value['product_type']=='cosmetics'):?>
                <td><?php echo'<a type="submit" class="btn btn-info"  href="?admin=editCosmetics'.$value['id'].'-'.$details['id'].'">Edit </a></td>'
                 .'<td><a class="btn btn-danger" onclick="delete('.$value['id'].','.$details['id'].')">Delete</a></td>'
                ?>
              <?php elseif($value['product_type']=='attire'):?>
                <td><?php echo'<a type="submit" class="btn btn-info"  href="?admin=editAttire'.$value['id'].'-'.$details['id'].'">Edit </a></td>'
                 .'<td><a class="btn btn-danger" onclick="delete('.$value['id'].','.$details['id'].')">Delete</a></td>'
                ?>            
              <?php else:?>
                <td><?php echo '_';endif;?>
          </tr>
        <?php endforeach; ?>
    </tbody>
</table>
Tags:

2

Answers


  1. 0

    The method addEventListener() works by adding a function, or an object that implements EventListener, to the list of event listeners for the specified event type on the EventTarget on which it’s called.

    When you call:

    buttons[i].addEventListener('click', clickFunc(i));

    clickFunc is invoked and it is not added as listener.

    In order to get the reference to the button you can use this that is the reference to the button clicked.

    $(document).ready(function(){
    let buttons = document.querySelectorAll('.rmvElement');
    for (let i=0; i<buttons.length; i++) {
        buttons[i].addEventListener('click', clickFunc);
    }
    
    function clickFunc() {
       console.log("clickFunc start");
       console.log("data to send: " + this.children[0].id);
    }
 });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rmvElement"><a id="product_desc" >click me</a></div>
    Login or Signup to reply.
  2. 0

    When you use addEventListener on an element the actual event listener is passed a single argument – the event. The manner in which you were trying to invoke the function was incorrectly trying to pass in your own variable i to that function. As with most things there are a couple of ways to solve this – you could use an anonymous function and from within that anonymous function call your clickFunc

    ie:

    buttons[i].addEventListener('click', function(e){
    clickFunc(i)
})

    or you could use either the event to identify the element ( and from that find the id and issue the request ) or a slightly different approach using a conventional function rather than the arrow function syntax allows you to access this from within the function and refer to the element that invoked the click.

    More info about addEventListener

    The following mocked up piece of HTML is intended to act as a pseudo-replica of the HTML depicted in your code above but greatly simplified. The hyperlink elements that you were using were not correct so I replaced them with button elements

    const clickhandler=function(event){
    event.preventDefault();
    /*
        within the context of this click handler "this" refers to the element 
        that invoked the click event! The "event" can refer to this same 
        element via event.target
    */
    console.log('this:%o', this)

    $.ajax({
        type: 'post',
        url: './backend/adminAccess/deleteItem.php',
        dataType: 'json',
        data: { id:this.dataset.id },
        cache: false,
        dataType: 'json',
        success: function(res) {
            console.log(res);
        },
        error: function(err) {
            console.warn(err);
        }
    })
}

document.querySelectorAll('.rmvElement > button').forEach( bttn => bttn.addEventListener('click', clickhandler ) );
    .rmvElement .btn {
  width: 150px;
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  margin: 0.25rem;
  display: block;
  text-align: center;
  cursor: pointer
}

.rmvElement .btn:hover {
  background: rgba(100, 0, 0, 0.25);
}

.rmvElement .btn:active {
  background: rgba(100, 0, 0, 0.75);
  color: white;
}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--
  Rather than the `a` element which was used incorrectly 
  you can use a simple button 
-->

<table class="table table-hover">
  <tr>
    <td class="rmvElement">
      <button class="btn btn-danger" data-id=324>Delete</button>
    </td>
  </tr>
  <tr>
    <td class="rmvElement">
      <button class="btn btn-danger" data-id=185>Delete</button>
    </td>
  </tr>
  <tr>
    <td class="rmvElement">
      <button class="btn btn-danger" data-id=999>Delete</button>
    </td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search