0

I currently have a problem with jQuery & PHP.

When I try to target on click on class ".id_annonce" from generated php code it does not grab me the exact value I clicked but another one and it's always fix, input hidden value is 18 when it should be 19 or 20.

Jquery code : 

var commander = $(this).val();
  var beta = $('body .id_annonce').val();
  window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + '';

My php code : 

require 'produits.php';
$pro = new produits;
$coll = $pro->getAllproduits();
foreach ($coll as $key => $value) {

    echo '<div class="card-body  my-3 border-top" >
        <img src="img/resize.jpg" class="card-img-top  " style="height:88px;width:88px;margin-left:20px;float:right;" alt="...">   
        <h3 class="card-title p-2" style="font-size:10px;font-style:none;font-weight:600;"><strong>Ajouté Le : </strong> ' . $value['date_ajout'] . '</h3>
        <div class="d-flex flex-row">
        <h6 class="card-subtitle p-2  mb-2  text-muted"><strong>Varieté : </strong>' . $value["variete"] . '</h6>
        <h6 class="card-subtitle p-2 mb-2  text-muted" style="font-style:none;"><strong>Especes :  </strong>5000 tonnes</h6></div>
        <div class="d-flex flex-row">
        <h6 class="card-subtitle p-2  text-muted"><strong>Classe : </strong>' . $value["classes"] . '</h6>
        <h6 class="card-subtitle p-2  text-muted" style="font-style:none;"><strong> Quantité :  </strong>' . $value["quantite"] . '</h6></div>
        <h6 class="card-subtitle p-2 mb-2 mt-1 text-muted" style="font-style:none;float:right;font-size:24px;">    <strong>Prix : </strong> ' . $value["prix"] . 'DA/kg</h6> 
        <div class="d-flex flex-row justify-content-start" style="margin-top:50px;">
        <div class="p-1"> <button  class="details" value="' . $value["id"] . '" style="border:none;background:none;"> <i class="fa fa-info-circle fa-2x  pr-2 text-success"></i></button></div>
        <div class="p-1">
        <input type="hidden"  value="' . $value["id"] . '"  class="id_annonce">
        <button class="commander btn btn-md  btn-outline-dark " value="' . $value["id_commande"] . '"> Commander <i class="fa fa-shopping-cart  pr-2 "></i></button></div>
        <div class="p-1">  

        <button  value="' . $value["Interesser"] . '" class="interesser btn  btn-md text-dark" style="border-color:green;font-weight:600;">Interesser(' . $value["Interesser"] . ')</button></div></div></div>';

}
Rayan Ch
  • 11
  • 5
  • You do not have any hidden input there, which one do you mean? Also note that when rendering code (JS/HTML) with PHP it will not change again from PHP side once it is in the browser. – ArSeN Mar 21 '20 at 12:02
  • Hello , i just edited when i show it on text it show me the right value but while on click it grab me the previous $value one for example i have 2 $value , $value[0] = 18 , $ value[1] = 19 it always grab me the first one not the 2nd one i think it's because name of the class (.id_annonce) who is same but i have no idea how i could fix it – Rayan Ch Mar 21 '20 at 12:05
  • For one your input is lacking a [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Additional_attributes). What is the desired behavior of the javascript you posted? Since you are outputting multiple inputs, which one should the javascript take? – ArSeN Mar 21 '20 at 12:10
  • Yes , i got the problem ArSen but what would change adding a name attribute to it , it will be same as targeting it with class no ? what i am asking is how can i target the exact value i want , think i am missing some logic while trying to fix the problem , i identified the problem correctly but fixing it is another part – Rayan Ch Mar 21 '20 at 12:14
  • 1
    I believe this is your culprit: `var beta = $('body .id_annonce').val();`. This will always return the value of the **first** element with that class. This command has no context of what was clicked. – El_Vanja Mar 21 '20 at 12:14
  • @El_Vanja , yes i understood this is the problem i am trying to find another way of walking through it correctly with grabbing the exact value – Rayan Ch Mar 21 '20 at 12:16
  • @freedomn-m the console.log($('body .id_annonce').length) VM863:1 the out put is 2 – Rayan Ch Mar 21 '20 at 12:18
  • @RayanCh it's ok - I removed that as you added a comment that you're aware `$('body .id_annonce').val();` is the problem. – freedomn-m Mar 21 '20 at 12:19

