request ajax doesn't call the good function

Question

I have a trouble with my request AJAX. When I click on it, in the process, it calls an other php function which I don't need for this request (function switch, change statut).

http://www.noelshack.com/2022-31-1-1659342824-undefined-index.png

This line with error corresponds to another function.

My HTML:

<table id="list_client_pris" border=1>
      <tr>
        <td>#</td>
        <td>Nom</td>
      </tr>
      <?php

      $clients = $db->query('SELECT * FROM client');

      foreach ($clients as $client) :
      ?>
        <tr id="tr1">
          <td><?php echo $client["id_client"]; ?></td>
          <td><?php echo $client["nom_client"]; ?></td>
          <td><button data-id="<?php echo $client["id_client"]; ?>"  type="button" class="info">Info client</button></td>
          <td><button type="button" class="hide_client" data-id="<?php echo $client["id_client"]; ?>">Masquer client</button></td>
          <td><button data-id="<?php echo $client["id_client"]; ?>" type="button" class="switch">Change statut</button></td>
        </tr>
      <?php endforeach; ?>
    </table>

3 buttons call each their ajax's request. The conflict is between the first button (class info) and the last, (class switch) Why? The buttton class' info call a function which correspond to the error showed, but which is not called with the last button.

My JS, request for the first button, info:

$(".info").click(function () {
    var datas = {
      id_client: $(this).attr('data-id'),
    };
    $.ajax({
      type: "GET",
      url: "function.php",
      data: {cmd :' id_client', datas},
      cache: false,
    }).done(function (result) {

      $('#nom').html(result.nom_client),
        $('#prenom').html(result.prenom_client),
        $('#date').html(result.client_date_naissance),
        $('#adresse').html(result.client_adresse),
        $('#mail').html(result.client_mail),
        $('#tph').html(result.client_tph),
        $('#age').html(result.age)
        $("#info_client").css("display", "block");

      date_client = (result.client_date_naissance);
      return date_client;
    });
  });

PHP corresponding function:

 function read()
{
  global $db;
  $id_client = $_GET['id_client']; **(error showed)**
  $query = $db->prepare("SELECT *,FROM client WHERE id_client = :id_client");
  $query->bindValue(':id_client', $id_client, PDO::PARAM_INT);
  $query->execute();
  $result = $query->fetch(PDO::FETCH_ASSOC);
  return ($result);
} 

My other ajax's request for button switch:

    $( document ).ready(function(action) {
  $(".switch").click(function () {
    var datas = {id_client_statut: $(this).attr('data-id_statut'),
    };
    $.ajax({
      url: 'function.php',
      type: 'POST',
      data: {cmd:' id_client_statut', datas},
      done: function (click_result) {
        console.log(click_result);
        
        if (click_result.statut=2){
          //transfer to libre
          $('#tr2').append($('#tr1').html());
          $('#tr1').html('');
        }
        }
      }
    );
    });

Corresponding php function:

function change_statut(){
  global $db;
  $id_client_statut = $_POST['id_client'];
  $query=$db->prepare(" UPDATE alarme INNER JOIN client_alarme ON client_alarme.id_alarme = alarme.id_alarme
INNER JOIN client on client.id_client=client_alarme.id_client     
SET id_statut = 2
WHERE client.id_client= :id_client");
  $query->bindValue(':id_client', $id_client_statut, PDO::PARAM_INT);
  $query->execute();
  $click_result = $query->fetch(PDO::FETCH_ASSOC);
  return ($click_result);
}

My php function to distinguish:

    if (isset($_POST['cmd'])){
 if ($_POST['cmd'] == 'id_client_statut') {
      change_statut();
    }
else if ($_POST['cmd'] == 'id_client') {
      read();
  }
}

Answer 1

I don't really see why the first button would call the wrong function, but there is a problem with the way you setup the button events: via the onclick you are just binding the event handlers.

In function d_info() you currently just tell what should happen when the button.info is clicked. Idem for function change_statut(). So currently you have to click the buttons twice. First to bind the event and again to trigger the event (the second time it will also rebind the event).

You should get rid of the onclick attributes and bind the button events via the document ready event.

$( document ).ready(function() {
  $(".switch").click(function () {
    //...
  });
  $(".info").click(function () {
    //...
  });
});

Answer 2

In your Request you write:

$(".info").click(function () {
    var datas = {
      id_client: $(this).attr('data-id'),
    };
    $.ajax({
      type: "GET",
      url: "function.php",
      data: {cmd :' id_client', datas},
      cache: false,
    }).done(function (result) {

      $('#nom').html(result.nom_client),
        $('#prenom').html(result.prenom_client),
        $('#date').html(result.client_date_naissance),
        $('#adresse').html(result.client_adresse),
        $('#mail').html(result.client_mail),
        $('#tph').html(result.client_tph),
        $('#age').html(result.age)
        $("#info_client").css("display", "block");

      date_client = (result.client_date_naissance);
      return date_client;
    });

But the line data: {cmd:' id_client', datas}, gives you a new object witch is:

data: {
    cmd :' id_client', 
    datas: {
        id_client: $(this).attr('data-id'),
    }
},

Now you can easily understand why your php gives you an error while reading $id_client = $_GET['id_client']; **(error showed)** $id_client = $_GET['id_client']; **(error showed)** as the real path to your value is $id_client = $_GET['datas']['id_client'];

But why using this kind of syntax while you have create datas in order to prepare ajax data object?

The simpliest way to correct the error is to replace all object argument in the datas:

$(".info").click(function () {
    var datas = {
      cmd :' id_client',
      id_client: $(this).attr('data-id'),
    };
    $.ajax({
      type: "GET",
      url: "function.php",
      data: datas,
      cache: false,
    }).done(function (result) {

      $('#nom').html(result.nom_client),
        $('#prenom').html(result.prenom_client),
        $('#date').html(result.client_date_naissance),
        $('#adresse').html(result.client_adresse),
        $('#mail').html(result.client_mail),
        $('#tph').html(result.client_tph),
        $('#age').html(result.age)
        $("#info_client").css("display", "block");

      date_client = (result.client_date_naissance);
      return date_client;
    });

Hope it's helpfull;) Happy coding