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 = {
  cmd :' id_client',
  id_client: $(this).attr('data-id'),
};
$.ajax({
  type: "POST",
  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;
});

});

PHP corresponding function :

 function read()
{
  global $db;
  $id_client = $_POST['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 :

$(".switch").click(function () {
    var datas = {
      cmd :' id_client_statut',
      id_client: $(this).attr('data-id_statut'),
    };
    console.log(id_client);
    $.ajax({
      url: 'function.php',
      type: 'POST',
      data:  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();
  }
}

You have only shown us your PHP function definitions, but not where you are _calling_ them. — CBroe, Aug 01 '22 at 08:52
You have two different Ajax requests that calls the same PHP page with different values and HTTP method. How does your PHP code differentiate between those two calls to know which made the request? — M. Eriksson, Aug 01 '22 at 08:54
In my html , each button call their respective ajax's request. Each ajax request doesn't use the same datas, so i don't understand why i have an error for another function... — TonGGien, Aug 01 '22 at 08:59
_"each button call their respective ajax's request."_ - I get how you call the different JS functions. My question how you differentiate between those two calls _on the server_, since they go to the same file (function.php). How does PHP receive the request and decide what PHP function to call? — M. Eriksson, Aug 01 '22 at 09:27
One method use GET, other POST. The data-id is not the same for both... I don't know how to distinguish more... Maybe specify the url with the name function ? (i hadn't see that so). — TonGGien, Aug 01 '22 at 09:36
You haven't shown us the php code which currently decides which function to run. But yeah putting an "action" parameter in the request data, or in a header, something like that, would make sense for how to do it — ADyson, Aug 01 '22 at 10:00
I re edited on your recommendation. Same result... What's wrong ? — TonGGien, Aug 01 '22 at 12:07
`I already use "action" in another request`...why does that stop you using it for these requests?? — ADyson, Aug 01 '22 at 21:53
Because it doesn't work too. Si I tried with a variable cmd , one for ajax 's request, don't work too... Worse, my function "change statut" doesn't respond anymore... — TonGGien, Aug 02 '22 at 06:59

score 2 · Answer 1 · answered Aug 01 '22 at 09:00

2

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 () {
    //...
  });
});

answered Aug 01 '22 at 09:00

johey

1,139
1
9
25

I will test. Thank. It's the third function the trouble. When i click, in my dev tools, i can see the response call the read function , which doesn't correspond with this. That explain the undefined error. But why the switch function needs the read function ? – TonGGien Aug 01 '22 at 09:20
Same problem... – TonGGien Aug 01 '22 at 09:30
FYI: https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick – johey Aug 01 '22 at 09:36
Okay, I suppressed the onclick and name function. But , i don't see how to resolve the problem. I need the "id_client" for both. – TonGGien Aug 01 '22 at 09:46

score 1 · Answer 2 · answered Aug 01 '22 at 14:29

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)** 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

request ajax doesn't call the good function

2 Answers2