3 Answers3

0

You are grabbing the element by class (and multiple elements will have the same class) so you will not get a distinct one. You should therefore add a specific ID to the input and will be able to grab this then.

HTML output by PHP:

echo '<input type="hidden"  value="' . $value["id"] . '" id="annonce-' . $value["id"] . '"  class="id_annonce">'

JS:

var commander = $(this).val();
function goToAnnonce(id) {
  var beta = $('body #' + id).val();
  window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + ''; 
}

and to bind this to the button:

echo '<button class="commander btn btn-md  btn-outline-dark " value="' . $value["id_commande"] . '" onclick="goToAnnonce(\'annonce-' . $value["id_commande"] . '\')"> Commander <i class="fa fa-shopping-cart  pr-2 "></i></button></div>';

However I'd like to point out that this is an overly complicated solution just to realize a button click that changes the page. This can be done A LOT simpler by either changing the button to a link:

echo '<a href="panier.php?id=' . $value["id_commande"] . '&annonce=' . $value["id"] . 
'">Click me</a>';

Or by binding this click to the button. See this answer if you want to do that.

ArSeN
  • 5,133
  • 3
  • 19
  • 26
0

Within the button click code, this refers to the button that's been clicked. You can use that to navigate to the relevant hidden input.

My preferred method is to go up to a common parent ($(this).closest(...), then down to the input you want (.find("input...) This also works when you need multiple inputs, up once, down multiple times. It also reduces the rigidity that comes with .next() and similar.

In your case:

$(".commander").on("click", function() {
  var commander = $(this).val();
  var beta = $(this).closest(".card-body").find(".id_annonce").val();
  console.log('panier.php?id=' + commander + '?annonce=' + beta + '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card-body">
  <input type="hidden" value="123" class="id_annonce">
  <button type="button" class="commander">Commander</button>
</div>

<div class="card-body">
  <input type="hidden" value="456" class="id_annonce">
  <button type="button" class="commander">Commander</button>
</div>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
-1

I've misunderstood the problem before. You can try this-

$('.commander').on('click', function(e) {
    e.preventDefault();
    const commander = $(this).val();
    const beta = $(this).siblings('.id_annonce').val();

    window.location.href = 'panier.php?id='+ commander +'?annonce='+ beta + ''; 
});

The id_annonce input field is a sibling of the commander button. So you can grab this by getting the clicked commander's sibling id_annonce.

Sajeeb Ahamed
  • 6,070
  • 2
  • 21
  • 30
  • I just tested , this end still grabbing the old value instead of grabbing $value["id"] == 19 it grabs 18 which is the previous one , the problem is because i am focusing the same " class name" and i think it's because of html dom but i really have no idea how i could fix it or what kind of trick i should do – Rayan Ch Mar 21 '20 at 12:10
  • 3
    This will not generate any different output from the code in the question. – ArSeN Mar 21 '20 at 12:11
  • Does the redirect happen on any event listener? Say clicking on any button. – Sajeeb Ahamed Mar 21 '20 at 12:16
  • php is executed on the server, jquery is executed on the client - of course it's after :) The question is: when is your provided (in the question) jquery code run - is it on a button click? Which button? – freedomn-m Mar 21 '20 at 12:16
  • @freedomn-m both of the buttons , the only button who is working is details which redirect to another page , the other one it grab me the previous value not the exact one so it works only with the first result of the row. – Rayan Ch Mar 21 '20 at 12:20
  • Sorry for the inconvenience. I've updated the code. Have a try if it works. Thanks @freedomn-m for the idea. – Sajeeb Ahamed Mar 21 '20 at 12:45